'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index$1 = require('./index-578e90b1.js');
require('./color-e75007c0.js');
require('./scroll-spy-e6c0bfcc.js');
require('./throttle-ad3917c4.js');
const validator = require('./validator-f6fe05c3.js');

const BceElementIcon = class {
    constructor(hostRef) {
        index$1.registerInstance(this, hostRef);
        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.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 [
            index$1.h("p", null, this.handler.t('question')),
            index$1.h("div", null, this.template.options.map((option, index) => (index$1.h("bce-button", { "data-index": index, "data-checked": this.value === index, onClick: this.handleClick }, index$1.h("bce-icon", { raw: option.text, style: { color: option.color } }))))),
            this.error && index$1.h("small", null, this.error)
        ];
    }
    get el() { return index$1.getElement(this); }
    static get style() { return ":host{position:relative;display:block;margin:20px 0}:host p{font-weight:500;text-align:center}\@media screen and (min-width: 1024px){:host p{text-align:left}}:host>div{display:-ms-flexbox;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;-ms-flex-pack:center;justify-content:center}:host bce-button{--bce-c300:var(--bce-c300-light);--bce-c400:var(--bce-c400-light);--bce-c500:var(--bce-c500-light);--bce-c600:var(--bce-c600-light);--bce-c700:var(--bce-c700-light);--bce-con1:var(--bce-con1-light);--bce-con2:var(--bce-con2-light);--bce-con3:var(--bce-con3-light);--bce-con4:var(--bce-con4-light);-ms-flex:0 0 auto;flex:0 0 auto;margin:8px;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;height:68px}:host bce-button[data-checked]{-webkit-transform:scale(1.2);transform:scale(1.2)}:host bce-button bce-icon{display:-ms-flexbox;display:flex;width:100%;font-size:44px;-ms-flex-pack:center;justify-content:center}:host>small{position:absolute;font-size:12px;bottom:-16px;left:12px;text-align:left;-webkit-transition:left 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:left 0.15s cubic-bezier(0.4, 0, 0.2, 1);color:var(--bce-c500-error)}:host>small:before{content:\"\";position:absolute;left:-6px;font-weight:100}\@media screen and (min-width: 600px){:host>div{-ms-flex-flow:row wrap;flex-flow:row wrap}}\@media screen and (min-width: 1024px){:host>div{-ms-flex-pack:start;justify-content:flex-start}}"; }
};

exports.bce_element_icon = BceElementIcon;
