@nova-design-system/nova-webcomponents 3.24.0 → 3.26.0

package/dist/components/nv-fieldmultiselect.js

@@ -1,1587 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-C63Xpg9a.js';
-import { g as getEffectiveFilterMode, c as clampMaxResults, b as buildIndex, s as shouldUseWorker, i as isWorkerSupported, S as SearchWorkerClient, a as search, d as getTruncatedResultsText, f as formatTruncatedResults, e as clampWorkerThreshold } from './p-IlwlcG9l.js';
-import { d as defineCustomElement$8 } from './p-Bg_l3jn1.js';
-import { d as defineCustomElement$7 } from './p-BISctfud.js';
-import { d as defineCustomElement$6 } from './p-Dr-67WvG.js';
-import { d as defineCustomElement$5 } from './p-nfYynlVq.js';
-import { d as defineCustomElement$4 } from './p-DvapDVBj.js';
-import { d as defineCustomElement$3 } from './p-COnt5ux_.js';
-import { d as defineCustomElement$2 } from './p-B9i3m6rk.js';
-import { v as v4 } from './p-BdYh22OP.js';
-
-const nvFieldmultiselectCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldmultiselect[required]:not([required=false]) label::after,nv-fieldmultiselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect{position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}";
-
-const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmultiselect extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.valueChanged = createEvent(this, "valueChanged", 3);
-        this.filterTextChanged = createEvent(this, "filterTextChanged", 3);
-        this.isBulkOperation = false;
-        // Add the flag to the class
-        this.preventBlurClose = false;
-        /** Pre-computed search index for efficient filtering */
-        this.indexedItems = [];
-        /** Raw items for worker initialization */
-        this.rawItems = [];
-        /** Web Worker client for async search operations */
-        this.workerClient = null;
-        /** Effective filter mode (may differ from prop if fuzzy falls back to smart) */
-        this.effectiveFilterMode = 'strict';
-        /**
-         * 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 = v4();
-        /**
-         * The autocomplete prop helps users fill out the input field faster by
-         * suggesting entries they've used before, like their email or address.
-         * You can turn it on to make forms more convenient or off to ensure users
-         * always type in fresh data.
-         */
-        this.autocomplete = 'off';
-        /**
-         * Marks the input field as required.
-         * @note This uses the native HTML `required` attribute, which triggers browser validation.
-         */
-        this.required = false;
-        /**
-         * Marks the input field as required for accessibility purposes without triggering
-         * native HTML validation. Use this when implementing custom validation logic.
-         * @note When set, this uses `aria-required` instead of the native `required` attribute.
-         * This allows developers to implement custom validation while maintaining accessibility.
-         * @note If this prop is not explicitly set, the component will check for the HTML attribute
-         * 'aria-required' directly to determine if it should be applied.
-         */
-        this.ariaRequiredAttr = false;
-        /**
-         * Display the input field's content without allowing users to change it.
-         */
-        this.readonly = false;
-        /**
-         * Disables the input field.
-         */
-        this.disabled = false;
-        /**
-         * Alters the input field's appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Defines the maximum height of the multiselect list when open.
-         */
-        this.maxHeight = '';
-        /**
-         * State of the multiselect popover.
-         */
-        this.open = false;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        /**
-         * Specifies the selected values of the multiselect field.
-         * This is the canonical value for the component and is used for form submission.
-         */
-        this.value = [];
-        /**
-         * Enables or disables the filtering feature for the multiselect items.
-         */
-        this.filterable = false;
-        /**
-         * The text to display when no items match the filter.
-         */
-        this.emptyResult = 'No results found';
-        /**
-         * Delay in milliseconds before the search is triggered when typing in the filter input.
-         * @default 300
-         */
-        this.debounceDelay = 300;
-        /**
-         * Applies focus to the input field as soon as the component is mounted. This
-         * is equivalent to setting the native autofocus attribute on an <input>
-         * element.
-         */
-        this.autofocus = false;
-        /**
-         * Text for the badge showing the number of selected items.
-         */
-        this.badgeLabel = '';
-        /**
-         * The text entered by the user for filtering multiselect items.
-         */
-        this.filterText = '';
-        /**
-         * Enables or disables the "Select All / Deselect All" toggle functionality.
-         */
-        this.enableSelectAll = false;
-        /**
-         * Text for the "Select All" button.
-         */
-        this.selectAllLabel = 'Select/deselect all';
-        /**
-         * Text for the "Deselect All" button.
-         */
-        this.deselectAllLabel = 'Select/deselect all';
-        /**
-         * Filter mode for multiselect search:
-         * - 'strict': Simple substring matching (normalized includes)
-         * - 'smart': Token-based matching (all query tokens must exist, order ignored)
-         * - 'fuzzy': Typo-tolerant matching using Fuse.js (runs in Web Worker)
-         * @default 'strict'
-         */
-        this.filterMode = 'strict';
-        /**
-         * Maximum number of results to display. Protects UI performance on large datasets.
-         * Values are clamped between 10 and 500 (hard cap).
-         * @default 25
-         */
-        this.maxResults = 25;
-        /**
-         * Minimum number of characters required before filtering starts.
-         * Useful for preventing overwhelming results on very large datasets.
-         * @default 0
-         */
-        this.startFilterAt = 0;
-        /**
-         * Number of items above which filtering is offloaded to a Web Worker.
-         * This keeps the main thread responsive for large datasets.
-         * @default 2000
-         */
-        this.workerThreshold = 2000;
-        /**
-         * Threshold for fuzzy matching (0-1). Lower values are stricter.
-         * Only applies when filterMode is 'fuzzy'.
-         * @default 0.3
-         * @see {@link https://fusejs.io/api/options.html#threshold} Fuse.js threshold documentation
-         */
-        this.fuzzyThreshold = 0.3;
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region STATE
-        /**
-         * Sorted options for display.
-         */
-        this.sortedOptions = [];
-        this.isHandlingEscape = false;
-        /**
-         * Indicates whether the current filter has visible results.
-         * Used to control the visibility of the "Select All" button.
-         */
-        this.hasFilterResults = true;
-        /**
-         * Controls the visibility of the select all section.
-         */
-        this.isSelectAllSectionVisible = true;
-        /**
-         * Whether search results were truncated due to maxResults limit.
-         */
-        this.resultsTruncated = false;
-        /**
-         * Total number of matches before truncation.
-         */
-        this.totalResults = 0;
-        /**
-         * Whether a worker search is in progress.
-         */
-        this.isSearching = false;
-        // (filterItems handles both options and slots mode)
-        /**
-         * Handle badge close for options mode.
-         */
-        this.handleBadgeCloseOptions = () => {
-            this.value = [];
-            this.valueChanged.emit(this.value);
-            // 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.options = this.options.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.value = [];
-            this.valueChanged.emit(this.value);
-            // Uncheck all elements
-            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-            items.forEach(item => {
-                item.checked = false;
-                item.style.display = '';
-            });
-            // Force DOM update before reordering
-            requestAnimationFrame(() => {
-                // Reorder slot content
-                this.reorderSlotContent();
-            });
-        };
-        /**
-         * Handle popover close
-         */
-        this.handlePopoverClose = () => {
-            // If we are handling Escape, ignore this event
-            if (this.isHandlingEscape) {
-                return;
-            }
-            // Filter reset is handled in handleOpenChanged; no need to repeat
-        };
-        /**
-         * Clear the filter text
-         */
-        this.clearFilterText = () => {
-            if (this.filterText !== '') {
-                this.filterText = '';
-                this.filterTextChanged.emit('');
-            }
-            this.resetFilter();
-            this.hasFilterResults = true;
-        };
-        /**
-         * Handle input blur for options mode.
-         */
-        this.handleInputBlurOptions = () => {
-            setTimeout(() => {
-                if (this.preventBlurClose) {
-                    this.preventBlurClose = false;
-                    return; // Don't close the popover
-                }
-                if (!this.el.contains(document.activeElement)) {
-                    this.open = false; // Close the popover on blur
-                    if (this.filterable) {
-                        this.clearFilterText(); // Clear filter text on blur
-                    }
-                }
-            }, 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;
-                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;
-                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.filterText = input.value;
-            this.filterTextChanged.emit(this.filterText);
-            // Clear any existing timer
-            if (this.debounceTimer) {
-                window.clearTimeout(this.debounceTimer);
-            }
-            // Set a new timer for filtering
-            this.debounceTimer = window.setTimeout(() => {
-                void this.filterItems();
-            }, 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.filterText = input.value;
-            this.filterTextChanged.emit(this.filterText);
-            // Clear any existing timer
-            if (this.debounceTimer) {
-                window.clearTimeout(this.debounceTimer);
-            }
-            // Set a new timer for filtering
-            this.debounceTimer = window.setTimeout(() => {
-                void this.filterItems();
-            }, 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.preventBlurClose) {
-                    this.preventBlurClose = false;
-                    return; // Don't close the popover
-                }
-                if (!this.el.contains(document.activeElement)) {
-                    this.open = false; // Close the popover on blur
-                    if (this.filterable) {
-                        this.clearFilterText(); // Clear filter text on blur
-                    }
-                }
-            }, 150);
-        };
-        /**
-         * Toggle the multiselect popover for options mode.
-         */
-        this.togglePopoverOptions = () => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            this.open = !this.open;
-        };
-        /**
-         * Toggle the multiselect popover for slots mode.
-         */
-        this.togglePopoverSlots = () => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            this.open = !this.open;
-        };
-        /**
-         * Toggles the selection state of all non-disabled options in options mode.
-         * Respects filtering by only selecting/deselecting visible items.
-         * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)
-         */
-        this.toggleSelectAllOptions = (selectAll) => {
-            if (!this.options)
-                return;
-            this.isBulkOperation = true; // Set flag to suppress individual emissions
-            try {
-                // Get visible and enabled option values from DOM
-                const visibleOptionValues = this.getVisibleEnabledOptionItems();
-                if (selectAll) {
-                    // Select all visible options - merge with existing selections
-                    this.value = [...new Set([...this.value, ...visibleOptionValues])];
-                }
-                else {
-                    // Deselect only the visible options, keep others that might be filtered out
-                    this.value = this.value.filter(val => !visibleOptionValues.includes(val));
-                }
-                // Emit the change event
-                this.valueChanged.emit(this.value);
-                // Synchronize child components
-                this.syncChildComponents();
-                // Reorder content to move selected items to top
-                this.reorderOptionsContent();
-            }
-            finally {
-                // Defer reset to next frame to ensure any async child emissions are ignored
-                requestAnimationFrame(() => {
-                    this.isBulkOperation = false; // Reset flag
-                });
-            }
-        };
-        /**
-         * Toggles the selection state of all non-disabled slot items.
-         * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)
-         */
-        this.toggleSelectAllSlots = (selectAll) => {
-            if (this.options)
-                return; // Only for slots mode
-            this.isBulkOperation = true; // Set flag to suppress individual emissions
-            try {
-                // Get visible and enabled items
-                const items = this.getVisibleEnabledSlotItems();
-                if (selectAll) {
-                    // Select all visible items
-                    const allActiveValues = items
-                        .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
-                        .filter(value => value !== '');
-                    this.value = [...new Set([...this.value, ...allActiveValues])];
-                }
-                else {
-                    // Deselect only the visible items, keep others that might be filtered out
-                    const visibleValues = items
-                        .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
-                        .filter(value => value !== '');
-                    this.value = this.value.filter(val => !visibleValues.includes(val));
-                }
-                // Emit the change event
-                this.valueChanged.emit(this.value);
-                // Force synchronization with a small delay to ensure DOM is updated
-                requestAnimationFrame(() => {
-                    this.syncChildComponents();
-                    this.reorderSlotContent();
-                });
-            }
-            finally {
-                // Defer reset to next frame to ensure any async child emissions are ignored
-                requestAnimationFrame(() => {
-                    this.isBulkOperation = false; // Reset flag
-                });
-            }
-        };
-        /**
-         * Handle click on the select all checkbox in options mode.
-         * @param {Event} event - The click event.
-         */
-        this.handleSelectAllCheckboxOptionsClick = (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            const currentState = this.getSelectAllCheckboxStateOptions();
-            // Logic to handle the indeterminate state
-            // - unchecked → select all
-            // - indeterminate → select all (clicking on indeterminate will change to checked)
-            // - checked → deselect all
-            const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            this.toggleSelectAllOptions(shouldSelectAll);
-        };
-        /**
-         * Handle click on the select all checkbox in slots mode.
-         * @param {Event} event - The click event.
-         */
-        this.handleSelectAllCheckboxSlotsClick = (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            const currentState = this.getSelectAllCheckboxStateSlots();
-            // Logic to handle the indeterminate state
-            // - unchecked → select all
-            // - indeterminate → select all (clicking on indeterminate will change to checked)
-            // - checked → deselect all
-            const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            this.toggleSelectAllSlots(shouldSelectAll);
-        };
-        this.handleMouseDownPreventBlur = () => {
-            this.preventBlurClose = true;
-        };
-        //#endregion METHODS
-        /****************************************************************************/
-        //#region RENDER
-        /**
-         * Renders the component in options mode
-         * @returns {any} The JSX for options mode
-         */
-        this.renderOptionsMode = () => {
-            return (h(Host, { "aria-label": this.label }, (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, onOpenChanged: this.handleOpenChanged }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), (this.value?.length || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (this.value?.length || 0) > 0, label: `${this.value?.length || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value?.length || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
-                    ? this.required
-                    : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
-                    undefined && {
-                    'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
-                    position: 'absolute',
-                    opacity: '0',
-                    width: '0',
-                    height: '0',
-                    pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllOptionsButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
-                    'indeterminate', label: this.getSelectAllCheckboxStateOptions() === 'unchecked'
-                    ? this.selectAllLabel
-                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxOptionsClick }))))), h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: (this.value || []).includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
-        };
-        /**
-         * Renders the component in slots mode
-         * @returns {any} The JSX for slots mode
-         */
-        this.renderSlotsMode = () => {
-            return (h(Host, { "aria-label": this.label }, (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" }), (this.value?.length || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (this.value?.length || 0) > 0, label: `${this.value?.length || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value?.length || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || 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.filterText, required: this.getRequiredAttributes().useNativeRequired
-                    ? this.required
-                    : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
-                    undefined && {
-                    'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
-                    position: 'absolute',
-                    opacity: '0',
-                    width: '0',
-                    height: '0',
-                    pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllSlotButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
-                    'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
-                    ? this.selectAllLabel
-                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxSlotsClick }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    handleOptionsChange(newValue) {
-        if (!newValue)
-            return;
-        // If the parent has set a value prop, use it. Otherwise, derive from checked options.
-        // (Assume: if value is undefined, it's not set by parent; if it's an array, it's set.)
-        if (!this.value || this.value.length === 0) {
-            this.value = newValue
-                .filter(option => option.checked)
-                .map(option => option.value);
-        }
-        else {
-            // If value is set, ensure checked states in options match value
-            newValue.forEach(option => {
-                option.checked = (this.value || []).includes(option.value);
-            });
-        }
-        this.reorderOptionsContent();
-    }
-    watchValueHandler() {
-        // Skip processing during bulk operations
-        if (this.isBulkOperation) {
-            return;
-        }
-        // Synchronize child components when value changes programmatically
-        if (this.el && this.el.isConnected) {
-            this.syncChildComponents();
-        }
-        // Also, update options checked state if options exist
-        if (this.options) {
-            this.options.forEach(option => {
-                option.checked = (this.value || []).includes(option.value);
-            });
-        }
-    }
-    handleOpenChange(newOpen) {
-        // React to external changes, e.g., reorder or filter
-        if (newOpen) {
-            if (this.options) {
-                this.reorderOptionsContent();
-            }
-            else {
-                this.reorderSlotContent();
-            }
-            if (this.filterText) {
-                this.filterItems();
-            }
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LISTENERS
-    /* eslint-disable nova/native-event-listener */
-    /**
-     * Listen for the `itemChecked` event emitted by child items.
-     * @param {CustomEvent} event - The event object containing the selected value and its checked state.
-     */
-    handleItemChecked(event) {
-        event.stopPropagation();
-        if (this.disabled || this.readonly || this.isBulkOperation) {
-            // Skip processing itemChecked events during bulk operations
-            return;
-        }
-        const { value, checked } = event.detail;
-        if (value !== undefined && value !== null) {
-            const newValue = [...(this.value || [])];
-            const valueIndex = newValue.indexOf(value);
-            let hasChanged = false;
-            if (checked && valueIndex === -1) {
-                newValue.push(value);
-                hasChanged = true;
-            }
-            else if (!checked && valueIndex > -1) {
-                newValue.splice(valueIndex, 1);
-                hasChanged = true;
-            }
-            if (hasChanged) {
-                this.value = newValue;
-                this.valueChanged.emit(this.value);
-                this.syncChildComponents();
-            }
-            // Preserve the filter text in the input
-            if (this.filterable && this.inputElement) {
-                this.inputElement.value = this.filterText;
-            }
-        }
-        else {
-            console.warn('[Event:itemChecked] Received itemChecked event with undefined or null value'); // Warning log
-        }
-    }
-    /* eslint-enable nova/native-event-listener */
-    // 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();
-            });
-        }
-    }
-    /**
-     * 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 (event.key === 'Escape') {
-            this.open = false;
-            return;
-        }
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
-                this.open = true;
-                // 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.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;
-                }, 150);
-                if (this.inputElement) {
-                    this.inputElement.blur();
-                }
-            };
-            await handleEscape();
-        }
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    /**
-     * Subscribe to click outside event.
-     */
-    connectedCallback() {
-        // Bind once and reuse the same reference for add/remove to avoid leaks
-        if (!this._boundHandleClickOutside) {
-            this._boundHandleClickOutside = this.handleClickOutside.bind(this);
-        }
-        document.addEventListener('click', this._boundHandleClickOutside);
-    }
-    /**
-     * Set the mode state and handle options change.
-     */
-    componentWillLoad() {
-        // Don't call handleOptionsChange if we are in slots mode
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-        // Specific initialization for slots mode
-        if (!this.options) {
-            // Initialize value from checked slotted children
-            this.initializeValueFromSlots();
-            // Use a microtask to ensure DOM is ready
-            Promise.resolve().then(() => {
-                // Synchronize child components
-                this.syncChildComponents();
-                // Force a reorder after initialization
-                requestAnimationFrame(() => {
-                    this.reorderSlotContent();
-                });
-            });
-        }
-        // Initialize the sorted options array with the parsed options for initial rendering
-        if (this.options) {
-            this.sortedOptions = [...(this.options ?? [])];
-        }
-        // Reset filter if needed
-        if (!this.filterText) {
-            this.resetFilter();
-        }
-        // Initialize filter results state
-        this.hasFilterResults = true;
-    }
-    /**
-     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
-     */
-    componentDidLoad() {
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-        // Final synchronization of child components after everything is loaded
-        this.syncChildComponents();
-        // For slots mode, ensure value is initialized from checked children if not already
-        if (!this.options) {
-            this.initializeValueFromSlots();
-            this.syncChildComponents();
-        }
-        // Build the search index on load
-        this.rebuildSearchIndex();
-    }
-    /**
-     * Unsubscribe from click outside event and clean up worker.
-     */
-    disconnectedCallback() {
-        if (this._boundHandleClickOutside) {
-            document.removeEventListener('click', this._boundHandleClickOutside);
-        }
-        this.terminateSearchWorker();
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Retrieves the current filter text entered by the user.
-     * @returns {string} The filter text.
-     */
-    async getFilterText() {
-        return this.filterText;
-    }
-    /**
-     * 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.value || []).includes(item.getAttribute('value') || ''));
-            const unselectedItems = items.filter(item => !(this.value || []).includes(item.getAttribute('value') || ''));
-            if (selectedItems.length > 0) {
-                this.manageDivider(ul, selectedItems, unselectedItems);
-            }
-        }
-        // Reset filter results state
-        this.hasFilterResults = true;
-    }
-    /**
-     * Returns the list of selected values.
-     * @returns {string[]} The selected values.
-     */
-    async getSelectedValues() {
-        return this.value;
-    }
-    /**
-     * Select all visible and enabled items.
-     * Works for both options and slots mode.
-     * @returns {Promise<void>}
-     */
-    async selectAll() {
-        if (this.disabled || this.readonly)
-            return;
-        if (this.options) {
-            this.toggleSelectAllOptions(true);
-        }
-        else {
-            this.toggleSelectAllSlots(true);
-        }
-    }
-    /**
-     * Deselect all visible and enabled items.
-     * Works for both options and slots mode.
-     * @returns {Promise<void>}
-     */
-    async deselectAll() {
-        if (this.disabled || this.readonly)
-            return;
-        if (this.options) {
-            this.toggleSelectAllOptions(false);
-        }
-        else {
-            this.toggleSelectAllSlots(false);
-        }
-    }
-    /**
-     * Toggle selection state of all visible and enabled items.
-     * If all items are selected, deselects all. Otherwise, selects all.
-     * Works for both options and slots mode.
-     * @returns {Promise<void>}
-     */
-    async toggleSelectAll() {
-        if (this.disabled || this.readonly)
-            return;
-        const currentState = this.options
-            ? this.getSelectAllCheckboxStateOptions()
-            : this.getSelectAllCheckboxStateSlots();
-        const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-        if (this.options) {
-            this.toggleSelectAllOptions(shouldSelectAll);
-        }
-        else {
-            this.toggleSelectAllSlots(shouldSelectAll);
-        }
-    }
-    /**
-     * Reorder the content of the slot.
-     */
-    reorderSlotContent() {
-        if (this.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.value || []).includes(item.getAttribute('value') || ''));
-        const unselectedItems = items.filter(item => !(this.value || []).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');
-        if (!ul)
-            return;
-        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
-        const selectedItems = items.filter(item => (this.value || []).includes(item.getAttribute('value') || ''));
-        const unselectedItems = items.filter(item => !(this.value || []).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.
-     * Uses the search engine for optimized filtering with configurable modes.
-     */
-    async filterItems() {
-        const ul = this.el.querySelector('ul');
-        if (!ul)
-            return;
-        this.effectiveFilterMode = getEffectiveFilterMode(this.filterMode);
-        // Remove existing empty message and truncation message if any
-        ul.querySelector('[data-empty]')?.remove();
-        ul.querySelector('[data-truncated]')?.remove();
-        // Reset truncation state
-        this.resultsTruncated = false;
-        this.totalResults = 0;
-        if (!this.filterText.trim() ||
-            this.filterText.length < this.startFilterAt) {
-            // Reset display and apply maxResults limit
-            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
-            const effectiveMaxResults = clampMaxResults(this.maxResults);
-            let visibleCount = 0;
-            items.forEach(item => {
-                if (visibleCount < effectiveMaxResults) {
-                    item.style.display = '';
-                    visibleCount++;
-                }
-                else {
-                    item.style.display = 'none';
-                }
-            });
-            // Track truncation
-            this.totalResults = items.length;
-            this.resultsTruncated = items.length > effectiveMaxResults;
-            this.hasFilterResults = visibleCount > 0;
-            // Reorder with divider
-            const visibleItems = items.filter(item => item.style.display !== 'none');
-            const selectedItems = visibleItems.filter(item => (this.value || []).includes(item.getAttribute('value') || ''));
-            const unselectedItems = visibleItems.filter(item => !(this.value || []).includes(item.getAttribute('value') || ''));
-            this.manageDivider(ul, selectedItems, unselectedItems);
-            if (this.resultsTruncated) {
-                this.addTruncatedMessage(ul, effectiveMaxResults, items.length);
-            }
-            return;
-        }
-        // Use advanced search engine
-        const result = await this.performAdvancedSearch();
-        this.resultsTruncated = result.truncated;
-        this.totalResults = result.total;
-        // Create a Set of matching IDs for fast lookup
-        const matchingIds = new Set(result.ids);
-        let hasVisibleItems = false;
-        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
-        const effectiveMaxResults = clampMaxResults(this.maxResults);
-        let visibleCount = 0;
-        items.forEach(item => {
-            const itemValue = item.getAttribute('value') || '';
-            // Check if this item matches
-            const isMatch = matchingIds.has(itemValue);
-            if (isMatch && visibleCount < effectiveMaxResults) {
-                item.style.display = '';
-                hasVisibleItems = true;
-                visibleCount++;
-            }
-            else {
-                item.style.display = 'none';
-            }
-        });
-        // Manage the divider with the visible items
-        const visibleItems = items.filter(item => item.style.display !== 'none');
-        const visibleSelected = visibleItems.filter(item => (this.value || []).includes(item.getAttribute('value') || ''));
-        const visibleUnselected = visibleItems.filter(item => !(this.value || []).includes(item.getAttribute('value') || ''));
-        this.manageDivider(ul, visibleSelected, visibleUnselected);
-        // Add empty message if no items match the filter
-        this.hasFilterResults = hasVisibleItems;
-        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);
-        }
-        else if (result.truncated) {
-            this.addTruncatedMessage(ul, result.ids.length, result.total);
-        }
-        if (this.options) {
-            this.reorderOptionsContent();
-        }
-        else {
-            this.reorderSlotContent();
-        }
-    }
-    /**
-     * Rebuilds the search index from current items (options prop or slot items).
-     */
-    async rebuildSearchIndex() {
-        // Build raw items array for indexing
-        this.rawItems = [];
-        if (this.options?.length) {
-            this.options.forEach((opt, index) => {
-                if (!opt.isDivider) {
-                    this.rawItems.push({
-                        id: opt.value || `opt-${index}`,
-                        label: opt.label || opt.value || '',
-                    });
-                }
-            });
-        }
-        else {
-            // Use slot items
-            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-            items.forEach((item, index) => {
-                this.rawItems.push({
-                    id: item.getAttribute('value') || `item-${index}`,
-                    label: item.getAttribute('label') || item.textContent?.trim() || '',
-                });
-            });
-        }
-        // Build local index for main-thread search
-        this.indexedItems = buildIndex(this.rawItems);
-        // Determine effective filter mode
-        this.effectiveFilterMode = getEffectiveFilterMode(this.filterMode);
-        // Initialize worker if needed
-        const itemCount = this.rawItems.length;
-        const threshold = clampWorkerThreshold(this.workerThreshold);
-        if (shouldUseWorker(itemCount, this.effectiveFilterMode, threshold)) {
-            await this.initSearchWorker();
-        }
-        else {
-            this.terminateSearchWorker();
-        }
-    }
-    /**
-     * Initializes the Web Worker for search operations.
-     * Falls back to main thread if worker is not available.
-     * Note: Fuzzy search now works on main thread with Fuse.js, so no mode change needed.
-     */
-    async initSearchWorker() {
-        if (!isWorkerSupported()) {
-            // Workers not supported - will use main thread (fuzzy still works with Fuse.js)
-            return;
-        }
-        if (!this.workerClient) {
-            this.workerClient = new SearchWorkerClient();
-            // No fallback mode change needed - fuzzy works on main thread now
-        }
-        // Init will silently handle fallback if worker can't be created
-        await this.workerClient.init(this.rawItems);
-    }
-    /**
-     * Terminates the Web Worker and cleans up resources.
-     */
-    terminateSearchWorker() {
-        if (this.workerClient) {
-            this.workerClient.terminate();
-            this.workerClient = null;
-        }
-    }
-    /**
-     * Performs a search over the indexed items, using a Web Worker when available
-     * and falling back to the main thread otherwise.
-     * @returns {Promise<SearchResult>} Resolves with the search results.
-     */
-    async performAdvancedSearch() {
-        // Ensure index is built
-        if (!this.indexedItems.length) {
-            await this.rebuildSearchIndex();
-        }
-        const itemCount = this.rawItems.length;
-        const threshold = clampWorkerThreshold(this.workerThreshold);
-        const useWorker = shouldUseWorker(itemCount, this.effectiveFilterMode, threshold);
-        if (useWorker && this.workerClient?.isReady) {
-            this.isSearching = true;
-            try {
-                return await this.workerClient.search(this.filterText, this.effectiveFilterMode, this.maxResults, this.fuzzyThreshold);
-            }
-            catch (error) {
-                console.error('Worker search failed:', error);
-                // Fall back to main thread (fuzzy now works with Fuse.js)
-                return search(this.indexedItems, {
-                    query: this.filterText,
-                    filterMode: this.effectiveFilterMode,
-                    maxResults: this.maxResults,
-                    startFilterAt: this.startFilterAt,
-                    fuzzyThreshold: this.fuzzyThreshold,
-                });
-            }
-            finally {
-                this.isSearching = false;
-            }
-        }
-        // Use main thread search (fuzzy now works with Fuse.js)
-        return search(this.indexedItems, {
-            query: this.filterText,
-            filterMode: this.effectiveFilterMode,
-            maxResults: this.maxResults,
-            startFilterAt: this.startFilterAt,
-            fuzzyThreshold: this.fuzzyThreshold,
-        });
-    }
-    /**
-     * Adds a non-selectable list item showing truncation information.
-     * @param {HTMLElement} ul - The list element to which the truncation message will be appended.
-     * @param {number} shown - The number of items currently shown.
-     * @param {number} total - The total number of available items.
-     */
-    addTruncatedMessage(ul, shown, total) {
-        // Remove existing truncation message
-        ul.querySelector('[data-truncated]')?.remove();
-        // Get the text template: use provided text or auto-detect from locale
-        const textTemplate = this.truncatedResultsText || getTruncatedResultsText(this.locale);
-        const truncatedItem = document.createElement('li');
-        truncatedItem.setAttribute('data-truncated', 'true');
-        truncatedItem.className = 'truncated-message no-results-message';
-        truncatedItem.textContent = formatTruncatedResults(textTemplate, shown, total);
-        ul.appendChild(truncatedItem);
-    }
-    handleClickOutside(event) {
-        if (this.el.contains(event.target) ||
-            (this.inputElement && this.inputElement.contains(event.target))) {
-            return;
-        }
-        this.open = false;
-    }
-    /**
-     * 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');
-        }
-    }
-    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';
-        }
-    }
-    /**
-     * Synchronizes the checked state of all child nv-fielddropdownitemcheck components
-     * with the current selectedValues state.
-     */
-    syncChildComponents() {
-        // Early return if element is not ready
-        if (!this.el || !this.el.isConnected) {
-            return;
-        }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        items.forEach(item => {
-            // Get the effective value: use explicit value if present, otherwise use label
-            const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
-            const shouldBeChecked = (this.value || []).includes(itemValue);
-            // Only update if the checked state differs to avoid triggering unnecessary events
-            if (item.checked !== shouldBeChecked) {
-                // Set attribute and property, but avoid triggering itemChecked during bulk
-                if (this.isBulkOperation) {
-                    // Directly update the DOM attribute to avoid triggering the setter
-                    if (shouldBeChecked) {
-                        item.setAttribute('checked', '');
-                    }
-                    else {
-                        item.removeAttribute('checked');
-                    }
-                    // Update internal state without emitting events (assumes nv-fielddropdownitemcheck respects this)
-                    item.checked = shouldBeChecked;
-                }
-                else {
-                    item.checked = shouldBeChecked;
-                }
-            }
-        });
-    }
-    /**
-     * Gets visible and enabled slot items using consistent logic.
-     * @returns {Element[]} Array of visible and enabled items
-     */
-    getVisibleEnabledSlotItems() {
-        const allItems = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        return allItems.filter(item => {
-            const isHidden = item.style.display === 'none';
-            const isDisabled = item.hasAttribute('disabled');
-            return !isHidden && !isDisabled;
-        });
-    }
-    /**
-     * Gets visible and enabled option items by checking DOM elements.
-     * @returns {string[]} Array of visible and enabled option values
-     */
-    getVisibleEnabledOptionItems() {
-        const allItems = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        const visibleItems = allItems.filter(item => {
-            const isHidden = item.style.display === 'none' ||
-                item.getAttribute('aria-hidden') === 'true';
-            const isDisabled = item.hasAttribute('disabled') ||
-                item.getAttribute('disabled') === 'true';
-            return !isHidden && !isDisabled;
-        });
-        return visibleItems
-            .map(item => item.getAttribute('value') || '')
-            .filter(value => value !== '');
-    }
-    /**
-     * Determines if the toggle all button should be shown in options mode.
-     * @returns {boolean} True if there are visible items and no "No results found" message
-     */
-    shouldShowToggleAllOptionsButton() {
-        if (!this.options)
-            return false; // Only for options mode
-        return this.enableSelectAll && this.hasFilterResults;
-    }
-    /**
-     * Gets the checkbox state for the select all checkbox in options mode.
-     * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state
-     */
-    getSelectAllCheckboxStateOptions() {
-        if (!this.options)
-            return 'unchecked';
-        // Get visible and enabled option values from DOM
-        const visibleOptionValues = this.getVisibleEnabledOptionItems();
-        if (visibleOptionValues.length === 0)
-            return 'unchecked';
-        const selectedVisibleOptions = visibleOptionValues.filter(value => (this.value || []).includes(value));
-        if (selectedVisibleOptions.length === 0)
-            return 'unchecked';
-        if (selectedVisibleOptions.length === visibleOptionValues.length)
-            return 'checked';
-        return 'indeterminate';
-    }
-    /**
-     * Gets the checkbox state for the select all checkbox in slots mode.
-     * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state
-     */
-    getSelectAllCheckboxStateSlots() {
-        if (this.options)
-            return 'unchecked';
-        // Get all visible and enabled items
-        const items = this.getVisibleEnabledSlotItems();
-        if (items.length === 0)
-            return 'unchecked';
-        const selectedItems = items.filter(item => {
-            const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
-            return itemValue !== '' && (this.value || []).includes(itemValue);
-        });
-        if (selectedItems.length === 0)
-            return 'unchecked';
-        if (selectedItems.length === items.length)
-            return 'checked';
-        return 'indeterminate';
-    }
-    /**
-     * Determines if the toggle all button should be shown in slots mode.
-     * @returns {boolean} True if there are visible items and no "No results found" message
-     */
-    shouldShowToggleAllSlotButton() {
-        if (this.options)
-            return false; // Only for slots mode
-        return this.enableSelectAll && this.hasFilterResults;
-    }
-    /**
-     * Initializes the value array from checked slotted nv-fielddropdownitemcheck elements (slots mode only).
-     */
-    initializeValueFromSlots() {
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        // Values from checked slot children
-        const checkedValues = items
-            .filter(item => item.hasAttribute('checked'))
-            .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
-        // Combine with current this.value (set by code), ensuring uniqueness
-        this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
-    }
-    /**
-     * Calculates aria-required and native required values based on props and attributes
-     * @returns {object} Object with ariaRequiredValue and useNativeRequired
-     */
-    getRequiredAttributes() {
-        // Check aria-required from multiple sources:
-        // 1. JavaScript prop (most reliable)
-        // 2. HTML attribute 'aria-required' (direct HTML)
-        // 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)
-        // Check aria-required from multiple sources:
-        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
-        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
-        // We use hasAttribute to determine if the attribute was explicitly set by the user,
-        // since the prop now defaults to false (to maintain Blazor compatibility)
-        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
-            this.el.hasAttribute('aria-required-attr');
-        const ariaRequiredFromAttr = hasAriaRequiredAttr
-            ? this.el.getAttribute('aria-required') ||
-                this.el.getAttribute('aria-required-attr')
-            : null;
-        // Use aria-required if the attribute was explicitly set
-        // With reflect: true, setting the prop will also set the attribute
-        const useAriaRequired = hasAriaRequiredAttr;
-        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
-        // If attribute doesn't exist, the prop was never set and we don't use aria-required
-        const ariaRequiredAttrValue = hasAriaRequiredAttr
-            ? ariaRequiredFromAttr
-            : null;
-        // Determine which attributes to use
-        // If aria-required HTML attribute is present, use it (convert string to boolean)
-        // If required is set and aria-required is not "false", use native required
-        // If aria-required is "false", don't use native required even if required is set
-        const ariaRequiredValue = useAriaRequired
-            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
-            : undefined;
-        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return {
-            ariaRequiredValue,
-            useNativeRequired,
-        };
-    }
-    /**
-     * Emitted when the input loses focus.
-     * @param {CustomEvent<boolean>} event - The event object containing the focus state.
-     */
-    handleOpenChanged(event) {
-        // Only update if open state differs to avoid redundant actions
-        if (this.open !== event.detail) {
-            this.open = event.detail;
-            if (this.open) {
-                // Filter items only if there is filter text
-                if (this.filterText) {
-                    this.filterItems();
-                }
-            }
-            else {
-                // Clear filter text on close if filterable
-                if (this.filterable) {
-                    this.clearFilterText();
-                }
-                this.handlePopoverClose();
-            }
-            // Reorder content as needed
-            if (this.options) {
-                this.reorderOptionsContent();
-            }
-            else {
-                this.reorderSlotContent();
-            }
-        }
-    }
-    /**
-     * 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.options ? this.renderOptionsMode() : this.renderSlotsMode();
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"],
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return nvFieldmultiselectCss; }
-}, [324, "nv-fieldmultiselect", {
-        "label": [513],
-        "inputId": [513, "input-id"],
-        "name": [513],
-        "description": [513],
-        "placeholder": [513],
-        "autocomplete": [513],
-        "required": [516],
-        "ariaRequiredAttr": [516, "aria-required"],
-        "readonly": [516],
-        "disabled": [516],
-        "error": [516],
-        "errorDescription": [513, "error-description"],
-        "maxHeight": [513, "max-height"],
-        "open": [1540],
-        "fluid": [516],
-        "options": [1040],
-        "value": [1040],
-        "filterable": [516],
-        "emptyResult": [513, "empty-result"],
-        "debounceDelay": [514, "debounce-delay"],
-        "autofocus": [516],
-        "badgeLabel": [513, "badge-label"],
-        "filterText": [1537, "filter-text"],
-        "enableSelectAll": [516, "enable-select-all"],
-        "selectAllLabel": [513, "select-all-label"],
-        "deselectAllLabel": [513, "deselect-all-label"],
-        "filterMode": [513, "filter-mode"],
-        "maxResults": [514, "max-results"],
-        "startFilterAt": [514, "start-filter-at"],
-        "locale": [513],
-        "truncatedResultsText": [513, "truncated-results-text"],
-        "workerThreshold": [514, "worker-threshold"],
-        "fuzzyThreshold": [514, "fuzzy-threshold"],
-        "sortedOptions": [32],
-        "isHandlingEscape": [32],
-        "hasFilterResults": [32],
-        "isSelectAllSectionVisible": [32],
-        "resultsTruncated": [32],
-        "totalResults": [32],
-        "isSearching": [32],
-        "getFilterText": [64],
-        "resetFilter": [64],
-        "getSelectedValues": [64],
-        "selectAll": [64],
-        "deselectAll": [64],
-        "toggleSelectAll": [64]
-    }, [[0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]], {
-        "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"],
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-fieldmultiselect", "nv-badge", "nv-fieldcheckbox", "nv-fielddropdownitemcheck", "nv-icon", "nv-iconbutton", "nv-loader", "nv-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-fieldmultiselect":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvFieldmultiselect$1);
-            }
-            break;
-        case "nv-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "nv-fieldcheckbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "nv-fielddropdownitemcheck":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "nv-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "nv-iconbutton":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "nv-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nv-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvFieldmultiselect = NvFieldmultiselect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvFieldmultiselect, defineCustomElement };
-//# sourceMappingURL=nv-fieldmultiselect.js.map
-
-//# sourceMappingURL=nv-fieldmultiselect.js.map
+import{t,p as e,H as i,c as s,h as o,F as l,d as n}from"./p-iXsbKJzR.js";import{k as r,h as a,f as d,q as h,l as c,S as u,s as f,i as m}from"./p-BaF3Tuua.js";import{g as p,f as v}from"./p-CR9MpYzU.js";import{d as b}from"./p-laRga5dw.js";import{d as g}from"./p-D15RdWEG.js";import{d as w}from"./p-Bh6WGsHA.js";import{d as k}from"./p-jZF_Ggmx.js";import{d as y}from"./p-DDqZBSGn.js";import{d as x}from"./p-CAKTe96z.js";import{d as A}from"./p-DHNSuxz-.js";import{v as C}from"./p-BdYh22OP.js";const S=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.valueChanged=s(this,"valueChanged",3),this.filterTextChanged=s(this,"filterTextChanged",3),this.isBulkOperation=!1,this.preventBlurClose=!1,this.indexedItems=[],this.rawItems=[],this.workerClient=null,this.effectiveFilterMode="strict",this.inputId=C(),this.autocomplete="off",this.required=!1,this.ariaRequiredAttr=!1,this.readonly=!1,this.disabled=!1,this.error=!1,this.maxHeight="",this.open=!1,this.fluid=!1,this.value=[],this.filterable=!1,this.emptyResult="No results found",this.debounceDelay=300,this.autofocus=!1,this.badgeLabel="",this.filterText="",this.enableSelectAll=!1,this.selectAllLabel="Select/deselect all",this.deselectAllLabel="Select/deselect all",this.filterMode="strict",this.maxResults=25,this.startFilterAt=0,this.workerThreshold=2e3,this.fuzzyThreshold=.3,this.sortedOptions=[],this.isHandlingEscape=!1,this.hasFilterResults=!0,this.isSelectAllSectionVisible=!0,this.resultsTruncated=!1,this.totalResults=0,this.isSearching=!1,this.handleBadgeCloseOptions=()=>{this.value=[],this.valueChanged.emit(this.value),Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).forEach((t=>{t.checked=!1,t.style.display=""})),this.options=this.options.filter((t=>!t.isDivider)),this.reorderOptionsContent()},this.handleBadgeCloseSlots=()=>{this.value=[],this.valueChanged.emit(this.value),Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).forEach((t=>{t.checked=!1,t.style.display=""})),requestAnimationFrame((()=>{this.reorderSlotContent()}))},this.handlePopoverClose=()=>{},this.clearFilterText=()=>{""!==this.filterText&&(this.filterText="",this.filterTextChanged.emit("")),this.resetFilter(),this.hasFilterResults=!0},this.handleInputBlurOptions=()=>{setTimeout((()=>{this.preventBlurClose?this.preventBlurClose=!1:this.el.contains(document.activeElement)||(this.open=!1,this.filterable&&this.clearFilterText())}),150)},this.handleInputContainerClickOptions=t=>{if(this.disabled||this.readonly)return;const e=t.target;if("P"===e.tagName||"SPAN"===e.tagName){this.open=!0;const t=this.el.querySelector(".input-container");t&&(t.classList.add("focus-within"),this.popoverElement.addEventListener("hide",(()=>{t.classList.remove("focus-within")})))}},this.handleInputContainerClickSlots=t=>{if(this.disabled||this.readonly)return;const e=t.target;if("P"===e.tagName||"SPAN"===e.tagName){this.open=!0;const t=this.el.querySelector(".input-container");t&&(t.classList.add("focus-within"),this.popoverElement.addEventListener("hide",(()=>{t.classList.remove("focus-within")})))}},this.handleInputOptions=t=>{this.filterable&&(this.disabled||this.readonly||(this.filterText=t.target.value,this.filterTextChanged.emit(this.filterText),this.debounceTimer&&window.clearTimeout(this.debounceTimer),this.debounceTimer=window.setTimeout((()=>{this.filterItems()}),this.debounceDelay)))},this.handleInputSlots=t=>{this.filterable&&(this.disabled||this.readonly||(this.filterText=t.target.value,this.filterTextChanged.emit(this.filterText),this.debounceTimer&&window.clearTimeout(this.debounceTimer),this.debounceTimer=window.setTimeout((()=>{this.filterItems()}),this.debounceDelay)))},this.handleInputFocusOptions=()=>{this.disabled||this.readonly||(this.open=!0)},this.handleInputFocusSlots=()=>{this.disabled||this.readonly||(this.open=!0)},this.handleInputBlurSlots=()=>{setTimeout((()=>{this.preventBlurClose?this.preventBlurClose=!1:this.el.contains(document.activeElement)||(this.open=!1,this.filterable&&this.clearFilterText())}),150)},this.togglePopoverOptions=()=>{this.disabled||this.readonly||(this.open=!this.open)},this.togglePopoverSlots=()=>{this.disabled||this.readonly||(this.open=!this.open)},this.toggleSelectAllOptions=t=>{if(this.options){this.isBulkOperation=!0;try{const e=this.getVisibleEnabledOptionItems();this.value=t?[...new Set([...this.value,...e])]:this.value.filter((t=>!e.includes(t))),this.valueChanged.emit(this.value),this.syncChildComponents(),this.reorderOptionsContent()}finally{requestAnimationFrame((()=>{this.isBulkOperation=!1}))}}},this.toggleSelectAllSlots=t=>{if(!this.options){this.isBulkOperation=!0;try{const e=this.getVisibleEnabledSlotItems();if(t){const t=e.map((t=>t.getAttribute("value")||t.getAttribute("label")||"")).filter((t=>""!==t));this.value=[...new Set([...this.value,...t])]}else{const t=e.map((t=>t.getAttribute("value")||t.getAttribute("label")||"")).filter((t=>""!==t));this.value=this.value.filter((e=>!t.includes(e)))}this.valueChanged.emit(this.value),requestAnimationFrame((()=>{this.syncChildComponents(),this.reorderSlotContent()}))}finally{requestAnimationFrame((()=>{this.isBulkOperation=!1}))}}},this.handleSelectAllCheckboxOptionsClick=t=>{t.stopPropagation(),t.preventDefault();const e=this.getSelectAllCheckboxStateOptions();this.toggleSelectAllOptions("unchecked"===e||"indeterminate"===e)},this.handleSelectAllCheckboxSlotsClick=t=>{t.stopPropagation(),t.preventDefault();const e=this.getSelectAllCheckboxStateSlots();this.toggleSelectAllSlots("unchecked"===e||"indeterminate"===e)},this.handleMouseDownPreventBlur=()=>{this.preventBlurClose=!0},this.renderOptionsMode=()=>o(n,{"aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{htmlFor:this.inputId},o("slot",{name:"label"},this.label)),o("nv-popover",{ref:t=>this.popoverElement=t,triggerMode:"controlled",placement:"bottom-start",open:this.open,onOpenChanged:this.handleOpenChanged},o("div",{class:"input-wrapper-multiselect",slot:"trigger"},o("slot",{name:"before-input"}),o("div",{class:"input-container-multiselect"},o("slot",{name:"leading-input"}),(this.value?.length||0)>0&&o("nv-badge",{slot:"leading-input","prevent-auto-close":!0,color:"10",dismissible:(this.value?.length||0)>0,label:`${this.value?.length||0} ${this.badgeLabel}`,"aria-label":`Clear all ${this.value?.length||0} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseOptions}),this.filterable||this.disabled||this.readonly?o("input",{type:"text",id:this.inputId,ref:t=>this.inputElement=t,autofocus:this.autofocus,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.filterText,required:this.getRequiredAttributes().useNativeRequired?this.required:void 0,...void 0!==this.getRequiredAttributes().ariaRequiredValue&&{"aria-required":this.getRequiredAttributes().ariaRequiredValue+""},disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputOptions,onFocus:this.handleInputFocusOptions,onBlur:this.handleInputBlurOptions,onKeyDown:this.handleKeyDown,"data-scope":"focusable","aria-label":this.label,"aria-controls":this.inputId+"-listbox"}):o(l,null,o("input",{id:this.inputId,type:"text",style:{position:"absolute",opacity:"0",width:"0",height:"0",pointerEvents:"none"},tabIndex:-1,"aria-hidden":"true",autoComplete:this.autocomplete,name:this.name,onFocus:this.handleInputFocusOptions}),o("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClickOptions,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusOptions,"aria-label":this.label,"aria-controls":this.inputId+"-listbox","data-scope":"focusable",role:"button"},o("span",null,this.placeholder))),this.error&&o("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),this.filterable&&this.filterText.length>0&&o("nv-iconbutton",{"data-scope":"clear-filter",name:"x",size:"md",emphasis:"lower","aria-label":"Clear filter text",tabindex:"-1",title:"Clear filter text",onMouseDown:this.handleMouseDownPreventBlur,onClick:this.clearFilterText}),o("nv-iconbutton",{"data-scope":"toggle-dropdown",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown",title:this.open?"Hide dropdown":"Show dropdown",onMouseDown:this.handleMouseDownPreventBlur,onClick:this.togglePopoverOptions})),o("slot",{name:"after-input"})),o("div",{id:this.inputId+"-listbox",slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{},onMouseDown:this.handleMouseDownPreventBlur},this.shouldShowToggleAllOptionsButton()&&o("div",{class:"select-all-container"},o("div",{class:"select-all-header"},this.isSelectAllSectionVisible&&o("nv-fieldcheckbox",{checked:"checked"===this.getSelectAllCheckboxStateOptions(),indeterminate:"indeterminate"===this.getSelectAllCheckboxStateOptions(),label:"unchecked"===this.getSelectAllCheckboxStateOptions()?this.selectAllLabel:this.deselectAllLabel,onMouseDown:this.handleMouseDownPreventBlur,onClick:this.handleSelectAllCheckboxOptionsClick}))),o("ul",{role:"listbox","aria-multiselectable":"true"},this.options.map((t=>o("nv-fielddropdownitemcheck",{role:"option",label:t.label,description:t.description,value:t.value,checked:(this.value||[]).includes(t.value),disabled:t.disabled})))))),this.renderDescriptions()),this.renderSlotsMode=()=>o(n,{"aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{htmlFor:this.inputId},o("slot",{name:"label"},this.label)),o("nv-popover",{ref:t=>this.popoverElement=t,triggerMode:"controlled",placement:"bottom-start",open:this.open},o("div",{class:"input-wrapper-multiselect",slot:"trigger"},o("slot",{name:"before-input"}),o("div",{class:"input-container-multiselect",onClick:this.handleInputContainerClickSlots},o("slot",{name:"leading-input"}),(this.value?.length||0)>0&&o("nv-badge",{slot:"leading-input","prevent-auto-close":!0,color:"10",dismissible:(this.value?.length||0)>0,label:`${this.value?.length||0} ${this.badgeLabel}`,"aria-label":`Clear all ${this.value?.length||0} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseSlots}),this.filterable||this.disabled||this.readonly?o("input",{id:this.inputId,ref:t=>this.inputElement=t,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.filterText,required:this.getRequiredAttributes().useNativeRequired?this.required:void 0,...void 0!==this.getRequiredAttributes().ariaRequiredValue&&{"aria-required":this.getRequiredAttributes().ariaRequiredValue+""},disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputSlots,onFocus:this.handleInputFocusSlots,onBlur:this.handleInputBlurSlots,onKeyDown:this.handleKeyDown,"data-scope":"focusable","aria-label":this.label,"aria-controls":this.inputId+"-listbox"}):o(l,null,o("input",{id:this.inputId,type:"text",style:{position:"absolute",opacity:"0",width:"0",height:"0",pointerEvents:"none"},tabIndex:-1,"aria-hidden":"true",autoComplete:this.autocomplete,name:this.name,onFocus:this.handleInputFocusSlots}),o("p",{id:this.inputId,class:"non-filterable-text","aria-label":this.label,onClick:this.handleInputContainerClickSlots,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusSlots,"aria-controls":this.inputId+"-listbox","data-scope":"focusable",role:"button"},o("span",null,this.placeholder))),this.error&&o("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),this.filterable&&this.filterText.length>0&&o("nv-iconbutton",{name:"x",size:"md",emphasis:"lower",tabindex:"-1",onMouseDown:this.handleMouseDownPreventBlur,onClick:this.clearFilterText,"aria-label":"Clear filter text"}),o("nv-iconbutton",{"data-scope":"toggle-dropdown",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown",title:this.open?"Hide dropdown":"Show dropdown",onMouseDown:this.handleMouseDownPreventBlur,onClick:this.togglePopoverSlots})),o("slot",{name:"after-input"})),o("div",{id:this.inputId+"-listbox",slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{},onMouseDown:this.handleMouseDownPreventBlur},this.shouldShowToggleAllSlotButton()&&o("div",{class:"select-all-container"},o("div",{class:"select-all-header"},this.isSelectAllSectionVisible&&o("nv-fieldcheckbox",{checked:"checked"===this.getSelectAllCheckboxStateSlots(),indeterminate:"indeterminate"===this.getSelectAllCheckboxStateSlots(),label:"unchecked"===this.getSelectAllCheckboxStateSlots()?this.selectAllLabel:this.deselectAllLabel,onMouseDown:this.handleMouseDownPreventBlur,onClick:this.handleSelectAllCheckboxSlotsClick}))),o("slot",{name:"content"}))),this.renderDescriptions())}handleOptionsChange(t){t&&(this.value&&0!==this.value.length?t.forEach((t=>{t.checked=(this.value||[]).includes(t.value)})):this.value=t.filter((t=>t.checked)).map((t=>t.value)),this.reorderOptionsContent())}watchValueHandler(){this.isBulkOperation||(this.el&&this.el.isConnected&&this.syncChildComponents(),this.options&&this.options.forEach((t=>{t.checked=(this.value||[]).includes(t.value)})))}handleOpenChange(t){t&&(this.options?this.reorderOptionsContent():this.reorderSlotContent(),this.filterText&&this.filterItems())}handleItemChecked(t){if(t.stopPropagation(),this.disabled||this.readonly||this.isBulkOperation)return;const{value:e,checked:i}=t.detail;if(null!=e){const t=[...this.value||[]],s=t.indexOf(e);let o=!1;i&&-1===s?(t.push(e),o=!0):!i&&s>-1&&(t.splice(s,1),o=!0),o&&(this.value=t,this.valueChanged.emit(this.value),this.syncChildComponents()),this.filterable&&this.inputElement&&(this.inputElement.value=this.filterText)}else console.warn("[Event:itemChecked] Received itemChecked event with undefined or null value")}handleSlotChange(t){const e=t.target;e&&"content"===e.name&&requestAnimationFrame((()=>{this.reorderSlotContent()}))}async handleKeyDown(t){if("Escape"===t.key)return void(this.open=!1);if(!this.open)return"ArrowDown"===t.key?(this.open=!0,this.filterable||requestAnimationFrame((()=>{this.focusFirstItem()})),void t.preventDefault()):void 0;const e=Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));if(0===e.length)return void console.warn("No visible items found to navigate");let i=e.findIndex((t=>t.classList.contains("highlighted")));if("ArrowDown"===t.key)t.preventDefault(),i=-1===i?0:(i+1)%e.length,this.updateHighlightedItem(e,i);else if("ArrowUp"===t.key)t.preventDefault(),i=-1===i?e.length-1:(i-1+e.length)%e.length,this.updateHighlightedItem(e,i);else if("Enter"===t.key&&i>=0){t.preventDefault();const s=e[i],o=s.hasAttribute("checked");s.checked=!o,s.dispatchEvent(new MouseEvent("click",{view:window,bubbles:!0,cancelable:!0}))}else if("Escape"===t.key){t.preventDefault(),t.stopPropagation();const e=async()=>{this.isHandlingEscape=!0,this.options?this.reorderOptionsContent():this.reorderSlotContent(),await new Promise((t=>setTimeout(t,100))),setTimeout((()=>{this.isHandlingEscape=!1,this.open=!1}),150),this.inputElement&&this.inputElement.blur()};await e()}}connectedCallback(){this._boundHandleClickOutside||(this._boundHandleClickOutside=this.handleClickOutside.bind(this)),document.addEventListener("click",this._boundHandleClickOutside)}componentWillLoad(){this.options&&this.handleOptionsChange(this.options),this.options||(this.initializeValueFromSlots(),Promise.resolve().then((()=>{this.syncChildComponents(),requestAnimationFrame((()=>{this.reorderSlotContent()}))}))),this.options&&(this.sortedOptions=[...this.options??[]]),this.filterText||this.resetFilter(),this.hasFilterResults=!0}componentDidLoad(){this.options&&this.handleOptionsChange(this.options),this.syncChildComponents(),this.options||(this.initializeValueFromSlots(),this.syncChildComponents()),this.rebuildSearchIndex()}disconnectedCallback(){this._boundHandleClickOutside&&document.removeEventListener("click",this._boundHandleClickOutside),this.terminateSearchWorker()}async getFilterText(){return this.filterText}async resetFilter(){const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((t=>{t.style.display=""}));const e=this.el.querySelector("ul");if(e){const i=e.querySelector("[data-empty]");i&&i.remove();const s=t.filter((t=>(this.value||[]).includes(t.getAttribute("value")||""))),o=t.filter((t=>!(this.value||[]).includes(t.getAttribute("value")||"")));s.length>0&&this.manageDivider(e,s,o)}this.hasFilterResults=!0}async getSelectedValues(){return this.value}async selectAll(){this.disabled||this.readonly||(this.options?this.toggleSelectAllOptions(!0):this.toggleSelectAllSlots(!0))}async deselectAll(){this.disabled||this.readonly||(this.options?this.toggleSelectAllOptions(!1):this.toggleSelectAllSlots(!1))}async toggleSelectAll(){if(this.disabled||this.readonly)return;const t=this.options?this.getSelectAllCheckboxStateOptions():this.getSelectAllCheckboxStateSlots(),e="unchecked"===t||"indeterminate"===t;this.options?this.toggleSelectAllOptions(e):this.toggleSelectAllSlots(e)}reorderSlotContent(){if(this.options)return;const t=this.el.querySelector("ul");if(!t)return;t.querySelectorAll("hr.multiselect-divider").forEach((t=>t.remove()));const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>"none"!==t.style.display));if(t.querySelector("[data-empty]"))return;const i=e.filter((t=>(this.value||[]).includes(t.getAttribute("value")||""))),s=e.filter((t=>!(this.value||[]).includes(t.getAttribute("value")||"")));if(i.forEach((e=>{t.appendChild(e)})),i.length>0&&s.length>0){const e=document.createElement("hr");e.className="multiselect-divider",t.appendChild(e)}s.forEach((e=>{t.appendChild(e)}))}reorderOptionsContent(){const t=this.el.querySelector("ul");if(!t)return;const e=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>"none"!==t.style.display)),i=e.filter((t=>(this.value||[]).includes(t.getAttribute("value")||""))),s=e.filter((t=>!(this.value||[]).includes(t.getAttribute("value")||"")));i.forEach((e=>t.appendChild(e))),s.forEach((e=>t.appendChild(e))),this.manageDivider(t,i,s)}async filterItems(){const t=this.el.querySelector("ul");if(!t)return;if(this.effectiveFilterMode=r(this.filterMode),t.querySelector("[data-empty]")?.remove(),t.querySelector("[data-truncated]")?.remove(),this.resultsTruncated=!1,this.totalResults=0,!this.filterText.trim()||this.filterText.length<this.startFilterAt){const e=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck")),i=a(this.maxResults);let s=0;e.forEach((t=>{s<i?(t.style.display="",s++):t.style.display="none"})),this.totalResults=e.length,this.resultsTruncated=e.length>i,this.hasFilterResults=s>0;const o=e.filter((t=>"none"!==t.style.display)),l=o.filter((t=>(this.value||[]).includes(t.getAttribute("value")||""))),n=o.filter((t=>!(this.value||[]).includes(t.getAttribute("value")||"")));return this.manageDivider(t,l,n),void(this.resultsTruncated&&this.addTruncatedMessage(t,i,e.length))}const e=await this.performAdvancedSearch();this.resultsTruncated=e.truncated,this.totalResults=e.total;const i=new Set(e.ids);let s=!1;const o=Array.from(t.querySelectorAll("nv-fielddropdownitemcheck")),l=a(this.maxResults);let n=0;o.forEach((t=>{const e=t.getAttribute("value")||"";i.has(e)&&n<l?(t.style.display="",s=!0,n++):t.style.display="none"}));const d=o.filter((t=>"none"!==t.style.display)),h=d.filter((t=>(this.value||[]).includes(t.getAttribute("value")||""))),c=d.filter((t=>!(this.value||[]).includes(t.getAttribute("value")||"")));if(this.manageDivider(t,h,c),this.hasFilterResults=s,s)e.truncated&&this.addTruncatedMessage(t,e.ids.length,e.total);else{const e=document.createElement("li");e.setAttribute("data-empty","true"),e.textContent=this.emptyResult,e.classList.add("no-results-message"),t.appendChild(e)}this.options?this.reorderOptionsContent():this.reorderSlotContent()}async rebuildSearchIndex(){this.rawItems=[],this.options?.length?this.options.forEach(((t,e)=>{t.isDivider||this.rawItems.push({id:t.value||"opt-"+e,label:t.label||t.value||""})})):Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).forEach(((t,e)=>{this.rawItems.push({id:t.getAttribute("value")||"item-"+e,label:t.getAttribute("label")||t.textContent?.trim()||""})})),this.indexedItems=d(this.rawItems),this.effectiveFilterMode=r(this.filterMode);const t=this.rawItems.length,e=m(this.workerThreshold);h(t,this.effectiveFilterMode,e)?await this.initSearchWorker():this.terminateSearchWorker()}async initSearchWorker(){c()&&(this.workerClient||(this.workerClient=new u),await this.workerClient.init(this.rawItems))}terminateSearchWorker(){this.workerClient&&(this.workerClient.terminate(),this.workerClient=null)}async performAdvancedSearch(){this.indexedItems.length||await this.rebuildSearchIndex();const t=this.rawItems.length,e=m(this.workerThreshold);if(h(t,this.effectiveFilterMode,e)&&this.workerClient?.isReady){this.isSearching=!0;try{return await this.workerClient.search(this.filterText,this.effectiveFilterMode,this.maxResults,this.fuzzyThreshold)}catch(t){return console.error("Worker search failed:",t),f(this.indexedItems,{query:this.filterText,filterMode:this.effectiveFilterMode,maxResults:this.maxResults,startFilterAt:this.startFilterAt,fuzzyThreshold:this.fuzzyThreshold})}finally{this.isSearching=!1}}return f(this.indexedItems,{query:this.filterText,filterMode:this.effectiveFilterMode,maxResults:this.maxResults,startFilterAt:this.startFilterAt,fuzzyThreshold:this.fuzzyThreshold})}addTruncatedMessage(t,e,i){t.querySelector("[data-truncated]")?.remove();const s=this.truncatedResultsText||p(this.locale),o=document.createElement("li");o.setAttribute("data-truncated","true"),o.className="truncated-message no-results-message",o.textContent=v(s,e,i),t.appendChild(o)}handleClickOutside(t){this.el.contains(t.target)||this.inputElement&&this.inputElement.contains(t.target)||(this.open=!1)}updateHighlightedItem(t,e){t.forEach(((t,i)=>{if(i===e){t.classList.add("highlighted"),t.setAttribute("tabindex","0"),t.scrollIntoView({block:"nearest"});const e=t.querySelector("nv-fieldcheckbox");e&&e.focus()}else t.classList.remove("highlighted"),t.setAttribute("tabindex","-1")}))}focusFirstItem(){const t=this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');if(t){t.setAttribute("tabindex","0"),t.classList.add("highlighted"),t.scrollIntoView({block:"nearest"});const e=t.querySelector("nv-fieldcheckbox");e&&e.focus()}else console.warn("No visible first item found to focus")}manageDivider(t,e,i){let s=t.querySelector("hr.multiselect-divider");s||(s=document.createElement("hr"),s.className="multiselect-divider",t.appendChild(s)),e.length>0&&i.length>0?(e[e.length-1].after(s),s.style.display=""):s.style.display="none"}syncChildComponents(){this.el&&this.el.isConnected&&Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).forEach((t=>{const e=t.getAttribute("value")||t.getAttribute("label")||"",i=(this.value||[]).includes(e);t.checked!==i&&(this.isBulkOperation?(i?t.setAttribute("checked",""):t.removeAttribute("checked"),t.checked=i):t.checked=i)}))}getVisibleEnabledSlotItems(){return Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>{const e="none"===t.style.display,i=t.hasAttribute("disabled");return!e&&!i}))}getVisibleEnabledOptionItems(){return Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>{const e="none"===t.style.display||"true"===t.getAttribute("aria-hidden"),i=t.hasAttribute("disabled")||"true"===t.getAttribute("disabled");return!e&&!i})).map((t=>t.getAttribute("value")||"")).filter((t=>""!==t))}shouldShowToggleAllOptionsButton(){return!!this.options&&this.enableSelectAll&&this.hasFilterResults}getSelectAllCheckboxStateOptions(){if(!this.options)return"unchecked";const t=this.getVisibleEnabledOptionItems();if(0===t.length)return"unchecked";const e=t.filter((t=>(this.value||[]).includes(t)));return 0===e.length?"unchecked":e.length===t.length?"checked":"indeterminate"}getSelectAllCheckboxStateSlots(){if(this.options)return"unchecked";const t=this.getVisibleEnabledSlotItems();if(0===t.length)return"unchecked";const e=t.filter((t=>{const e=t.getAttribute("value")||t.getAttribute("label")||"";return""!==e&&(this.value||[]).includes(e)}));return 0===e.length?"unchecked":e.length===t.length?"checked":"indeterminate"}shouldShowToggleAllSlotButton(){return!this.options&&this.enableSelectAll&&this.hasFilterResults}initializeValueFromSlots(){const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((t=>t.hasAttribute("checked"))).map((t=>t.getAttribute("value")||t.getAttribute("label")||""));this.value=Array.from(new Set([...this.value||[],...t]))}getRequiredAttributes(){const t=this.el.hasAttribute("aria-required")||this.el.hasAttribute("aria-required-attr"),e=t?this.el.getAttribute("aria-required")||this.el.getAttribute("aria-required-attr"):null,i=t?e:null,s=t?"true"===i||""===i:void 0;return{ariaRequiredValue:s,useNativeRequired:this.required&&(!t||!0===s)}}handleOpenChanged(t){this.open!==t.detail&&(this.open=t.detail,this.open?this.filterText&&this.filterItems():(this.filterable&&this.clearFilterText(),this.handlePopoverClose()),this.options?this.reorderOptionsContent():this.reorderSlotContent())}renderDescriptions(){return[(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{class:"description"},o("slot",{name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{hidden:!this.error,class:"error-description"},o("slot",{name:"error-description"},this.errorDescription))]}render(){return this.options?this.renderOptionsMode():this.renderSlotsMode()}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{options:[{handleOptionsChange:0}],value:[{watchValueHandler:0}],open:[{handleOpenChange:0}]}}static get style(){return'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldmultiselect[required]:not([required=false]) label::after,nv-fieldmultiselect[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect{position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}'}},[324,"nv-fieldmultiselect",{label:[513],inputId:[513,"input-id"],name:[513],description:[513],placeholder:[513],autocomplete:[513],required:[516],ariaRequiredAttr:[516,"aria-required"],readonly:[516],disabled:[516],error:[516],errorDescription:[513,"error-description"],maxHeight:[513,"max-height"],open:[1540],fluid:[516],options:[1040],value:[1040],filterable:[516],emptyResult:[513,"empty-result"],debounceDelay:[514,"debounce-delay"],autofocus:[516],badgeLabel:[513,"badge-label"],filterText:[1537,"filter-text"],enableSelectAll:[516,"enable-select-all"],selectAllLabel:[513,"select-all-label"],deselectAllLabel:[513,"deselect-all-label"],filterMode:[513,"filter-mode"],maxResults:[514,"max-results"],startFilterAt:[514,"start-filter-at"],locale:[513],truncatedResultsText:[513,"truncated-results-text"],workerThreshold:[514,"worker-threshold"],fuzzyThreshold:[514,"fuzzy-threshold"],sortedOptions:[32],isHandlingEscape:[32],hasFilterResults:[32],isSelectAllSectionVisible:[32],resultsTruncated:[32],totalResults:[32],isSearching:[32],getFilterText:[64],resetFilter:[64],getSelectedValues:[64],selectAll:[64],deselectAll:[64],toggleSelectAll:[64]},[[0,"itemChecked","handleItemChecked"],[0,"slotchange","handleSlotChange"],[0,"keydown","handleKeyDown"]],{options:[{handleOptionsChange:0}],value:[{watchValueHandler:0}],open:[{handleOpenChange:0}]}]);function z(){"undefined"!=typeof customElements&&["nv-fieldmultiselect","nv-badge","nv-fieldcheckbox","nv-fielddropdownitemcheck","nv-icon","nv-iconbutton","nv-loader","nv-popover"].forEach((e=>{switch(e){case"nv-fieldmultiselect":customElements.get(t(e))||customElements.define(t(e),S);break;case"nv-badge":customElements.get(t(e))||b();break;case"nv-fieldcheckbox":customElements.get(t(e))||g();break;case"nv-fielddropdownitemcheck":customElements.get(t(e))||w();break;case"nv-icon":customElements.get(t(e))||k();break;case"nv-iconbutton":customElements.get(t(e))||y();break;case"nv-loader":customElements.get(t(e))||x();break;case"nv-popover":customElements.get(t(e))||A()}}))}z();const q=S,F=z;export{q as NvFieldmultiselect,F as defineCustomElement}