import { r as registerInstance, h, H as Host, g as getElement } from './core-095fd691.js';
var BceElementCheckbox = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.handleOption = function (event) {
            if (!_this.template)
                return;
            event.cancelBubble = true;
            var input = event.target;
            var value = (input.value || []);
            var query = _this.el.querySelector('bce-option bce-input');
            var otherEl = query;
            _this.value = value.map(function (value) {
                var index = parseInt(value, 10);
                var text = otherEl && index === _this.template.options.length - 1
                    ? otherEl.value
                    : _this.template.options[index].text;
                return { index: index, text: text };
            });
            // const index = -1;
            // if (otherEl && index === this.template!.options.length - 1)
            _this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
        this.handleInput = function (event) {
            event.cancelBubble = true;
            var options = Array.from(_this.el.querySelectorAll('bce-option') || []);
            var last = options[options.length - 1];
            if (!last.checked)
                return;
            var input = event.target;
            _this.value = _this.value.slice(0, -1).concat([
                { index: parseInt(last.value, 10), text: input.value }
            ]);
            _this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    class_1.prototype.renderOther = function (option, index) {
        var value = this.value && this.value[this.value.length - 1];
        var text = value && value.index === index ? value.text : '';
        return (h("bce-input", { placeholder: option.text, value: text || '', onInput: this.handleInput }));
    };
    class_1.prototype.renderOption = function (option, index) {
        if (!this.template)
            return null;
        var other = this.template.other && index === this.template.options.length - 1;
        return (h("bce-option", { value: '' + index }, other ? this.renderOther(option, index) : option.text));
    };
    class_1.prototype.render = function () {
        var _this = this;
        if (!this.template)
            return null;
        return (h(Host, { orientation: this.template.orientation }, h("p", null, this.template.question), h("bce-input", { type: "checkbox", value: this.value && this.value.map(function (value) { return value.index + ''; }), validation: this.template.required ? 'required' : '', onInput: this.handleOption }, this.template.options.map(function (o, i) { return _this.renderOption(o, i); }))));
    };
    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-checkbox p{font-weight:500;text-align:center}\@media screen and (min-width:1024px){bce-element-checkbox p{text-align:left}}bce-element-checkbox bce-option[type=checkbox][checked] bce-input[focus] input{border-color:var(--bce-color-n)}bce-element-checkbox bce-option[type=checkbox][checked] bce-input input{background-color:var(--bce-color-light-l);border:1px solid var(--bce-color-light-d)}bce-element-checkbox bce-option[type=checkbox] bce-input{margin:0;width:auto;min-width:200px}bce-element-checkbox bce-option[type=checkbox] bce-input input{margin:0;min-width:200px;border-radius:4px}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
export { BceElementCheckbox as bce_element_checkbox };
