import { h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../../../shared/utils/dom-utils";
import { detectFramework } from "../../../shared/utils/framework-detection";
import { trackComponent } from "../../../shared/utils/tracking";
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
export class Multiselect {
    /** Name of the multi-select field (used in forms). */
    name;
    /** If true, the multi-select is disabled and not interactive. */
    disabled = false;
    /** Whether at least one option must be selected. */
    required = false;
    /** If true, shows the multi-select in an error state. */
    error = false;
    /** Helper text shown below the multi-select. */
    caption = "";
    /** Label shown above the multi-select. */
    label = "";
    /** Placeholder text shown when nothing is selected. */
    placeholder = "";
    /** If true, shows a search box inside the dropdown. */
    showSearch = true;
    /** If true, shows a “Select all” option. */
    showSelectAll = true;
    /** If true, shows a button to clear all selections. */
    showClearButton = true;
    /** If true, shows expand/collapse controls for nested options. */
    showExpandCollapse = true;
    /** Message shown when no search results are found. */
    noResultsMessage = "No results found.";
    /** If true, displays the “no results” message when nothing matches. */
    showNoResultsMessage = true;
    /** Placeholder text for the search input. */
    searchPlaceholder = "Search";
    /** Label text for the “Select all” option. */
    selectAllLabel = "Select all";
    /** Label text for the “Expand all” action. */
    expandLabel = "Expand";
    /** Label text for the “Collapse all” action. */
    collapseLabel = "Collapse";
    /** ARIA label for the multi-select dropdown. */
    ariaMultiSelectLabel = "Multi-select dropdown";
    /** ID of element that labels the multi-select (aria-labelledby). */
    ariaMultiSelectLabelledBy = "";
    /** ID of element that describes the multi-select (aria-describedby). */
    ariaMultiSelectDescribedBy = "";
    /** ARIA label for the search input inside the dropdown. */
    ariaSearchLabel = "Search options";
    /** ARIA label for the “Clear all” button. */
    ariaClearLabel = "Clear all selections";
    /** ARIA label for the dropdown toggle button. */
    ariaToggleLabel = "Toggle dropdown";
    /** ARIA label for the “Select all options” control. */
    ariaSelectAllLabel = "Select all options";
    /** ARIA label for the “Expand all categories” control. */
    ariaExpandAllLabel = "Expand all categories";
    /** ARIA label for the “Collapse all categories” control. */
    ariaCollapseAllLabel = "Collapse all categories";
    internalError = false;
    persistentSelectedOptions = [];
    dropdownOpen = false;
    dropdownFlipped;
    searchTerm = "";
    /** Fired when an option is selected in the multi-select. */
    ifxSelect;
    /** Fired when the multi-select dropdown is opened. */
    ifxOpen;
    el;
    dropdownElement;
    internals;
    parseChildOptions() {
        const options = [];
        const childElements = Array.from(this.el.children);
        childElements.forEach((child, index) => {
            if (child.tagName === "IFX-MULTISELECT-OPTION") {
                const option = this.parseOptionElement(child, index);
                if (option) {
                    options.push(option);
                }
            }
        });
        return options;
    }
    parseOptionElement(element, index) {
        const value = element.getAttribute("value") || `option-${index}`;
        const selected = element.hasAttribute("selected");
        const disabled = element.hasAttribute("disabled");
        const indeterminate = element.hasAttribute("indeterminate");
        const option = {
            value,
            selected,
            disabled,
            indeterminate,
        };
        const nestedOptions = Array.from(element.children)
            .filter((child) => child.tagName === "IFX-MULTISELECT-OPTION")
            .map((child, childIndex) => this.parseOptionElement(child, childIndex))
            .filter((opt) => opt !== null);
        if (nestedOptions.length > 0) {
            option.children = nestedOptions;
        }
        return option;
    }
    loadInitialOptions() {
        this.internalError = this.error;
        const allOptions = this.parseChildOptions();
        const initiallySelected = this.collectSelectedOptions(allOptions);
        const initiallySelectedNotInState = initiallySelected.filter((init) => !this.persistentSelectedOptions.some((opt) => opt.value == init.value));
        this.persistentSelectedOptions = [
            ...this.persistentSelectedOptions,
            ...initiallySelectedNotInState,
        ];
    }
    collectSelectedOptions(options) {
        let selectedOptions = [];
        for (const option of options) {
            if (option.selected) {
                if (option.children && option.children.length > 0) {
                    selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));
                }
                else {
                    if (!selectedOptions.some((existingOption) => existingOption.value === option.value)) {
                        selectedOptions.push(option);
                    }
                }
            }
            else {
                if (option.children && option.children.length > 0) {
                    selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));
                }
            }
        }
        return selectedOptions;
    }
    collectLeafOptions(children) {
        let leafOptions = [];
        for (const child of children) {
            if (child.children && child.children.length > 0) {
                leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));
            }
            else {
                leafOptions.push(child);
            }
        }
        return leafOptions;
    }
    handleSearch = debounce((targetElement) => {
        const searchTerm = targetElement.value.toLowerCase();
        const isSearchActive = searchTerm !== "";
        this.searchTerm = searchTerm;
        const wrapper = this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");
        if (wrapper) {
            if (isSearchActive) {
                wrapper.classList.remove("active");
            }
            else {
                const searchField = this.el.shadowRoot.querySelector("ifx-search-field");
                const searchFieldHasFocus = searchField && searchField.matches(":focus-within");
                if (!searchFieldHasFocus) {
                    wrapper.classList.add("active");
                }
            }
        }
        const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
        if (optionsContainer) {
            if (isSearchActive) {
                optionsContainer.classList.add("has-search-filter");
            }
            else {
                optionsContainer.classList.remove("has-search-filter");
            }
        }
        requestAnimationFrame(() => {
            const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
            allOptions.forEach((option) => {
                const searchEvent = new CustomEvent("ifx-search-filter", {
                    detail: { searchTerm, isActive: isSearchActive },
                });
                option.dispatchEvent(searchEvent);
            });
            if (isSearchActive) {
                setTimeout(() => {
                    const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
                    let visibleCount = 0;
                    allOptions.forEach((option) => {
                        const style = window.getComputedStyle(option);
                        const rect = option.getBoundingClientRect();
                        if (style.display !== "none" &&
                            style.visibility !== "hidden" &&
                            style.opacity !== "0" &&
                            rect.height > 0) {
                            visibleCount++;
                        }
                    });
                    const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
                    if (optionsContainer) {
                        if (visibleCount === 0) {
                            optionsContainer.classList.add("show-no-results");
                        }
                        else {
                            optionsContainer.classList.remove("show-no-results");
                        }
                    }
                }, 200);
            }
            else {
                const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
                if (optionsContainer) {
                    optionsContainer.classList.remove("show-no-results");
                }
            }
        });
    }, 150);
    handleSearchFocus(hasFocus) {
        const wrapper = this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");
        if (wrapper) {
            if (hasFocus || this.searchTerm !== "") {
                wrapper.classList.remove("active");
            }
            else {
                wrapper.classList.add("active");
            }
        }
    }
    positionDropdown() {
        const wrapperRect = this.el.shadowRoot
            .querySelector(".ifx-multiselect-wrapper")
            ?.getBoundingClientRect();
        const spaceBelow = window.innerHeight - wrapperRect.bottom;
        const spaceAbove = wrapperRect.top;
        if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) ||
            wrapperRect.bottom > window.innerHeight) {
            this.dropdownFlipped = true;
        }
        else {
            this.dropdownFlipped = false;
        }
    }
    //private pendingSelectionUpdate = false;
    updateSlotBasedSelections(emitEvent = false) {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        const selectedLeafOptions = [];
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance && instance.selected && !instance.hasChildren) {
                selectedLeafOptions.push({
                    value: instance.value,
                    selected: true,
                    disabled: instance.disabled,
                    label: instance.getTextContent() || instance.value,
                });
            }
        });
        this.persistentSelectedOptions = selectedLeafOptions;
        if (emitEvent) {
            this.ifxSelect.emit(this.persistentSelectedOptions);
        }
    }
    updateInitialParentStates() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        const optionsByDepth = Array.from(allOptionElements)
            .map((el) => ({
            element: el,
            instance: el["__stencil_instance"],
            depth: parseInt(el.getAttribute("data-level") || "0"),
        }))
            .filter((item) => item.instance)
            .sort((a, b) => b.depth - a.depth);
        optionsByDepth.forEach(({ instance }) => {
            if (instance.hasChildren) {
                this.updateParentState(instance);
            }
        });
    }
    updateParentState(parentInstance) {
        const directChildren = Array.from(parentInstance.el.children)
            .filter((child) => child.tagName === "IFX-MULTISELECT-OPTION")
            .map((child) => child["__stencil_instance"])
            .filter((instance) => instance !== null);
        const selectedCount = directChildren.filter((child) => child.selected).length;
        const indeterminateCount = directChildren.filter((child) => child.indeterminate).length;
        const totalCount = directChildren.length;
        if (selectedCount === totalCount && indeterminateCount === 0) {
            parentInstance.selected = true;
            parentInstance.indeterminate = false;
        }
        else if (selectedCount === 0 && indeterminateCount === 0) {
            parentInstance.selected = false;
            parentInstance.indeterminate = false;
        }
        else {
            parentInstance.selected = false;
            parentInstance.indeterminate = true;
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-multiselect", await framework);
        }
        setTimeout(() => {
            this.positionDropdown();
        }, 500);
        this.el.addEventListener("ifx-option-changed", (event) => {
            const optionInstance = event.target?.__stencil_instance;
            if (optionInstance && !optionInstance.hasChildren) {
                this.updateSlotBasedSelections(true);
            }
        });
        setTimeout(() => {
            this.updateSlotBasedSelections(false);
            this.updateInitialParentStates();
        }, 100);
    }
    componentWillLoad() {
        this.loadInitialOptions();
    }
    updateInternalError() {
        this.internalError = this.error;
    }
    onSelectionChange(newValue, _) {
        const formData = new FormData();
        newValue.forEach((option) => formData.append(this.name, option.value));
        //this.internals.setFormValue(formData);
    }
    collapseAll() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance && instance.hasChildren) {
                instance.isExpanded = false;
            }
        });
    }
    expandAll() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance && instance.hasChildren) {
                instance.isExpanded = true;
            }
        });
    }
    selectAll() {
        this.resetSearch();
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance) {
                if (instance.hasChildren) {
                    instance.isExpanded = true;
                }
                else {
                    instance.selected = true;
                }
            }
        });
        setTimeout(() => {
            this.updateInitialParentStates();
            this.updateSlotBasedSelections(false);
            this.ifxSelect.emit(this.persistentSelectedOptions);
        }, 0);
    }
    /** Clears all selected options in the multi-select and resets their state. */
    async clearSelection() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance) {
                instance.selected = false;
                instance.indeterminate = false;
                if (instance.hasChildren) {
                    instance.isExpanded = false;
                }
            }
        });
        this.persistentSelectedOptions = [];
        setTimeout(() => {
            this.updateSlotBasedSelections(false);
            this.ifxSelect.emit(this.persistentSelectedOptions);
        }, 0);
    }
    handleDocumentClick = (event) => {
        const path = event.composedPath();
        if (!path.includes(this.dropdownElement)) {
            this.dropdownOpen = false;
            document.removeEventListener("click", this.handleDocumentClick);
            this.resetSearch();
            this.ifxOpen.emit(this.dropdownOpen);
        }
    };
    toggleDropdown() {
        this.dropdownOpen = !this.dropdownOpen;
        setTimeout(() => {
            if (this.dropdownOpen) {
                document.addEventListener("click", this.handleDocumentClick);
            }
            else {
                this.resetSearch();
            }
            this.ifxOpen.emit(this.dropdownOpen);
        }, 0);
    }
    resetSearch() {
        this.searchTerm = "";
        const searchField = this.el.shadowRoot.querySelector("ifx-search-field");
        if (searchField) {
            searchField.value = "";
        }
        const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
        if (optionsContainer) {
            optionsContainer.classList.remove("has-search-filter");
        }
        const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
        allOptions.forEach((option) => {
            const searchEvent = new CustomEvent("ifx-search-filter", {
                detail: { searchTerm: "", isActive: false },
            });
            option.dispatchEvent(searchEvent);
        });
    }
    handleWrapperClick(event) {
        this.positionDropdown();
        if (event.currentTarget === event.target) {
            this.toggleDropdown();
        }
    }
    handleKeyDown(event) {
        if (this.disabled)
            return;
        // If dropdown is closed, only allow opening
        if (!this.dropdownOpen) {
            switch (event.code) {
                case "Enter":
                case "Space":
                case "ArrowDown":
                    event.preventDefault();
                    this.toggleDropdown();
                    break;
            }
            return;
        }
        // Dropdown is open - handle navigation and controls
        switch (event.code) {
            case "Escape":
                event.preventDefault();
                this.toggleDropdown();
                break;
            case "Enter":
            case "Space": {
                // Don't close dropdown when pressing space/enter in controls area
                const target = event.target;
                if (!target.closest(".ifx-multiselect-dropdown-functions")) {
                    event.preventDefault();
                    this.toggleDropdown();
                }
                break;
            }
            case "ArrowDown":
            case "ArrowUp":
                // Focus first/last option for navigation
                event.preventDefault();
                this.focusFirstOption();
                break;
        }
    }
    focusFirstOption() {
        const firstOption = this.el.querySelector("ifx-multiselect-option:not(.search-hidden)");
        if (firstOption) {
            const labelElement = firstOption.shadowRoot?.querySelector(".option-label");
            labelElement?.focus();
        }
    }
    renderSelectAll() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        const leafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren);
        const selectedLeafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren && el.selected);
        const allSelected = leafOptions.length > 0 &&
            selectedLeafOptions.length === leafOptions.length;
        const toggleSelectAll = (event) => {
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }
            if (allSelected) {
                this.clearSelection();
            }
            else {
                this.selectAll();
            }
        };
        return (h("div", { class: "select-all-wrapper" }, h("ifx-checkbox", { id: "selectAll", checked: allSelected, size: "s", "aria-label": this.ariaSelectAllLabel, onClick: toggleSelectAll, onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    e.stopPropagation();
                    toggleSelectAll(e);
                }
            } }, this.selectAllLabel)));
    }
    renderNoResultsMessage() {
        return (h("div", { class: "ifx-multiselect-no-results" }, h("div", { class: "no-results-content" }, h("span", { class: "no-results-text" }, this.noResultsMessage))));
    }
    render() {
        const selectedOptionsLabels = this.persistentSelectedOptions
            .map((option) => option.label || option.value)
            .join(", ");
        const hasSelections = this.persistentSelectedOptions.length > 0;
        let isFlatMultiselect = false;
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        if (allOptionElements.length > 0) {
            isFlatMultiselect = Array.from(allOptionElements).every((option) => option.children.length === 0);
        }
        return (h("div", { key: '258172a344ea0f479359a4e80e022b7b81950a28', class: `ifx-multiselect-container ${this.disabled && !this.error ? "disabled" : ""}`, ref: (el) => (this.dropdownElement = el) }, h("div", { key: '065b087c09f6424a063895639adc82cf72ae00c7', class: "ifx-label-wrapper" }, this.label && (h("span", { key: '6db8e6ff79607bbce9cad49ba50ff61e60173317', class: "wrapper-label" }, h("span", { key: '6486a0337b0837a36b8499797a95201f19937aff' }, this.label), this.required && (h("span", { key: 'fb41ec49e8d68edaf5be051d7267682a2d6a1d72', class: `required ${this.error ? "error" : ""}` }, "*"))))), h("div", { key: '5b8b27c51ea2796e5084e857bc4a88ca8bee4cb6', class: `ifx-multiselect-wrapper
        ${this.dropdownOpen ? "active" : ""}
        ${this.dropdownFlipped ? "is-flipped" : ""}
        ${this.internalError ? "error" : ""}
        ${this.disabled && !this.error ? "disabled" : ""}`, role: "combobox", "aria-label": this.ariaMultiSelectLabel, "aria-labelledby": this.ariaMultiSelectLabelledBy || undefined, "aria-describedby": this.ariaMultiSelectDescribedBy || undefined, "aria-expanded": this.dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": this.disabled && !this.error, tabindex: "0", onClick: this.disabled && !this.error
                ? undefined
                : (event) => this.handleWrapperClick(event), onKeyDown: this.disabled && !this.error
                ? undefined
                : (event) => this.handleKeyDown(event) }, h("div", { key: 'b5b25b24a5387e41c6d2a356a244ed59d17a831b', class: `ifx-multiselect-input
          ${hasSelections ? "" : "placeholder"}
          `, onClick: this.disabled && !this.error
                ? undefined
                : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { key: '28e3221cab012596cca71bf8a96d56f6a6847646', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch ||
            this.showSelectAll ||
            (this.showExpandCollapse && !isFlatMultiselect)) && (h("div", { key: '605a29e48e377cdf822739a3e8216d18eff3aa25', class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (h("div", { key: 'd46691fc65127d8a8d8907e5eabec749dc4f9223', class: "ifx-multiselect-dropdown-search" }, h("ifx-search-field", { key: '575aabf48bef795dc904e80df3863a88b1a1a5ee', class: "search-input", placeholder: this.searchPlaceholder, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => {
                e.stopPropagation();
            }, onIfxInput: (event) => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), h("div", { key: '0fe64dabead2ca09367ec1ec4649cafc8fe962b1', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (h("div", { key: '4dda66112d1143d41369ce5b5254e6b55e5a0da1', class: "expand-collapse-controls" }, h("span", { key: 'd056ba7de28cd23647e22a09d186d140e62a7068', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaExpandAllLabel, onClick: (e) => {
                e.stopPropagation();
                this.expandAll();
            }, onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    e.stopPropagation();
                    this.expandAll();
                }
            } }, this.expandLabel), h("span", { key: 'e428c124e2af4bd345df91baf214975bf1a00020', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaCollapseAllLabel, onClick: (e) => {
                e.stopPropagation();
                this.collapseAll();
            }, onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    e.stopPropagation();
                    this.collapseAll();
                }
            } }, this.collapseLabel)))))), h("div", { key: '1cbb77f9e0db92b454c9f348c879286e180c5985', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, h("slot", { key: '01790a65dab978803dca0212ae5fa936dd7cb403' }), this.searchTerm &&
            this.showNoResultsMessage &&
            this.renderNoResultsMessage()))), h("div", { key: '4fa9a945adb9d5a2cb9e575ced107ac4d8ece901', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { key: '3081c9f3d7443f1b8f9edafbba75eaffad01d8f2', class: `ifx-clear-button ${!this.showClearButton ? "hide" : ""}`, onClick: this.disabled && !this.error
                ? undefined
                : () => this.clearSelection() }, h("ifx-icon", { key: '81c968b7bf53074ca75ef01b7adfdb19d6a9c2f6', icon: "cRemove16" }))), h("div", { key: '9884607133d21512838d9201f56378c553874dc8', class: "icon-wrapper-up", onClick: this.disabled && !this.error
                ? undefined
                : () => this.toggleDropdown() }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: '0aa8cf362ad2b6f538e9c518492ef180e6d982d4', class: "icon-wrapper-down", onClick: this.disabled && !this.error
                ? undefined
                : () => this.toggleDropdown() }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && (h("div", { key: '44db8cc1faf7d99fec44deae0c83e737730abbf8', class: `multi__select-caption ${this.error ? "error" : ""} ${this.disabled && !this.error ? "disabled" : ""}` }, this.caption))));
    }
    static get is() { return "ifx-multiselect"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["multiselect.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["multiselect.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name of the multi-select field (used in forms)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, the multi-select is disabled and not interactive."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether at least one option must be selected."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows the multi-select in an error state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            },
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Helper text shown below the multi-select."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption",
                "defaultValue": "\"\""
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label shown above the multi-select."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "\"\""
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text shown when nothing is selected."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "\"\""
            },
            "showSearch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows a search box inside the dropdown."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-search",
                "defaultValue": "true"
            },
            "showSelectAll": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows a \u201CSelect all\u201D option."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-select-all",
                "defaultValue": "true"
            },
            "showClearButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows a button to clear all selections."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-clear-button",
                "defaultValue": "true"
            },
            "showExpandCollapse": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows expand/collapse controls for nested options."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-expand-collapse",
                "defaultValue": "true"
            },
            "noResultsMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Message shown when no search results are found."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-results-message",
                "defaultValue": "\"No results found.\""
            },
            "showNoResultsMessage": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, displays the \u201Cno results\u201D message when nothing matches."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-no-results-message",
                "defaultValue": "true"
            },
            "searchPlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text for the search input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "search-placeholder",
                "defaultValue": "\"Search\""
            },
            "selectAllLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text for the \u201CSelect all\u201D option."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "select-all-label",
                "defaultValue": "\"Select all\""
            },
            "expandLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text for the \u201CExpand all\u201D action."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expand-label",
                "defaultValue": "\"Expand\""
            },
            "collapseLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text for the \u201CCollapse all\u201D action."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "collapse-label",
                "defaultValue": "\"Collapse\""
            },
            "ariaMultiSelectLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the multi-select dropdown."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-multi-select-label",
                "defaultValue": "\"Multi-select dropdown\""
            },
            "ariaMultiSelectLabelledBy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ID of element that labels the multi-select (aria-labelledby)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-multi-select-labelled-by",
                "defaultValue": "\"\""
            },
            "ariaMultiSelectDescribedBy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ID of element that describes the multi-select (aria-describedby)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-multi-select-described-by",
                "defaultValue": "\"\""
            },
            "ariaSearchLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the search input inside the dropdown."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-search-label",
                "defaultValue": "\"Search options\""
            },
            "ariaClearLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the \u201CClear all\u201D button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-clear-label",
                "defaultValue": "\"Clear all selections\""
            },
            "ariaToggleLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the dropdown toggle button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-toggle-label",
                "defaultValue": "\"Toggle dropdown\""
            },
            "ariaSelectAllLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the \u201CSelect all options\u201D control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-select-all-label",
                "defaultValue": "\"Select all options\""
            },
            "ariaExpandAllLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the \u201CExpand all categories\u201D control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-expand-all-label",
                "defaultValue": "\"Expand all categories\""
            },
            "ariaCollapseAllLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ARIA label for the \u201CCollapse all categories\u201D control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-collapse-all-label",
                "defaultValue": "\"Collapse all categories\""
            }
        };
    }
    static get states() {
        return {
            "internalError": {},
            "persistentSelectedOptions": {},
            "dropdownOpen": {},
            "dropdownFlipped": {},
            "searchTerm": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxSelect",
                "name": "ifxSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when an option is selected in the multi-select."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "ifxOpen",
                "name": "ifxOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the multi-select dropdown is opened."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "clearSelection": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Clears all selected options in the multi-select and resets their state.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "error",
                "methodName": "updateInternalError"
            }, {
                "propName": "persistentSelectedOptions",
                "methodName": "onSelectionChange"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
