import { r as registerInstance, h, g as getElement } from './core-095fd691.js';
var BceElementIcon = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.handleClick = function (event) {
            var target = event.target;
            if (!target || !_this.template)
                return;
            _this.value = parseInt(target.parentElement.dataset.index, 10);
            _this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    class_1.prototype.render = function () {
        var _this = this;
        if (!this.template)
            return;
        return [
            h("p", null, this.template.question),
            h("div", null, this.template.options.map(function (option, index) { return (h("bce-button", { icon: option.text, "data-index": index, "data-checked": _this.value === index, "icon-only": true, onClick: _this.handleClick, style: { color: option.color } })); }))
        ];
    };
    Object.defineProperty(class_1.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { return "bce-element-icon{position:relative}bce-element-icon p{font-weight:500;text-align:center}\@media screen and (min-width:1024px){bce-element-icon p{text-align:left}}bce-element-icon>div{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:center;justify-content:center}bce-element-icon bce-button{--bce-color-l:var(--bce-color-light-l);--bce-color-n:var(--bce-color-light-n);--bce-color-d:var(--bce-color-light-d);--bce-color-t:var(--bce-color-light-t);-ms-flex:0 0 auto;flex:0 0 auto;margin:8px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}bce-element-icon bce-button[data-checked]{-webkit-transform:scale(1.2);transform:scale(1.2)}bce-element-icon bce-button[data-checked]:focus:before{opacity:0}bce-element-icon bce-button bce-icon{font-size:22px}\@media screen and (min-width:600px){bce-element-icon bce-button bce-icon{font-size:44px}}\@media screen and (min-width:1024px){bce-element-icon>div{-ms-flex-pack:start;justify-content:flex-start}}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
export { BceElementIcon as bce_element_icon };
