import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-2123d8c1.js';
/**
 * Class that represent a multi-select element
 * composed by a clickable text-field
 * that opens a dialog with a list of checkboxes
 */
var MaterialsMultipleSelect = /** @class */ (function () {
    function MaterialsMultipleSelect(hostRef) {
        registerInstance(this, hostRef);
        /**
         * list of selected elements
         */
        this.value = [];
        this.change = createEvent(this, "change", 7);
    }
    MaterialsMultipleSelect.prototype.componentWillLoad = function () {
        if (!this.value)
            this.value = [];
        this.computeMultiList();
    };
    MaterialsMultipleSelect.prototype.componentWillUpdate = function () {
        if (!this.value)
            this.value = [];
        this.computeMultiList();
    };
    MaterialsMultipleSelect.prototype.computeMultiList = function () {
        var nbList = this.maxElementsColumn ? (this.options.size / this.maxElementsColumn) + (this.options.size % this.maxElementsColumn) : 0;
        if (nbList > 0) {
            this.multiList = new Map();
            var keys = Array.from(this.options.keys());
            for (var i = 0; i < nbList; i++) {
                var start = i * this.maxElementsColumn;
                var end = (i + 1) * this.maxElementsColumn;
                this.multiList.set(i, keys.slice(start, end < this.options.size ? end : this.options.size));
            }
        }
        else {
            this.multiList = new Map().set(0, Array.from(this.options.keys()));
        }
    };
    MaterialsMultipleSelect.prototype.componentDidLoad = function () {
        this.displayValue();
    };
    MaterialsMultipleSelect.prototype.componentDidUpdate = function () {
        this.displayValue();
    };
    /**
     * @param event allows to open dialog when text-field is clicked
     */
    MaterialsMultipleSelect.prototype.openMultiSelectDialog = function (event) {
        event.stopPropagation();
        event.preventDefault();
        this.multiSelectDialog.dialogTitle = this.dialogTitle;
        this.multiSelectDialog.toggle();
    };
    /**
     * Function called when dialog is accepted
     * emit change event
     * display values selected in text-field
     */
    MaterialsMultipleSelect.prototype.fillMultiSelectInput = function () {
        this.displayValue();
        this.change.emit();
    };
    /**
     * Function that displays values selected in the text-field
     */
    MaterialsMultipleSelect.prototype.displayValue = function () {
        var _this = this;
        if (this.value) {
            var selectedValue_1 = this.value.map(function (val) {
                return _this.options.get(val);
            }).join(', ');
            this.multiSelectInput.componentOnReady().then(function () {
                _this.multiSelectInput.value = selectedValue_1;
                _this.multiSelectInput.title = selectedValue_1;
            });
        }
    };
    /**
     * Function to select or deselect options
     * @param {CustomEvent} event allows to know if options must be selected or deselected
     * @param {string} option to select or deselect
     */
    MaterialsMultipleSelect.prototype.toggleOption = function (event, option) {
        event.stopPropagation();
        event.preventDefault();
        if (event.detail) {
            this.value.push(option);
        }
        else {
            this.value.splice(this.value.indexOf(option), 1);
        }
    };
    MaterialsMultipleSelect.prototype.render = function () {
        var _this = this;
        return ([
            h("materials-text-field", { focused: !!this.value && this.value.length > 0, readonly: true, label: this.label, overflow: true, "trailing-icon": this.trailingIcon, dense: this.dense, ref: function (el) { return _this.multiSelectInput = el; }, onClick: function (event) { return _this.openMultiSelectDialog(event); } }),
            h("materials-dialog", { acceptButton: "S\u00E9lectionner", cancelButton: "Annuler", "close-button": true, onAccept: function () { return _this.fillMultiSelectInput(); }, ref: function (el) { return _this.multiSelectDialog = el; } }, h("div", { slot: "body", class: "body-list" }, this.multiList && Array.from(this.multiList.keys()).map(function (optKeys) {
                return h("materials-list", null, _this.multiList.get(optKeys).map(function (opt) {
                    return h("materials-list-item-checkbox", { onChange: function (event) { return _this.toggleOption(event, opt); }, checked: _this.value && _this.value.length > 0 && !!_this.value.find(function (val) { return opt === val; }), label: _this.options.get(opt), value: opt });
                }));
            })))
        ]);
    };
    Object.defineProperty(MaterialsMultipleSelect.prototype, "host", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MaterialsMultipleSelect, "style", {
        get: function () { return ":host{display:block;font-size:1rem}:host materials-text-field{text-overflow:ellipsis}:host .body-list{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}"; },
        enumerable: true,
        configurable: true
    });
    return MaterialsMultipleSelect;
}());
export { MaterialsMultipleSelect as materials_multiple_select };
