import { r as registerInstance, h, g as getElement } from './core-095fd691.js';
var BceElementMatrix = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.value = this.template
            ? Array(this.template.rows.length).fill(null)
            : [];
        this.handleInput = function (event) {
            event.cancelBubble = true;
            var target = event.target;
            if (!target.value)
                return;
            // console.log(target.value);
            var clone = _this.value.slice();
            var _a = target.value.split(','), row = _a[0], column = _a[1];
            var index = parseInt(row, 10);
            // console.log([row, column]);
            var value = column === undefined ? null : parseInt(column, 10);
            clone[index] = value;
            _this.value = _this.template.rows.map(function (_, i) {
                // console.log(clone[i]);
                return clone[i] === undefined ? null : clone[i];
            });
            console.log(_this.value);
            _this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    class_1.prototype.renderRow = function (r) {
        if (!this.template)
            return null;
        var value = this.value[r] != null ? r + "," + this.value[r] : null;
        return (h("bce-input", { type: "radio", value: value, validation: this.template.required ? 'required' : '', onInput: this.handleInput }, this.template.columns.map(function (_, c) { return (h("bce-option", { value: r + "," + c })); })));
    };
    class_1.prototype.render = function () {
        var _this = this;
        if (!this.template)
            return null;
        var tl = this.template.columns.map(function (col) { return h("label", null, col.text); });
        var sl = this.template.rows.map(function (row) { return h("label", null, row.text); });
        var rb = this.template.rows.map(function (_, r) { return _this.renderRow(r); });
        return [
            h("p", null, this.template.question),
            h("div", { class: "tl" }, tl),
            h("div", { class: "sl" }, sl),
            h("div", { class: "rb" }, rb)
        ];
    };
    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-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}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
export { BceElementMatrix as bce_element_matrix };
