import { h } from "@stencil/core";
import { trackComponent } from "../../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../../global/utils/dom-utils";
import { detectFramework } from "../../../global/utils/framework-detection";
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 {
    constructor() {
        this.disabled = false;
        this.required = false;
        this.error = false;
        this.caption = '';
        this.label = '';
        this.placeholder = '';
        this.showSearch = true;
        this.showSelectAll = true;
        this.showClearButton = true;
        this.showExpandCollapse = true;
        this.noResultsMessage = 'No results found.';
        this.showNoResultsMessage = true;
        this.searchPlaceholder = 'Search';
        this.selectAllLabel = 'Select all';
        this.expandLabel = 'Expand';
        this.collapseLabel = 'Collapse';
        this.ariaMultiSelectLabel = 'Multi-select dropdown';
        this.ariaMultiSelectLabelledBy = '';
        this.ariaMultiSelectDescribedBy = '';
        this.ariaSearchLabel = 'Search options';
        this.ariaClearLabel = 'Clear all selections';
        this.ariaToggleLabel = 'Toggle dropdown';
        this.ariaSelectAllLabel = 'Select all options';
        this.ariaExpandAllLabel = 'Expand all categories';
        this.ariaCollapseAllLabel = 'Collapse all categories';
        this.internalError = false;
        this.persistentSelectedOptions = [];
        this.dropdownOpen = false;
        this.searchTerm = '';
        this.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);
        this.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);
            }
        };
    }
    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;
    }
    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() {
        var _a;
        const wrapperRect = (_a = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')) === null || _a === void 0 ? void 0 : _a.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) => {
            var _a;
            const optionInstance = (_a = event.target) === null || _a === void 0 ? void 0 : _a.__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);
    }
    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);
    }
    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() {
        var _a;
        const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');
        if (firstOption) {
            const labelElement = (_a = firstOption.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.option-label');
            labelElement === null || labelElement === void 0 ? void 0 : 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: 'fd7ce64694f743334f1c4577105d9c40f084ebbf', class: `ifx-multiselect-container ${this.disabled && !this.error ? 'disabled' : ''}`, ref: el => (this.dropdownElement = el) }, h("div", { key: '81abefbfc60b69bcd9c7e9b909dae93fd1767773', class: "ifx-label-wrapper" }, this.label && (h("span", { key: '6de06dac0828d7831519e3c92b68095e533ae375', class: "wrapper-label" }, h("span", { key: 'ed9c68a25201321d0d69444e88d60d68db24e330' }, this.label), this.required && h("span", { key: '070422e2ebb9cb47fb21dcee37229b70016c0da1', class: `required ${this.error ? 'error' : ''}` }, "*")))), h("div", { key: '3b5d28e2c87f472e68f1a8293daa9d5246d170b2', 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: '1d5e621056168b08004c8efb998ff25865da2239', class: `ifx-multiselect-input
          ${hasSelections ? '' : 'placeholder'}
          `, onClick: this.disabled && !this.error ? undefined : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { key: '88762a0e7d11feb2fba793f3d4dc7fc183c161e9', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (h("div", { key: 'f47c4fd519f502997c2c8ac3611f914e628a465b', class: "ifx-multiselect-dropdown-functions", onClick: e => e.stopPropagation() }, this.showSearch && (h("div", { key: '6d34c960d1dba9eca8bf4e1c89377d736c590b20', class: "ifx-multiselect-dropdown-search" }, h("ifx-search-field", { key: '37bc73b76fb6011f64566aa3ffc4b01056a0ac1b', 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: 'd7a0b92d7532aa2290e253172359c694a83d92e9', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (h("div", { key: 'c509eb6f7b77507cf3c1207f1e912130b722f84e', class: "expand-collapse-controls" }, h("span", { key: '912ffe8e593e4e0f81cff8ad03e72139b492c23f', 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: 'e7201dfca2b2e16469778ffd922b4c64f3d06619', 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: '031e2384922144e63b528ac69a8ad1bea1420acf', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, h("slot", { key: 'b5e77631b05852b7f708b92f2cdd797b7cb653a2' }), this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()))), h("div", { key: '5a813087f59df7ab9dca060d5c80d158bc8d6da1', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { key: '0ae8b58fa2d2ccf28962264bfaa8949114f5767d', class: `ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`, onClick: this.disabled && !this.error ? undefined : () => this.clearSelection() }, h("ifx-icon", { key: '8e60813fa135b67a28ba5759c37fb000641af257', icon: "cRemove16" }))), h("div", { key: 'f71cc3fa883c5af46d24048320bdf822c8ceeb99', 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: 'fb08f6a16daebfc6e0a58fcb24e5cfdffd80b423', 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: '4bd2795e4eb8539f8609bf83065f2637f2f1dc1b', 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",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "attribute": "required",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "attribute": "error",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "caption": {
                "type": "string",
                "attribute": "caption",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "placeholder": {
                "type": "string",
                "attribute": "placeholder",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "showSearch": {
                "type": "boolean",
                "attribute": "show-search",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "showSelectAll": {
                "type": "boolean",
                "attribute": "show-select-all",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "showClearButton": {
                "type": "boolean",
                "attribute": "show-clear-button",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "showExpandCollapse": {
                "type": "boolean",
                "attribute": "show-expand-collapse",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "noResultsMessage": {
                "type": "string",
                "attribute": "no-results-message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'No results found.'"
            },
            "showNoResultsMessage": {
                "type": "boolean",
                "attribute": "show-no-results-message",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "searchPlaceholder": {
                "type": "string",
                "attribute": "search-placeholder",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Search'"
            },
            "selectAllLabel": {
                "type": "string",
                "attribute": "select-all-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Select all'"
            },
            "expandLabel": {
                "type": "string",
                "attribute": "expand-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Expand'"
            },
            "collapseLabel": {
                "type": "string",
                "attribute": "collapse-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Collapse'"
            },
            "ariaMultiSelectLabel": {
                "type": "string",
                "attribute": "aria-multi-select-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Multi-select dropdown'"
            },
            "ariaMultiSelectLabelledBy": {
                "type": "string",
                "attribute": "aria-multi-select-labelled-by",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "ariaMultiSelectDescribedBy": {
                "type": "string",
                "attribute": "aria-multi-select-described-by",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "ariaSearchLabel": {
                "type": "string",
                "attribute": "aria-search-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Search options'"
            },
            "ariaClearLabel": {
                "type": "string",
                "attribute": "aria-clear-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Clear all selections'"
            },
            "ariaToggleLabel": {
                "type": "string",
                "attribute": "aria-toggle-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Toggle dropdown'"
            },
            "ariaSelectAllLabel": {
                "type": "string",
                "attribute": "aria-select-all-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Select all options'"
            },
            "ariaExpandAllLabel": {
                "type": "string",
                "attribute": "aria-expand-all-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Expand all categories'"
            },
            "ariaCollapseAllLabel": {
                "type": "string",
                "attribute": "aria-collapse-all-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "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": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "ifxOpen",
                "name": "ifxOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "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": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "error",
                "methodName": "updateInternalError"
            }, {
                "propName": "persistentSelectedOptions",
                "methodName": "onSelectionChange"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
//# sourceMappingURL=multiselect.js.map
