@nova-design-system/nova-webcomponents 3.0.0-beta.34 → 3.0.0-beta.35

package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js

@@ -0,0 +1,1651 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot content - The content of the list.
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFieldmultiselect {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = uuidv4();
+        /**
+         * Defines the maximum height of the multiselect list when open.
+         */
+        this.maxHeight = '200px';
+        /**
+         * Text for the badge showing the number of selected items.
+         */
+        this.badgeLabel = '';
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyresult = 'No results found';
+        /**
+         * Marks the input field as required.
+         */
+        this.required = false;
+        /**
+         * Alters the input field's appearance to indicate an error.
+         */
+        this.error = false;
+        /**
+         * Display the input field's content without allowing users to change it.
+         */
+        this.readonly = false;
+        /**
+         * Disables the input field.
+         */
+        this.disabled = false;
+        /**
+         * The autocomplete prop for faster input filling.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Enables or disables the filtering feature for the multiselect items.
+         */
+        this.filterable = false;
+        /**
+         * State of the multiselect popover.
+         */
+        this.open = false;
+        /**
+         * Options configuration for the multiselect items.
+         */
+        this.parsedOptions = [];
+        /**
+         * List of selected values in the multiselect.
+         */
+        this.selectedValues = [];
+        /**
+         * Sorted options for display.
+         */
+        this.sortedOptions = [];
+        /**
+         * The text entered by the user for filtering multiselect items.
+         */
+        this.filterText = '';
+        /**
+         * Determines whether the multiselect is filterable.
+         */
+        this.isFilterable = this.filterable;
+        /**
+         * Delay in milliseconds before the search is triggered when typing in the filter input.
+         * @default 300
+         */
+        this.debounceDelay = 300;
+        /**
+         * State for the mode of the multiselect.
+         * @type {'options' | 'slots'}
+         * @default 'options'
+         */
+        this.modeState = 'options'; // Default value
+        this.isHandlingEscape = false;
+        /**x
+         * Handle badge close for options mode.
+         */
+        this.handleBadgeCloseOptions = () => {
+            this.selectedValues = [];
+            this.multiselectChange.emit(this.selectedValues);
+            // Uncheck all elements
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.checked = false;
+                item.style.display = '';
+            });
+            // Reorder options without the divider since there are no selected elements
+            this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);
+            // Reorder options without the divider since there are no selected elements
+            this.reorderOptionsContent();
+        };
+        /**
+         * Handle badge close for slots mode.
+         */
+        this.handleBadgeCloseSlots = () => {
+            this.selectedValues = [];
+            this.multiselectChange.emit(this.selectedValues);
+            // Uncheck all elements
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.checked = false;
+                item.style.display = '';
+            });
+            // Reorder slot content
+            this.reorderSlotContent();
+        };
+        /**
+         * Handle popover close
+         */
+        this.handlePopoverClose = () => {
+            // If we are handling Escape, ignore this event
+            if (this.isHandlingEscape) {
+                return;
+            }
+            this.open = false;
+            this.filterText = '';
+            // Only reorder based on the mode
+            if (this.modeState === 'options') {
+                this.reorderOptionsContent();
+            }
+            else {
+                this.reorderSlotContent();
+            }
+            // Reset filter if needed
+            if (this.filterable) {
+                this.resetFilter();
+            }
+        };
+        /**
+         * Handle input blur for options mode.
+         */
+        this.handleInputBlurOptions = () => {
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    // Close the popover without affecting the divider
+                    this.open = false;
+                    this.popoverElement.hide();
+                    // Reset filter if needed
+                    if (this.filterable) {
+                        this.filterText = '';
+                        this.resetFilter();
+                    }
+                }
+            }, 150);
+        };
+        /**
+         * Handle click on the input container for options mode.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClickOptions = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle click on the input container for slots mode.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClickSlots = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle input change for options mode.
+         * @param {Event} event - The input event.
+         */
+        this.handleInputOptions = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(this.value);
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterItemsOption();
+            }, this.debounceDelay);
+        };
+        /**
+         * Handle input change for slots mode
+         * @param {Event} event - The input event.
+         */
+        this.handleInputSlots = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly)
+                return;
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(this.value);
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterSlotsItems();
+            }, this.debounceDelay);
+        };
+        /**
+         * Handle input focus for options mode.
+         */
+        this.handleInputFocusOptions = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = true;
+        };
+        /**
+         * Handle input focus for slots mode.
+         */
+        this.handleInputFocusSlots = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = true;
+        };
+        /**
+         * Handle input blur for slots mode.
+         */
+        this.handleInputBlurSlots = () => {
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    // Fermer le popover sans affecter le divider
+                    this.open = false;
+                    this.popoverElement.hide();
+                    // Reset filter if needed
+                    if (this.filterable) {
+                        this.filterText = '';
+                        this.resetFilter();
+                    }
+                }
+            }, 150);
+        };
+        /**
+         * Toggle the multiselect popover for options mode.
+         */
+        this.togglePopoverOptions = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (this.open) {
+                this.handlePopoverClose();
+            }
+            else {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+        };
+        /**
+         * Toggle the multiselect popover for slots mode.
+         */
+        this.togglePopoverSlots = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (this.open) {
+                this.handlePopoverClose();
+            }
+            else {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Subscribe to click outside event.
+     */
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+    }
+    /**
+     * Set the mode state and handle options change.
+     */
+    componentWillLoad() {
+        this.modeState = this.mode;
+        // Don't call handleOptionsChange if we are in slots mode
+        if (this.modeState === 'options') {
+            this.handleOptionsChange(this.options);
+        }
+        // Add the listener for the hide event
+        requestAnimationFrame(() => {
+            if (this.popoverElement) {
+                this.popoverElement.addEventListener('hide', () => {
+                    this.handlePopoverClose();
+                });
+            }
+        });
+        // Specific initialization for slots mode
+        if (this.modeState === 'slots') {
+            Promise.resolve().then(() => {
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                // Initialize selectedValues with checked items
+                this.selectedValues = items
+                    .filter(item => item.hasAttribute('checked'))
+                    .map(item => item.getAttribute('value') || '');
+                // Force a reorder after initialization
+                requestAnimationFrame(() => {
+                    this.reorderSlotContent();
+                });
+            });
+        }
+        // Initialize the sorted options array with the parsed options for initial rendering
+        if (this.modeState === 'options') {
+            this.sortedOptions = [...this.parsedOptions];
+        }
+        // Apply filtering if the multiselect is filterable and there is a value
+        if (this.filterable && this.value) {
+            this.filterText = String(this.value).toLocaleLowerCase();
+            this.filterItems();
+        }
+        else {
+            // Reset visibility state of all dropdown items
+            this.resetFilter();
+        }
+    }
+    /**
+     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
+     */
+    componentDidLoad() {
+        if (this.modeState === 'options') {
+            requestAnimationFrame(() => {
+                this.reorderOptionsContent();
+            });
+        }
+    }
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+        // Remove the listener for the hide event
+        if (this.popoverElement) {
+            this.popoverElement.removeEventListener('hide', () => {
+                this.handlePopoverClose();
+            });
+        }
+    }
+    /**
+     * Emitted when the input loses focus.
+     * @param {CustomEvent<boolean>} event - The event object containing the focus state.
+     */
+    handleOpenChanged(event) {
+        // Update the open state of popover
+        this.open = event.detail;
+        if (this.open) {
+            if (this.filterText) {
+                this.filterItems();
+            }
+        }
+        else if (this.modeState === 'options') {
+            this.reorderOptionsContent();
+        }
+        else {
+            this.reorderSlotContent();
+        }
+    }
+    /**
+     * Listen for the `itemChecked` event emitted by child items.
+     * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.
+     */
+    handleItemChecked(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const { value, checked } = event.detail;
+        if (value !== undefined && value !== null) {
+            const newSelectedValues = [...this.selectedValues];
+            const valueIndex = newSelectedValues.indexOf(value);
+            if (checked && valueIndex === -1) {
+                newSelectedValues.push(value);
+            }
+            else if (!checked && valueIndex > -1) {
+                newSelectedValues.splice(valueIndex, 1);
+            }
+            // Update the state and emit the event only if the selection has changed
+            if (JSON.stringify(this.selectedValues) !==
+                JSON.stringify(newSelectedValues)) {
+                this.selectedValues = newSelectedValues;
+                // Use requestAnimationFrame to ensure the state is updated before emitting the event
+                requestAnimationFrame(() => {
+                    this.multiselectChange.emit(this.selectedValues);
+                });
+            }
+        }
+        else {
+            console.warn('Received itemChecked event with undefined or null value'); // Warning log
+        }
+    }
+    /**
+     * Emitted when the options change.
+     * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
+     */
+    handleOptionsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                const parsedOpts = JSON.parse(newValue);
+                this.selectedValues = parsedOpts
+                    .filter(option => option.checked)
+                    .map(option => option.value);
+                this.parsedOptions = [...parsedOpts];
+            }
+            catch (error) {
+                console.error('Error parsing options:', error);
+                this.parsedOptions = [];
+            }
+        }
+        else if (Array.isArray(newValue)) {
+            this.selectedValues = newValue
+                .filter(option => option.checked)
+                .map(option => option.value);
+            this.parsedOptions = [...newValue];
+        }
+        else {
+            this.parsedOptions = [];
+        }
+        // Wait for the options to be fully loaded
+        Promise.resolve().then(() => {
+            requestAnimationFrame(() => {
+                if (this.modeState === 'options') {
+                    this.reorderOptionsContent();
+                }
+            });
+        });
+    }
+    /**
+     * Emitted when the value changes.
+     */
+    watchValueHandler() {
+        // Handle value change and update the corresponding multiselect item if it exists
+        this.setInitialSelection();
+    }
+    /**
+     * Emitted when the filterable property changes.
+     * @param {boolean} newValue - The new value of the filterable property.
+     */
+    watchFilterableHandler(newValue) {
+        this.isFilterable = newValue;
+        this.filterable = newValue;
+    }
+    // Add a listener for the slot content
+    handleSlotChange(event) {
+        // Check: we only want to reorder if it's the "content" slot
+        const slot = event.target;
+        if (slot && slot.name === 'content') {
+            // To give other platforms (VueJS, React, etc.) time to insert all their items,
+            // we place the reorder in a requestAnimationFrame
+            requestAnimationFrame(() => {
+                this.reorderSlotContent();
+            });
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
+     */
+    async getFilterText() {
+        return this.filterText;
+    }
+    /**
+     * Set the initial selection based on the current value and update the inputElement value.
+     */
+    setInitialSelection() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        const selectedItem = items.find(item => {
+            var _a;
+            return item.getAttribute('label') === this.value ||
+                item.getAttribute('value') === this.value ||
+                ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
+        });
+        // Remove 'selected' from all items first to reset the state
+        items.forEach(item => {
+            item.removeAttribute('selected');
+            item.classList.remove('selected');
+        });
+        if (selectedItem) {
+            // Add the `selected` attribute and `selected` class for visual styling
+            selectedItem.setAttribute('selected', 'true');
+            selectedItem.classList.add('selected');
+            // Update the value and inputElement value to reflect the pre-selected item
+            this.value =
+                selectedItem.getAttribute('label') ||
+                    selectedItem.getAttribute('value') ||
+                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                    '';
+            if (this.inputElement) {
+                this.inputElement.value = this.value;
+            }
+        }
+    }
+    /**
+     * Reset the filter and make all items visible.
+     */
+    async resetFilter() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Reset visibility state of all dropdown items
+        items.forEach(item => {
+            item.style.display = '';
+        });
+        // Clean up filter-related UI elements
+        const ul = this.el.querySelector('ul');
+        if (ul) {
+            const emptyMessage = ul.querySelector('[data-empty]');
+            if (emptyMessage)
+                emptyMessage.remove();
+            // Reorder with divider if needed
+            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            if (selectedItems.length > 0) {
+                this.manageDivider(ul, selectedItems, unselectedItems);
+            }
+        }
+    }
+    /**
+     * Returns the list of selected values.
+     * @returns {string[]} The selected values.
+     */
+    async getSelectedValues() {
+        return this.selectedValues;
+    }
+    /**
+     * Reorder the content of the slot.
+     */
+    reorderSlotContent() {
+        if (this.modeState === 'options')
+            return;
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove all existing <hr class="multiselect-divider">
+        ul.querySelectorAll('hr.multiselect-divider').forEach(divider => divider.remove());
+        // Retrieve all items (not hidden)
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
+        // If you possibly have a "No results" message:
+        const hasEmptyMessage = ul.querySelector('[data-empty]');
+        if (hasEmptyMessage) {
+            // if there is a "No results found" message, do not reorder
+            return;
+        }
+        // Separate checked vs unchecked
+        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Reinsert CHECKED items FIRST
+        // appendChild() moves the element without recreating it
+        // this is not trigger a re-rendering of the component in the platforms
+        selectedItems.forEach(item => {
+            ul.appendChild(item); // <-- The <li> (or <nv-fielddropdownitemcheck>) is just "moved" to the end of the list
+        });
+        // Add a divider if needed
+        if (selectedItems.length > 0 && unselectedItems.length > 0) {
+            const divider = document.createElement('hr');
+            divider.className = 'multiselect-divider';
+            ul.appendChild(divider);
+        }
+        // Reinsert UNCHECKED items at the end
+        unselectedItems.forEach(item => {
+            ul.appendChild(item);
+        });
+    }
+    /**
+     * Reorder the content for options mode with async handling
+     */
+    reorderOptionsContent() {
+        const ul = this.el.querySelector('ul[role="content"]');
+        if (!ul)
+            return;
+        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
+        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Reorder the elements
+        selectedItems.forEach(item => ul.appendChild(item));
+        unselectedItems.forEach(item => ul.appendChild(item));
+        // Manage the divider after the reordering
+        this.manageDivider(ul, selectedItems, unselectedItems);
+    }
+    /**
+     * Filter multiselect items based on the text entered by the user.
+     */
+    filterItems() {
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        if (!this.filterText.trim()) {
+            if (this.parsedOptions && this.parsedOptions.length > 0) {
+                // Reset options display
+                const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+                items.forEach(item => {
+                    item.style.display = '';
+                });
+            }
+            else {
+                // Reset slot items display
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                items.forEach(item => {
+                    item.style.display = '';
+                });
+            }
+            // Reorder with divider
+            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            this.manageDivider(ul, selectedItems, unselectedItems);
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        if (this.parsedOptions && this.parsedOptions.length > 0) {
+            // Filter options mode
+            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
+                if (option && !option.isDivider) {
+                    const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
+                        this.normalizeText(option.value).includes(normalizedFilter);
+                    item.style.display = matchesFilter ? '' : 'none';
+                    if (matchesFilter)
+                        hasVisibleItems = true;
+                }
+            });
+            // Manage the divider with the visible items
+            const visibleItems = items.filter(item => item.style.display !== 'none');
+            const visibleSelected = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const visibleUnselected = visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            this.manageDivider(ul, visibleSelected, visibleUnselected);
+        }
+        else {
+            // Filter slot items mode
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                const label = item.getAttribute('label') || '';
+                const value = item.getAttribute('value') || '';
+                const textContent = item.textContent || '';
+                const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                    this.normalizeText(value).includes(normalizedFilter) ||
+                    this.normalizeText(textContent).includes(normalizedFilter);
+                item.style.display = matchesFilter ? '' : 'none';
+                if (matchesFilter)
+                    hasVisibleItems = true;
+            });
+        }
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+        this.reorderSlotContent();
+    }
+    /**
+     * Filter multiselect items in options mode.
+     */
+    filterItemsOption() {
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Reset items if the filter text is empty
+        if (!this.filterText.trim()) {
+            // Remove the empty message if it exists
+            this.removeEmptyMessageOption(ul);
+            items.forEach(item => (item.style.display = ''));
+            this.reorderOptionsContent(); // Reorder after reset
+            return;
+        }
+        // Filter the items
+        items.forEach(item => {
+            const label = item.getAttribute('label') || '';
+            const value = item.getAttribute('value') || '';
+            const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                this.normalizeText(value).includes(normalizedFilter);
+            item.style.display = matchesFilter ? '' : 'none';
+            if (matchesFilter)
+                hasVisibleItems = true;
+        });
+        // Manage the divider with the visible items
+        const visibleItems = items.filter(item => item.style.display !== 'none');
+        const visibleSelected = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const visibleUnselected = visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        this.manageDivider(ul, visibleSelected, visibleUnselected);
+        // Add or remove the empty message based on the case
+        if (!hasVisibleItems) {
+            this.addEmptyMessageOption(ul);
+        }
+        else {
+            this.removeEmptyMessageOption(ul);
+        }
+    }
+    /**
+     * Filter multiselect items in slots mode
+     */
+    filterSlotsItems() {
+        if (this.modeState === 'options')
+            return;
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        // If filter text is empty, reset all items visibility
+        if (!this.filterText.trim()) {
+            this.resetFilter();
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        // Get all items and preserve them in the DOM
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Instead of removing/reordering, just hide/show items
+        items.forEach(item => {
+            var _a;
+            const label = item.getAttribute('label') || '';
+            const value = item.getAttribute('value') || '';
+            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                this.normalizeText(value).includes(normalizedFilter) ||
+                this.normalizeText(textContent).includes(normalizedFilter);
+            item.style.display = matchesFilter ? '' : 'none';
+            if (matchesFilter)
+                hasVisibleItems = true;
+        });
+        // Get visible items after filtering
+        const visibleItems = items.filter(item => item.style.display !== 'none');
+        const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        this.manageDivider(ul, visibleSelectedItems, visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || '')));
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+    }
+    /**
+     * Normalizes text by removing accents and converting to lowercase
+     * @param {string} text - The text to normalize
+     * @returns {string} The normalized text
+     *
+     * @example
+     * normalizeText("Café Latte") => "cafe latte"
+     *
+     * @description
+     * This function performs text normalization in three steps:
+     * 1. Decomposes characters into their base form and combining characters (NFD)
+     * 2. Removes all diacritical marks (accents, umlauts, etc.)
+     * 3. Converts to lowercase and trims whitespace
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()
+     * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms
+     */
+    normalizeText(text) {
+        return text
+            .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)
+            .replace(/[\u0300-\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)
+            .toLowerCase() // Convert to lowercase
+            .trim(); // Remove leading and trailing whitespace
+    }
+    /**
+     * Handle click outside the component.
+     * @param {MouseEvent} event - The click event.
+     */
+    handleClickOutside(event) {
+        if (this.el.contains(event.target) ||
+            (this.inputElement && this.inputElement.contains(event.target))) {
+            return;
+        }
+        // Use handlePopoverClose for all cases
+        this.handlePopoverClose();
+    }
+    /**
+     * Handle keyboard events & arrow key navigation.
+     * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
+     * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    async handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                this.popoverElement.show();
+                // Focus on the first item if the list is not filterable
+                if (!this.filterable) {
+                    requestAnimationFrame(() => {
+                        this.focusFirstItem();
+                    });
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));
+        if (items.length === 0) {
+            console.warn('No visible items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex =
+                currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex =
+                currentIndex === -1
+                    ? items.length - 1
+                    : (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            const selectedItem = items[currentIndex];
+            // Toggle the checked state
+            const isCurrentlyChecked = selectedItem.hasAttribute('checked');
+            selectedItem.checked = !isCurrentlyChecked;
+            // Trigger a click event to ensure proper event handling
+            selectedItem.dispatchEvent(new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true,
+            }));
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation(); // Prevent the event from propagating to the popover
+            // Do the reorder and wait a bit before closing
+            const handleEscape = async () => {
+                this.isHandlingEscape = true; // Disable the hide listener
+                if (this.modeState === 'options') {
+                    this.reorderOptionsContent();
+                }
+                else {
+                    this.reorderSlotContent();
+                }
+                // Wait for the reorder to be applied
+                await new Promise(resolve => setTimeout(resolve, 100));
+                // Reactivate the hide listener after a short delay
+                setTimeout(() => {
+                    this.isHandlingEscape = false;
+                    this.open = false;
+                    this.popoverElement.hide();
+                }, 150);
+                if (this.inputElement) {
+                    this.inputElement.blur();
+                }
+            };
+            await handleEscape();
+        }
+    }
+    /**
+     * Updates the highlighted item in the dropdown list.
+     *
+     * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.
+     * @param {number} index - The index of the item to highlight.
+     */
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.setAttribute('tabindex', '0');
+                item.scrollIntoView({ block: 'nearest' });
+                // Focus on the nv-fieldcheckbox inside
+                const checkbox = item.querySelector('nv-fieldcheckbox');
+                if (checkbox) {
+                    checkbox.focus();
+                }
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    /**
+     * Focus on the first item in the dropdown list.
+     */
+    focusFirstItem() {
+        const firstItem = this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');
+        if (firstItem) {
+            firstItem.setAttribute('tabindex', '0');
+            firstItem.classList.add('highlighted');
+            firstItem.scrollIntoView({ block: 'nearest' });
+            // Focus on the nv-fieldcheckbox inside
+            const checkbox = firstItem.querySelector('nv-fieldcheckbox');
+            if (checkbox) {
+                checkbox.focus();
+            }
+        }
+        else {
+            console.warn('No visible first item found to focus');
+        }
+    }
+    addEmptyMessageOption(ul) {
+        const existingMessage = ul.querySelector('[data-empty]');
+        if (existingMessage)
+            return;
+        const emptyMessage = document.createElement('li');
+        emptyMessage.setAttribute('data-empty', 'true');
+        emptyMessage.textContent = this.emptyresult;
+        emptyMessage.classList.add('no-results-message');
+        ul.appendChild(emptyMessage);
+    }
+    removeEmptyMessageOption(ul) {
+        const existingMessage = ul.querySelector('[data-empty]');
+        if (existingMessage)
+            existingMessage.remove();
+    }
+    /**
+     * Watch for changes in the mode prop and update modeState accordingly
+     * @param {string} newValue - The new mode value
+     */
+    handleModeChange(newValue) {
+        this.modeState = newValue;
+    }
+    manageDivider(ul, selectedItems, unselectedItems) {
+        let divider = ul.querySelector('hr.multiselect-divider');
+        if (!divider) {
+            divider = document.createElement('hr');
+            divider.className = 'multiselect-divider';
+            ul.appendChild(divider);
+        }
+        const shouldShowDivider = selectedItems.length > 0 && unselectedItems.length > 0;
+        if (shouldShowDivider) {
+            // Place the divider after the last selected item
+            const lastSelectedItem = selectedItems[selectedItems.length - 1];
+            lastSelectedItem.after(divider);
+            divider.style.display = '';
+        }
+        else {
+            divider.style.display = 'none';
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Renders the component in options mode
+     * @returns {any} The JSX for options mode
+     */
+    renderOptionsMode() {
+        return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "content" }, this.parsedOptions.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+    }
+    /**
+     * Renders the component in slots mode
+     * @returns {any} The JSX for slots mode
+     */
+    renderSlotsMode() {
+        return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }, h("p", null, "No leading input")), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
+    }
+    /**
+     * Renders description and error description sections
+     * @returns {any} The JSX for descriptions
+     */
+    renderDescriptions() {
+        return [
+            (this.description || this.el.querySelector('[slot="description"]')) && (h("div", { class: "description" }, h("slot", { name: "description" }, this.description))),
+            (this.errorDescription ||
+                this.el.querySelector('[slot="error-description"]')) && (h("div", { hidden: !this.error, class: "error-description" }, h("slot", { name: "error-description" }, this.errorDescription))),
+        ];
+    }
+    /**
+     * Main render method that decides which mode to render
+     * @returns {any} The JSX for the component
+     */
+    render() {
+        return this.modeState === 'options'
+            ? this.renderOptionsMode()
+            : this.renderSlotsMode();
+    }
+    static get is() { return "nv-fieldmultiselect"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fieldmultiselect.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fieldmultiselect.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and user-friendly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add helpful hints or extra information under the text input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display temporary text inside the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the maximum height of the multiselect list when open."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-height",
+                "reflect": true,
+                "defaultValue": "'200px'"
+            },
+            "badgeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the badge showing the number of selected items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge-label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "emptyresult": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display when no items match the filter."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emptyresult",
+                "reflect": true,
+                "defaultValue": "'No results found'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the input field as required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alters the input field's appearance to indicate an error."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A description that appears when there is an error."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the input field's content without allowing users to change it."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${TextInputAutocomplete}`",
+                    "resolved": "\"on\" | \"off\" | \"home\" | \"section-*\" | \"shipping\" | \"billing\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "references": {
+                        "TextInputAutocomplete": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::TextInputAutocomplete"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The autocomplete prop for faster input filling."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete",
+                "reflect": true,
+                "defaultValue": "'off'"
+            },
+            "filterable": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables or disables the filtering feature for the multiselect items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filterable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the value of the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the multiselect popover."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'options' | 'slots'",
+                    "resolved": "\"options\" | \"slots\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multiselect mode: 'options' (JSON data) or 'slots' (custom items).\nThis property is now reflected in the modeState."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": true
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The options are passed as a JSON string."
+                        }, {
+                            "name": "example",
+                            "text": "options='[{\"label\": \"Option 1\", \"value\": \"option1\"}, {\"label\": \"Option 2\", \"value\": \"option2\"}]'"
+                        }],
+                    "text": "List of options available in the multiselect."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "options",
+                "reflect": true
+            },
+            "debounceDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "300"
+                        }],
+                    "text": "Delay in milliseconds before the search is triggered when typing in the filter input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "debounce-delay",
+                "reflect": true,
+                "defaultValue": "300"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedOptions": {},
+            "selectedValues": {},
+            "sortedOptions": {},
+            "filterText": {},
+            "isFilterable": {},
+            "modeState": {},
+            "isHandlingEscape": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropdownItemSelected",
+                "name": "dropdownItemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an item is selected."
+                },
+                "complexType": {
+                    "original": "DropdownItemSelectedEventDetail",
+                    "resolved": "DropdownItemSelectedEventDetail",
+                    "references": {
+                        "DropdownItemSelectedEventDetail": {
+                            "location": "import",
+                            "path": "../nv-fielddropdownitem/DropdownItemSelectedEventDetail",
+                            "id": "src/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.tsx::DropdownItemSelectedEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the input value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "multiselectChange",
+                "name": "multiselectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the selection changes in the multiselect.\nEmits the current list of selected values."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getFilterText": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Retrieves the current filter text entered by the user.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The filter text."
+                        }]
+                }
+            },
+            "resetFilter": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset the filter and make all items visible.",
+                    "tags": []
+                }
+            },
+            "getSelectedValues": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Returns the list of selected values.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The selected values."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "watchValueHandler"
+            }, {
+                "propName": "filterable",
+                "methodName": "watchFilterableHandler"
+            }, {
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "openChanged",
+                "method": "handleOpenChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "itemChecked",
+                "method": "handleItemChecked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldmultiselect.js.map