import { h, Host } from "@stencil/core";
export class BceElementMatrix {
    constructor() {
        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, parseInt(column));
            this.value = clone;
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    componentDidLoad() {
        this.value = this.value
            ? 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", { value: this.value[i], validation: this.template.required ? 'required' : '', onInput: this.handleInput, type: "radio" }, this.template.columns.map((option, j) => (h("bce-option", { checked: this.value[i] === j ? true : false, value: i + ',' + j })))))))));
    }
    static get is() { return "bce-element-matrix"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-matrix.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-matrix.css"]
    }; }
    static get properties() { return {
        "template": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Block.ElementMatrix.Template",
                "resolved": "undefined | { readonly question: string; readonly required: boolean; readonly rows: SelectElementOption[]; readonly columns: SelectElementOption[]; }",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "value": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Array<number | null>",
                "resolved": "(number | null)[]",
                "references": {
                    "Array": {
                        "location": "global"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
