'use strict';

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

const core = require('./core-0f211bec.js');

const BceElementRadio = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.handleFocus = (event) => {
            const input = event.target;
            this.value = {
                index: this.template.options.length - 1,
                text: input.value
            };
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
        this.handleOption = (event) => {
            if (!this.template)
                return;
            event.cancelBubble = true;
            const input = event.target;
            const index = parseInt(input.value, 10);
            const text = this.template.options[index].text;
            this.value = { index, text };
            if (this.template.other && index === this.template.options.length - 1) {
                const query = this.el.querySelector('bce-option bce-input');
                const input = query;
                this.value.text = input.value;
                input.querySelector('input').focus();
            }
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
        this.handleInput = (event) => {
            event.cancelBubble = true;
            this.value = {
                index: this.template.options.length - 1,
                text: event.target.value
            };
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    renderOther(option) {
        return (core.h("bce-input", { placeholder: option.text, onFocus: this.handleFocus, onInput: this.handleInput }));
    }
    renderOption(option, index) {
        if (!this.template)
            return null;
        const other = this.template.other && index === this.template.options.length - 1;
        return (core.h("bce-option", { value: '' + index }, other ? this.renderOther(option) : option.text));
    }
    render() {
        if (!this.template)
            return null;
        return (core.h(core.Host, { orientation: this.template.orientation }, core.h("p", null, this.template.question), core.h("bce-input", { type: "radio", validation: this.template.required ? 'required' : '', value: '' + (this.value ? this.value.index : -1), onInput: this.handleOption }, this.template.options.map((o, i) => this.renderOption(o, i)))));
    }
    get el() { return core.getElement(this); }
    static get style() { return "bce-element-radio p{font-weight:500;text-align:center}\@media screen and (min-width:1024px){bce-element-radio p{text-align:left}}bce-element-radio[orientation=horizontal] bce-input>[data-input]{display:-ms-flexbox;display:flex}bce-element-radio[orientation=horizontal] bce-input>[data-input] bce-option{margin-right:1.5rem}bce-element-radio bce-option[type=radio][checked] bce-input[focus] input{border-color:var(--bce-color-n)}bce-element-radio bce-option[type=radio][checked] bce-input input{border:1px solid var(--bce-color-light-d)}bce-element-radio bce-option[type=radio] bce-input{margin:0;width:auto;min-width:200px}bce-element-radio bce-option[type=radio] bce-input input{margin:0;min-width:200px;border-radius:4px}"; }
};

exports.bce_element_radio = BceElementRadio;
