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
 */
class MaterialsMultipleSelect {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * list of selected elements
         */
        this.value = [];
        this.change = createEvent(this, "change", 7);
    }
    componentWillLoad() {
        if (!this.value)
            this.value = [];
    }
    componentWillUpdate() {
        if (!this.value)
            this.value = [];
    }
    componentDidLoad() {
        this.displayValue();
    }
    componentDidUpdate() {
        this.displayValue();
    }
    /**
     * @param event allows to open dialog when text-field is clicked
     */
    openMultiSelectDialog(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
     */
    fillMultiSelectInput() {
        this.displayValue();
        this.change.emit();
    }
    /**
     * Function that displays values selected in the text-field
     */
    displayValue() {
        if (this.value) {
            const selectedValue = this.value.map(val => {
                return this.options.get(val);
            }).join(', ');
            this.multiSelectInput.componentOnReady().then(() => {
                this.multiSelectInput.value = selectedValue;
                this.multiSelectInput.title = selectedValue;
            });
        }
    }
    /**
     * 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
     */
    toggleOption(event, option) {
        event.stopPropagation();
        event.preventDefault();
        if (event.detail) {
            this.value.push(option);
        }
        else {
            this.value.splice(this.value.indexOf(option), 1);
        }
    }
    render() {
        return ([
            h("materials-text-field", { disabled: true, label: this.label, overflow: true, "trailing-icon": this.trailingIcon, dense: this.dense, ref: el => this.multiSelectInput = el, onClick: (event) => this.openMultiSelectDialog(event) }),
            h("materials-dialog", { acceptButton: "S\u00E9lectionner", cancelButton: "Annuler", "close-button": true, onAccept: () => this.fillMultiSelectInput(), ref: el => this.multiSelectDialog = el }, h("materials-list", { slot: "body" }, this.options && Array.from(this.options.keys()).map(opt => {
                return h("materials-list-item-checkbox", { onChange: (event) => this.toggleOption(event, opt), checked: this.value && this.value.length > 0 && !!this.value.find(val => opt === val), label: this.options.get(opt), value: opt });
            })))
        ]);
    }
    get host() { return getElement(this); }
    static get style() { return ":host{display:block;cursor:pointer}materials-text-field{text-overflow:ellipsis}"; }
}

export { MaterialsMultipleSelect as materials_multiple_select };
