import { validator } from '@bcase/core';
import { h } from "@stencil/core";
export class BceElementIcon {
    constructor() {
        this.handleClick = (event) => {
            const target = event.target;
            if (!target || !this.template)
                return;
            this.value = parseInt(target.parentElement.dataset.index, 10);
            const e = new Event('input', { bubbles: true, composed: true });
            this.el.dispatchEvent(e);
        };
    }
    async validate(silent = false) {
        if (!this.template || !this.template.required)
            return [];
        const error = await validator.validateRule('required', [], this.value, {
            el: this.el,
            tag: this.el.tagName.toLocaleLowerCase()
        });
        this.error = error && !silent ? error.message : '';
        return error ? [error] : [];
    }
    render() {
        if (!this.template)
            return;
        return [
            h("p", null, this.handler.t('question')),
            h("div", null, this.template.options.map((option, index) => (h("bce-button", { "data-index": index, "data-checked": this.value === index, onClick: this.handleClick },
                h("bce-icon", { raw: option.text, style: { color: option.color } }))))),
            this.error && h("small", null, this.error)
        ];
    }
    static get is() { return "bce-element-icon"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-icon.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-icon.css"]
    }; }
    static get properties() { return {
        "handler": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "InputHandler",
                "resolved": "InputHandler",
                "references": {
                    "InputHandler": {
                        "location": "import",
                        "path": "../../../utils/input-handler"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "language": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "language",
            "reflect": false
        },
        "template": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IconElement",
                "resolved": "IconElement | undefined",
                "references": {
                    "IconElement": {
                        "location": "import",
                        "path": "./element-icon"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "value": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get states() { return {
        "error": {}
    }; }
    static get methods() { return {
        "validate": {
            "complexType": {
                "signature": "(silent?: boolean) => Promise<ValidatorError[]>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ValidatorError": {
                        "location": "import",
                        "path": "@bcase/core"
                    }
                },
                "return": "Promise<ValidatorError[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
