@nova-design-system/nova-react 3.22.0 → 3.24.0

package/dist/cjs/nv-fielddropdown.entry-BA15piWa.js

@@ -0,0 +1,678 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+var i18n_utilsIlwlcG9l = require('./i18n.utils-IlwlcG9l-ku0bScip.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvFielddropdownCss = "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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after,nv-fielddropdown[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown 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-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{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-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container: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-fielddropdown .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container{position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container 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-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container 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-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container p.non-filterable-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;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-fielddropdown .input-container p.non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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-fielddropdown .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)}";
+
+const NvFielddropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        this.filterTextChanged = index.createEvent(this, "filterTextChanged", 3);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 3);
+        /** 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';
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4BdYh22OP.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, ensuring that the user must fill it out
+         * before submitting the form.
+         * @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.
+         * Users can still click on it, select, and copy the text, but they won't be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * The disabled prop lets you turn off the input field so that users can't
+         * type in it. When disabled, the field is grayed out and won't respond to
+         * clicks or touches.
+         */
+        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 = '';
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyResult = 'No results found';
+        /**
+         * Enables or disables the filtering feature for the dropdown items.
+         */
+        this.filterable = false;
+        /**
+         * When an item is selected by the user, the dropdown will continue to stay
+         * open.
+         */
+        this.openOnSelect = false;
+        /**
+         * Determines if the component’s filtering behavior is managed externally.
+         * When set to true and filterable is enabled, the component won’t
+         * automatically filter items. Instead, you must implement your own filtering
+         * logic (e.g., server-side search or custom matching) using the
+         * filterTextChanged event.
+         */
+        this.controlledFilter = false;
+        /**
+         * 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;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        /**
+         * Filter mode for dropdown 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
+        /**
+         * The text entered by the user for filtering dropdown items.
+         */
+        this.filterText = '';
+        this.selectedValues = new Set();
+        this.open = false;
+        /**
+         * 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 (shows loading indicator).
+         */
+        this.isSearching = false;
+        /**
+         * Closes the popover when a click is detected outside the component.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleClickOutside = (event) => {
+            if (!(event.target instanceof Node))
+                return;
+            if (!this.el?.contains(event.target))
+                this.open = false;
+        };
+        this.handleFilterInput = () => {
+            this.open = true;
+            this.filterText = this.inputElement.value;
+            this.filterTextChanged.emit(this.inputElement.value);
+            clearTimeout(this.debounceTimer);
+            // Use longer debounce for fuzzy mode (Fuse.js needs more time)
+            // For fuzzy mode, use FUZZY_DEBOUNCE_DELAY (300ms), otherwise use this.debounceDelay
+            const debounce = this.effectiveFilterMode === 'fuzzy'
+                ? i18n_utilsIlwlcG9l.FUZZY_DEBOUNCE_DELAY
+                : this.debounceDelay;
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterItems();
+            }, debounce);
+        };
+        this.getSelectedLabel = () => {
+            if (!this.value)
+                return '';
+            if (this.filterText?.length)
+                return this.filterText;
+            if (this.options?.length > 1) {
+                const matchingItem = this.options.find(option => option.value === this.value);
+                return matchingItem?.label ?? matchingItem?.value ?? this.value;
+            }
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+            const matchingItem = items.find(item => item.value === this.value);
+            const selectedLabel = matchingItem
+                ? matchingItem.label ??
+                    matchingItem.textContent?.trim() ??
+                    matchingItem.value
+                : '';
+            return selectedLabel;
+        };
+    }
+    /* eslint-enable nova/event-bubbling */
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleOpenChange(newOpen) {
+        if (newOpen === false) {
+            clearTimeout(this.debounceTimer);
+            setTimeout(() => {
+                this.clearFilter();
+            }, 100);
+        }
+    }
+    handleValueChange() {
+        this.updateSelectedItem();
+        if (!this.open || !this.filterText)
+            this.setFilterInputToSelectedValue();
+    }
+    handleOptionsChange() {
+        this.updateSelectedItem();
+        this.rebuildSearchIndex();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    /* eslint-disable nova/native-event-listener */
+    handleDropdownItemSelected(event) {
+        event.stopPropagation();
+        if (this.disabled || this.readonly)
+            return;
+        if (!this.openOnSelect)
+            this.open = false;
+        if (event.detail.detached)
+            return;
+        const items = this.getAllItems();
+        items.forEach(item => {
+            if (item !== event.target) {
+                item.removeAttribute('selected');
+            }
+            else {
+                item.setAttribute('selected', 'true');
+            }
+        });
+        this.value = event.detail.value;
+        this.setFilterInputToSelectedValue();
+        this.valueChanged.emit(event.detail.value);
+    }
+    /* eslint-enable nova/native-event-listener */
+    handleFocus(event) {
+        if (event.relatedTarget instanceof HTMLElement &&
+            event.relatedTarget.tagName.includes('NV-FIELDDROPDOWNITEM')) {
+            return;
+        }
+        if (event.target != this.toggleElement)
+            this.open = true;
+    }
+    handleFocusOut(event) {
+        if (!(event.relatedTarget instanceof Node))
+            return;
+        if (this.el.contains(event.relatedTarget))
+            return;
+        this.open = false;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.focusField();
+            this.open = false;
+            return;
+        }
+        if (event.key === ' ') {
+            if (event.target == this.selectElement) {
+                event.preventDefault(); // Prevent scrolling down
+                this.open = true;
+            }
+            return;
+        }
+        const items = this.getNavigableItems();
+        const highlightedItem = this.getHighlightedItemIndex(items);
+        if (event.key === 'ArrowDown') {
+            event.preventDefault(); // Prevent scrolling down
+            this.open = true;
+            const nextIndex = highlightedItem + 1;
+            this.updateHighlightedItem(items, nextIndex >= items.length ? 0 : nextIndex);
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault(); // Prevent scrolling up
+            this.open = true;
+            const nextIndex = highlightedItem - 1;
+            this.updateHighlightedItem(items, nextIndex < 0 ? items.length - 1 : nextIndex);
+        }
+    }
+    handleDocumentClick(event) {
+        this.handleClickOutside(event);
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region METHODS
+    /** Clears the filter text */
+    async clearFilter() {
+        if (!this.filterable)
+            return;
+        if (this.filterText?.length) {
+            this.filterText = '';
+            this.filterTextChanged.emit(this.filterText);
+        }
+        this.filterItems();
+        // Wait for wrapper lifecycle to finish
+        setTimeout(() => {
+            this.setFilterInputToSelectedValue();
+        }, 0);
+    }
+    /**
+     * Toggles the dropdown popover open state
+     * @param {boolean} open - The open state to set, if null, toggles the state
+     */
+    async toggleDropdown(open) {
+        if (open !== undefined) {
+            setTimeout(() => {
+                this.open = open;
+            }, 0);
+        }
+        else {
+            setTimeout(() => {
+                this.open = !this.open;
+            }, 0);
+        }
+    }
+    syncToggleDropdown() {
+        this.open = !this.open;
+    }
+    setFilterInputToSelectedValue() {
+        if (!this.filterable && !this.disabled && !this.readonly)
+            return;
+        if (!this.inputElement)
+            return;
+        if (!this.value)
+            return (this.inputElement.value = '');
+        this.inputElement.value = this.getSelectedLabel();
+    }
+    // Will exclude detached items and data-empty
+    getFilterableItems() {
+        return Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty]):not([detached])'));
+    }
+    getNavigableItems() {
+        return Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([disabled]):not([hidden])'));
+    }
+    getAllItems() {
+        return Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+    }
+    getHighlightedItemIndex(items) {
+        return items.findIndex(item => item.classList.contains('highlighted'));
+    }
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            item.classList.remove('highlighted');
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.focus();
+                item.scrollIntoView({ block: 'nearest' });
+            }
+        });
+    }
+    focusField() {
+        const focusableItem = this.el.querySelector('[data-scope="focusable"]');
+        focusableItem?.focus();
+    }
+    /**
+     * Rebuilds the search index from current items (options prop or slot items).
+     */
+    async rebuildSearchIndex() {
+        const items = this.getFilterableItems();
+        // Build raw items array for indexing
+        this.rawItems = items.map((item, index) => ({
+            id: item.value || `item-${index}`,
+            label: item.label || item.textContent?.trim() || item.value || '',
+        }));
+        // Also include options prop items if present
+        if (this.options?.length) {
+            this.options.forEach((opt, index) => {
+                this.rawItems.push({
+                    id: opt.value || `opt-${index}`,
+                    label: opt.label || opt.value || '',
+                });
+            });
+        }
+        // Build local index for main-thread search
+        this.indexedItems = i18n_utilsIlwlcG9l.buildIndex(this.rawItems);
+        // Determine effective filter mode
+        this.effectiveFilterMode = i18n_utilsIlwlcG9l.getEffectiveFilterMode(this.filterMode);
+        // Initialize worker if needed
+        const itemCount = this.rawItems.length;
+        const threshold = i18n_utilsIlwlcG9l.clampWorkerThreshold(this.workerThreshold);
+        if (i18n_utilsIlwlcG9l.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold)) {
+            await this.initWorker();
+        }
+        else {
+            // Clean up worker if no longer needed
+            this.terminateWorker();
+        }
+    }
+    /**
+     * 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 initWorker() {
+        if (!i18n_utilsIlwlcG9l.isWorkerSupported()) {
+            // Workers not supported - will use main thread (fuzzy still works with Fuse.js)
+            return;
+        }
+        if (!this.workerClient) {
+            this.workerClient = new i18n_utilsIlwlcG9l.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.
+     */
+    terminateWorker() {
+        if (this.workerClient) {
+            this.workerClient.terminate();
+            this.workerClient = null;
+        }
+    }
+    /**
+     * Filter dropdown items based on the text entered by the user.
+     * Uses the search engine for optimized filtering with configurable modes.
+     * If no items are found, display a message indicating no results.
+     */
+    async filterItems() {
+        if (this.controlledFilter)
+            return;
+        // Ensure index is built
+        if (!this.indexedItems.length) {
+            await this.rebuildSearchIndex();
+        }
+        const items = this.getFilterableItems();
+        // Remove any existing "no results found" or "truncated" items
+        this.el
+            .querySelectorAll('nv-fielddropdownitem[data-empty], nv-fielddropdownitem[data-truncated]')
+            .forEach(item => item.remove());
+        // Check if we should start filtering
+        if (this.filterText.length < this.startFilterAt) {
+            // Show all items up to maxResults
+            const effectiveMaxResults = i18n_utilsIlwlcG9l.clampMaxResults(this.maxResults);
+            let visibleCount = 0;
+            items.forEach(item => {
+                if (visibleCount < effectiveMaxResults) {
+                    item.removeAttribute('hidden');
+                    visibleCount++;
+                }
+                else {
+                    item.setAttribute('hidden', '');
+                }
+            });
+            this.resultsTruncated = items.length > effectiveMaxResults;
+            this.totalResults = items.length;
+            if (this.resultsTruncated) {
+                this.addTruncatedMessage(effectiveMaxResults, items.length);
+            }
+            return;
+        }
+        // Determine if we should use worker
+        const itemCount = this.rawItems.length;
+        const threshold = i18n_utilsIlwlcG9l.clampWorkerThreshold(this.workerThreshold);
+        const useWorker = i18n_utilsIlwlcG9l.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold);
+        let result;
+        if (useWorker && this.workerClient?.isReady) {
+            // Use worker for search
+            this.isSearching = true;
+            try {
+                result = await this.workerClient.search(this.filterText, this.effectiveFilterMode, this.maxResults, this.fuzzyThreshold);
+            }
+            catch (error) {
+                console.error('Worker search failed, falling back to main thread:', error);
+                // Fall back to main thread search (now supports fuzzy with Fuse.js)
+                result = i18n_utilsIlwlcG9l.search(this.indexedItems, {
+                    query: this.filterText,
+                    filterMode: this.effectiveFilterMode,
+                    maxResults: this.maxResults,
+                    startFilterAt: this.startFilterAt,
+                    fuzzyThreshold: this.fuzzyThreshold,
+                });
+            }
+            finally {
+                this.isSearching = false;
+            }
+        }
+        else {
+            // Use main thread search (now supports fuzzy mode with Fuse.js)
+            result = i18n_utilsIlwlcG9l.search(this.indexedItems, {
+                query: this.filterText,
+                filterMode: this.effectiveFilterMode,
+                maxResults: this.maxResults,
+                startFilterAt: this.startFilterAt,
+                fuzzyThreshold: this.fuzzyThreshold,
+            });
+        }
+        this.resultsTruncated = result.truncated;
+        this.totalResults = result.total;
+        // Apply results to DOM
+        this.applySearchResults(result, items);
+    }
+    /**
+     * Applies search results to the DOM, showing/hiding items as needed.
+     * @param {SearchResult} result - The search result.
+     * @param {HTMLNvFielddropdownitemElement[]} items - The items to apply the search results to.
+     * @example
+     * const result: SearchResult = {
+     *   ids: ['item-1', 'item-2'],
+     *   total: 2,
+     *   truncated: false,
+     * };
+     * const items = Array.from(
+     *   this.el.querySelectorAll('nv-fielddropdownitem'),
+     * ) as HTMLNvFielddropdownitemElement[];
+     * this.applySearchResults(result, items);
+     * // Matching items are shown, non-matching items are hidden.
+     * // If no items match, a "no results" item is prepended to the list.
+     */
+    applySearchResults(result, items) {
+        // Create a Set of matching IDs for fast lookup
+        const matchingIds = new Set(result.ids);
+        let hasVisibleItems = false;
+        let visibleCount = 0;
+        const effectiveMaxResults = i18n_utilsIlwlcG9l.clampMaxResults(this.maxResults);
+        items.forEach(item => {
+            const itemId = item.value || '';
+            const itemLabel = item.label || item.textContent?.trim() || '';
+            // Check if this item matches (by ID or by re-running search on label)
+            const isMatch = matchingIds.has(itemId) ||
+                result.ids.some(id => {
+                    const indexed = this.indexedItems.find(i => i.id === id);
+                    return (indexed && (indexed.label === itemLabel || indexed.id === itemId));
+                });
+            if (isMatch && visibleCount < effectiveMaxResults) {
+                item.removeAttribute('hidden');
+                hasVisibleItems = true;
+                visibleCount++;
+            }
+            else {
+                item.setAttribute('hidden', '');
+            }
+        });
+        // If no items are visible, add the "no results found" item
+        if (!hasVisibleItems) {
+            const emptyItem = document.createElement('nv-fielddropdownitem');
+            emptyItem.setAttribute('data-empty', 'true');
+            emptyItem.setAttribute('disabled', 'true');
+            emptyItem.textContent = this.emptyResult;
+            this.el.querySelector('div[slot="content"] ul')?.prepend(emptyItem);
+        }
+        else if (result.truncated) {
+            // Add truncation message if results were limited
+            this.addTruncatedMessage(result.ids.length, result.total);
+        }
+    }
+    /**
+     * Adds a non-selectable item showing truncation info.
+     * @param {number} shown - The number of items shown.
+     * @param {number} total - The total number of items.
+     * @example
+     * // Show a truncation message like "10 of 100 results".
+     * this.addTruncatedMessage(10, 100);
+     */
+    addTruncatedMessage(shown, total) {
+        // Get the text template: use provided text or auto-detect from locale
+        const textTemplate = this.truncatedResultsText || i18n_utilsIlwlcG9l.getTruncatedResultsText(this.locale);
+        const truncatedItem = document.createElement('nv-fielddropdownitem');
+        truncatedItem.setAttribute('data-truncated', 'true');
+        truncatedItem.setAttribute('disabled', 'true');
+        truncatedItem.setAttribute('detached', 'true');
+        truncatedItem.className = 'truncated-message';
+        truncatedItem.textContent = i18n_utilsIlwlcG9l.formatTruncatedResults(textTemplate, shown, total);
+        const ul = this.el.querySelector('div[slot="content"] ul');
+        if (ul) {
+            ul.appendChild(truncatedItem);
+        }
+    }
+    async updateSelectedItem() {
+        const items = this.getAllItems();
+        if (this.value) {
+            items.forEach(item => {
+                if (item.value === this.value) {
+                    item.selected = true;
+                }
+                else {
+                    item.selected = false;
+                }
+            });
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        this.updateSelectedItem();
+        this.setFilterInputToSelectedValue();
+        // Build the search index on load
+        this.rebuildSearchIndex();
+    }
+    disconnectedCallback() {
+        clearTimeout(this.debounceTimer);
+        this.terminateWorker();
+    }
+    componentDidRender() {
+        // Make sure to show the value when the field is disabled or readonly
+        // as we switch to an input instead of a p in that case
+        if (!this.filterable && (this.disabled || this.readonly)) {
+            this.inputElement.value = this.getSelectedLabel();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        // 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 (index.h(index.Host, { key: 'a6f4a91185ad666409fb4fa9e2cc2580506c13f6', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7ca71ff79f234ceb1dc8d41dc4a53634e2cea7af', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: 'b5eb4bfdf25c113c5dd817eb51f7fb13279254d6', name: "label" }, this.label))), index.h("nv-popover", { key: '3eb2ee8885869d39ff5a7c698a973ee9489c7849', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: 'f8242972d005ccb2fb442c1d4e0ef7897ea3a85d', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '125541e0c277e753aee5865ec2e8f95a1d9cbbcc', name: "before-input" }), index.h("div", { key: 'e3cd1a684cf1c0389073d8e2cd8d64bffe09ede4', class: "input-container" }, index.h("slot", { key: 'daab53125bfefc34d50386b076a86855a5cc42d4', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (index.h("nv-iconbutton", { key: '0f46ff14f2627929fea9728efa1009f27eab2596', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '19a8983a7fa485aeda81029c4b082552866ca2b8', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '6cc2ef2c986b71b1f542badccf2202c6737778a9', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '1e6b1fcb94ee4d658cd20518c11407bd84ac4100', name: "after-input" })), index.h("div", { key: '3f3cbed73c08ebfcdf51abd0879a43855bfb3023', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (index.h("ul", { key: 'abeaeef3f99c3a63c5930e2ad79810613d29c0bf' }, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), index.h("slot", { key: 'e9f1cd86ca7ed091df2ea89e60a2dcd061bf974e', name: "content" }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8a5705537aedbaddc3e50b06baf4866aec45f4d5', class: "description" }, index.h("slot", { key: '405186007d26c05f5a6664e2824cac7691b244dc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '1b2e942461cb154226ec28b9c05e15df84b616d8', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'cbb0c466fd8ecd6b470cdc4107a874a148565cd2', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+};
+NvFielddropdown.style = nvFielddropdownCss;
+
+exports.nv_fielddropdown = NvFielddropdown;