import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-7400f9fd.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 = [];
    };
    MaterialsMultipleSelect.prototype.componentWillUpdate = function () {
        if (!this.value)
            this.value = [];
    };
    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", { disabled: 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("materials-list", { slot: "body" }, this.options && Array.from(this.options.keys()).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;cursor:pointer}materials-text-field{text-overflow:ellipsis}"; },
        enumerable: true,
        configurable: true
    });
    return MaterialsMultipleSelect;
}());
export { MaterialsMultipleSelect as materials_multiple_select };
