import { r as registerInstance, h, H as Host, g as getElement } from './core-095fd691.js';

const BceElementMatrix = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.handleInput = (event) => {
            event.cancelBubble = true;
            const target = event.target;
            const [row, column] = target.value.toString().split(',');
            const clone = [...this.value];
            clone.splice(parseInt(row, 10), 1, column);
            this.value = clone;
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    componentDidLoad() {
        this.value = Array(this.template.rows.length).fill(null);
    }
    render() {
        if (!this.template)
            return null;
        return (h(Host, null, h("p", null, this.template.question), h("div", { class: "tl" }, this.template.columns.map((column, i) => (h("label", null, column.text)))), h("div", { class: "sl" }, this.template.rows.map((row, i) => (h("label", null, row.text)))), h("div", { class: "rb" }, this.template.rows.map((row, i) => (h("bce-input", { validation: this.template.required ? 'required' : '', onInput: this.handleInput, type: "radio" }, this.template.columns.map((option, j) => (h("bce-option", { value: i + ',' + j })))))))));
    }
    get el() { return getElement(this); }
    static get style() { return "bce-element-matrix{display:grid;grid-template:\"q q\" \".. tl\" auto \"sl rb\" auto/auto auto}bce-element-matrix>p{font-weight:500;grid-area:q;text-align:center}\@media screen and (min-width:1024px){bce-element-matrix>p{text-align:left}}bce-element-matrix>div.tl{position:relative;grid-area:tl;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}bce-element-matrix>div.sl{position:relative;height:100%;grid-area:sl;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}bce-element-matrix>div.sl label{line-height:28px;margin:20px 0 0;height:32px}bce-element-matrix>div.rb{grid-area:rb}bce-element-matrix>div.rb bce-input>[data-input]{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}"; }
};

export { BceElementMatrix as bce_element_matrix };
