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

package/dist/components/nv-fielddropdown.js

@@ -1,768 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { F as FUZZY_DEBOUNCE_DELAY, b as buildIndex, g as getEffectiveFilterMode, s as shouldUseWorker, i as isWorkerSupported, S as SearchWorkerClient, c as clampMaxResults, a as search, d as getTruncatedResultsText, f as formatTruncatedResults, e as clampWorkerThreshold } from './p-IlwlcG9l.js';
-import { d as defineCustomElement$6 } from './p-DpDooigg.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 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$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.valueChanged = createEvent(this, "valueChanged", 3);
-        this.filterTextChanged = createEvent(this, "filterTextChanged", 3);
-        this.openChanged = createEvent(this, "openChanged", 3);
-        this.dropdownItemSelected = 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 = 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'
-                ? 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 H &&
-            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 = 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.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 (!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.
-     */
-    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 = 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 = clampWorkerThreshold(this.workerThreshold);
-        const useWorker = 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 = 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 = 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 = 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 || 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 = 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 (h(Host, { key: 'a6f4a91185ad666409fb4fa9e2cc2580506c13f6', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '7ca71ff79f234ceb1dc8d41dc4a53634e2cea7af', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'b5eb4bfdf25c113c5dd817eb51f7fb13279254d6', name: "label" }, this.label))), h("nv-popover", { key: '3eb2ee8885869d39ff5a7c698a973ee9489c7849', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: 'f8242972d005ccb2fb442c1d4e0ef7897ea3a85d', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '125541e0c277e753aee5865ec2e8f95a1d9cbbcc', name: "before-input" }), h("div", { key: 'e3cd1a684cf1c0389073d8e2cd8d64bffe09ede4', class: "input-container" }, h("slot", { key: 'daab53125bfefc34d50386b076a86855a5cc42d4', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (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 })) : (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 && (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 && (h("nv-icon", { key: '19a8983a7fa485aeda81029c4b082552866ca2b8', name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { key: '1e6b1fcb94ee4d658cd20518c11407bd84ac4100', name: "after-input" })), h("div", { key: '3f3cbed73c08ebfcdf51abd0879a43855bfb3023', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (h("ul", { key: 'abeaeef3f99c3a63c5930e2ad79810613d29c0bf' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: 'e9f1cd86ca7ed091df2ea89e60a2dcd061bf974e', name: "content" }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '8a5705537aedbaddc3e50b06baf4866aec45f4d5', class: "description" }, h("slot", { key: '405186007d26c05f5a6664e2824cac7691b244dc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '1b2e942461cb154226ec28b9c05e15df84b616d8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'cbb0c466fd8ecd6b470cdc4107a874a148565cd2', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }; }
-    static get style() { return nvFielddropdownCss; }
-}, [324, "nv-fielddropdown", {
-        "inputId": [513, "input-id"],
-        "name": [513],
-        "label": [513],
-        "description": [513],
-        "placeholder": [513],
-        "autocomplete": [513],
-        "value": [1537],
-        "required": [516],
-        "ariaRequiredAttr": [516, "aria-required"],
-        "readonly": [516],
-        "disabled": [516],
-        "error": [516],
-        "errorDescription": [513, "error-description"],
-        "maxHeight": [513, "max-height"],
-        "emptyResult": [513, "empty-result"],
-        "filterable": [516],
-        "openOnSelect": [516, "open-on-select"],
-        "controlledFilter": [516, "controlled-filter"],
-        "options": [16],
-        "debounceDelay": [514, "debounce-delay"],
-        "autofocus": [516],
-        "fluid": [516],
-        "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"],
-        "filterText": [32],
-        "selectedValues": [32],
-        "open": [32],
-        "resultsTruncated": [32],
-        "totalResults": [32],
-        "isSearching": [32],
-        "clearFilter": [64],
-        "toggleDropdown": [64]
-    }, [[0, "dropdownItemSelected", "handleDropdownItemSelected"], [3, "focus", "handleFocus"], [3, "focusout", "handleFocusOut"], [0, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"]], {
-        "open": ["handleOpenChange"],
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-fielddropdown", "nv-fielddropdownitem", "nv-icon", "nv-iconbutton", "nv-loader", "nv-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-fielddropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvFielddropdown$1);
-            }
-            break;
-        case "nv-fielddropdownitem":
-            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 NvFielddropdown = NvFielddropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvFielddropdown, defineCustomElement };
-//# sourceMappingURL=nv-fielddropdown.js.map
-
-//# sourceMappingURL=nv-fielddropdown.js.map
+import{t as e,p as t,H as i,c as o,h as r,d as n}from"./p-iXsbKJzR.js";import{F as d,b as s,g as a,s as l,i as c,S as h,c as f,a as p,d as u,f as v,e as m}from"./p-IlwlcG9l.js";import{d as b}from"./p-Nf-dwTsx.js";import{d as w}from"./p-Bg-b6OWh.js";import{d as g}from"./p-C6LzzMQm.js";import{d as k}from"./p-tJDdN0lo.js";import{d as y}from"./p-BkqfOhkU.js";import{v as x}from"./p-BdYh22OP.js";const z=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.valueChanged=o(this,"valueChanged",3),this.filterTextChanged=o(this,"filterTextChanged",3),this.openChanged=o(this,"openChanged",3),this.dropdownItemSelected=o(this,"dropdownItemSelected",7),this.indexedItems=[],this.rawItems=[],this.workerClient=null,this.effectiveFilterMode="strict",this.inputId=x(),this.autocomplete="off",this.required=!1,this.ariaRequiredAttr=!1,this.readonly=!1,this.disabled=!1,this.error=!1,this.maxHeight="",this.emptyResult="No results found",this.filterable=!1,this.openOnSelect=!1,this.controlledFilter=!1,this.debounceDelay=300,this.autofocus=!1,this.fluid=!1,this.filterMode="strict",this.maxResults=25,this.startFilterAt=0,this.workerThreshold=2e3,this.fuzzyThreshold=.3,this.filterText="",this.selectedValues=new Set,this.open=!1,this.resultsTruncated=!1,this.totalResults=0,this.isSearching=!1,this.handleClickOutside=e=>{e.target instanceof Node&&(this.el?.contains(e.target)||(this.open=!1))},this.handleFilterInput=()=>{this.open=!0,this.filterText=this.inputElement.value,this.filterTextChanged.emit(this.inputElement.value),clearTimeout(this.debounceTimer),this.debounceTimer=window.setTimeout((()=>{this.filterItems()}),"fuzzy"===this.effectiveFilterMode?d:this.debounceDelay)},this.getSelectedLabel=()=>{if(!this.value)return"";if(this.filterText?.length)return this.filterText;if(this.options?.length>1){const e=this.options.find((e=>e.value===this.value));return e?.label??e?.value??this.value}const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem")).find((e=>e.value===this.value));return e?e.label??e.textContent?.trim()??e.value:""}}handleOpenChange(e){!1===e&&(clearTimeout(this.debounceTimer),setTimeout((()=>{this.clearFilter()}),100))}handleValueChange(){this.updateSelectedItem(),this.open&&this.filterText||this.setFilterInputToSelectedValue()}handleOptionsChange(){this.updateSelectedItem(),this.rebuildSearchIndex()}handleDropdownItemSelected(e){this.disabled||this.readonly||(this.openOnSelect||(this.open=!1),e.detail.detached||(this.getAllItems().forEach((t=>{t!==e.target?t.removeAttribute("selected"):t.setAttribute("selected","true")})),this.value=e.detail.value,this.setFilterInputToSelectedValue(),this.valueChanged.emit(e.detail.value)))}handleFocus(e){e.relatedTarget instanceof i&&e.relatedTarget.tagName.includes("NV-FIELDDROPDOWNITEM")||e.target!=this.toggleElement&&(this.open=!0)}handleFocusOut(e){e.relatedTarget instanceof Node&&(this.el.contains(e.relatedTarget)||(this.open=!1))}handleKeyDown(e){if("Escape"===e.key)return this.focusField(),void(this.open=!1);if(" "===e.key)return void(e.target==this.selectElement&&(e.preventDefault(),this.open=!0));const t=this.getNavigableItems(),i=this.getHighlightedItemIndex(t);if("ArrowDown"===e.key){e.preventDefault(),this.open=!0;const o=i+1;this.updateHighlightedItem(t,o>=t.length?0:o)}if("ArrowUp"===e.key){e.preventDefault(),this.open=!0;const o=i-1;this.updateHighlightedItem(t,o<0?t.length-1:o)}}handleDocumentClick(e){this.handleClickOutside(e)}async clearFilter(){this.filterable&&(this.filterText?.length&&(this.filterText="",this.filterTextChanged.emit(this.filterText)),this.filterItems(),setTimeout((()=>{this.setFilterInputToSelectedValue()}),0))}async toggleDropdown(e){setTimeout(void 0!==e?()=>{this.open=e}:()=>{this.open=!this.open},0)}syncToggleDropdown(){this.open=!this.open}setFilterInputToSelectedValue(){if((this.filterable||this.disabled||this.readonly)&&this.inputElement)return this.value?void(this.inputElement.value=this.getSelectedLabel()):this.inputElement.value=""}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(e){return e.findIndex((e=>e.classList.contains("highlighted")))}updateHighlightedItem(e,t){e.forEach(((e,i)=>{e.classList.remove("highlighted"),i===t&&(e.classList.add("highlighted"),e.focus(),e.scrollIntoView({block:"nearest"}))}))}focusField(){const e=this.el.querySelector('[data-scope="focusable"]');e?.focus()}async rebuildSearchIndex(){const e=this.getFilterableItems();this.rawItems=e.map(((e,t)=>({id:e.value||"item-"+t,label:e.label||e.textContent?.trim()||e.value||""}))),this.options?.length&&this.options.forEach(((e,t)=>{this.rawItems.push({id:e.value||"opt-"+t,label:e.label||e.value||""})})),this.indexedItems=s(this.rawItems),this.effectiveFilterMode=a(this.filterMode);const t=this.rawItems.length,i=m(this.workerThreshold);l(t,this.effectiveFilterMode,i)?await this.initWorker():this.terminateWorker()}async initWorker(){c()&&(this.workerClient||(this.workerClient=new h),await this.workerClient.init(this.rawItems))}terminateWorker(){this.workerClient&&(this.workerClient.terminate(),this.workerClient=null)}async filterItems(){if(this.controlledFilter)return;this.indexedItems.length||await this.rebuildSearchIndex();const e=this.getFilterableItems();if(this.el.querySelectorAll("nv-fielddropdownitem[data-empty], nv-fielddropdownitem[data-truncated]").forEach((e=>e.remove())),this.filterText.length<this.startFilterAt){const t=f(this.maxResults);let i=0;return e.forEach((e=>{i<t?(e.removeAttribute("hidden"),i++):e.setAttribute("hidden","")})),this.resultsTruncated=e.length>t,this.totalResults=e.length,void(this.resultsTruncated&&this.addTruncatedMessage(t,e.length))}const t=this.rawItems.length,i=m(this.workerThreshold);let o;if(l(t,this.effectiveFilterMode,i)&&this.workerClient?.isReady){this.isSearching=!0;try{o=await this.workerClient.search(this.filterText,this.effectiveFilterMode,this.maxResults,this.fuzzyThreshold)}catch(e){console.error("Worker search failed, falling back to main thread:",e),o=p(this.indexedItems,{query:this.filterText,filterMode:this.effectiveFilterMode,maxResults:this.maxResults,startFilterAt:this.startFilterAt,fuzzyThreshold:this.fuzzyThreshold})}finally{this.isSearching=!1}}else o=p(this.indexedItems,{query:this.filterText,filterMode:this.effectiveFilterMode,maxResults:this.maxResults,startFilterAt:this.startFilterAt,fuzzyThreshold:this.fuzzyThreshold});this.resultsTruncated=o.truncated,this.totalResults=o.total,this.applySearchResults(o,e)}applySearchResults(e,t){const i=new Set(e.ids);let o=!1,r=0;const n=f(this.maxResults);if(t.forEach((t=>{const d=t.value||"",s=t.label||t.textContent?.trim()||"";(i.has(d)||e.ids.some((e=>{const t=this.indexedItems.find((t=>t.id===e));return t&&(t.label===s||t.id===d)})))&&r<n?(t.removeAttribute("hidden"),o=!0,r++):t.setAttribute("hidden","")})),o)e.truncated&&this.addTruncatedMessage(e.ids.length,e.total);else{const e=document.createElement("nv-fielddropdownitem");e.setAttribute("data-empty","true"),e.setAttribute("disabled","true"),e.textContent=this.emptyResult,this.el.querySelector('div[slot="content"] ul')?.prepend(e)}}addTruncatedMessage(e,t){const i=this.truncatedResultsText||u(this.locale),o=document.createElement("nv-fielddropdownitem");o.setAttribute("data-truncated","true"),o.setAttribute("disabled","true"),o.setAttribute("detached","true"),o.className="truncated-message",o.textContent=v(i,e,t);const r=this.el.querySelector('div[slot="content"] ul');r&&r.appendChild(o)}async updateSelectedItem(){const e=this.getAllItems();this.value&&e.forEach((e=>{e.selected=e.value===this.value}))}componentDidLoad(){this.updateSelectedItem(),this.setFilterInputToSelectedValue(),this.rebuildSearchIndex()}disconnectedCallback(){clearTimeout(this.debounceTimer),this.terminateWorker()}componentDidRender(){this.filterable||!this.disabled&&!this.readonly||(this.inputElement.value=this.getSelectedLabel())}render(){const e=this.el.hasAttribute("aria-required")||this.el.hasAttribute("aria-required-attr"),t=e?this.el.getAttribute("aria-required")||this.el.getAttribute("aria-required-attr"):null,i=e?t:null,o=e?"true"===i||""===i:void 0,d=this.required&&(!e||!0===o);return r(n,{key:"0915d7a88c89a16adc2d27630b326c4fa426445b",role:"combobox","aria-expanded":""+this.open,"aria-haspopup":"listbox","aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"c4c614d2f0224a8a0fa10e4a12ddb5c7023a54d8",htmlFor:this.inputId,onClick:this.syncToggleDropdown.bind(this)},r("slot",{key:"14b7f31b260e324a57559cd7fc566f8fcfe29c1e",name:"label"},this.label)),r("nv-popover",{key:"bffecd6ae3c0e6a5e5def096fd196d9d078cdee5",triggerMode:"controlled",placement:"bottom-start",open:this.open,onOpenChanged:e=>this.openChanged.emit(e.detail)},r("div",{key:"b2f6dd569d553f61d22b31a96e2020d9a53ecf30",class:"input-wrapper",slot:"trigger"},r("slot",{key:"c1d3c314d3466fafa94d4b7f2bf124a70586ea98",name:"before-input"}),r("div",{key:"6f9a5e8eb390569a85b7d8e811995434fc478a31",class:"input-container"},r("slot",{key:"57c396497f9fb4633b5814ec3e5791fffb4e29fc",name:"leading-input"}),this.filterable||this.disabled||this.readonly?r("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:d?this.required:void 0,...void 0!==o&&{"aria-required":o+""},disabled:this.disabled,readOnly:this.readonly,onInput:this.handleFilterInput}):r("p",{"data-scope":"focusable",id:this.inputId,ref:e=>this.selectElement=e,class:"non-filterable-text",tabIndex:this.disabled?-1:0},this.getSelectedLabel()||this.value||this.placeholder),this.filterable&&this.filterText&&r("nv-iconbutton",{key:"a317de934a5525a0f2fc8da60efb30e6f145e26b",name:"x",size:"md",emphasis:"lower",class:"clear-button",onClick:this.clearFilter.bind(this),"aria-label":"Clear input"}),this.error&&r("nv-icon",{key:"66f875b52c5aad0b3d337495e2b84479c539f40c",name:"alert-circle",class:"validation",size:"md"}),r("nv-iconbutton",{key:"87d05a637e89e2d31621fdaf4da25a0472679790","data-scope":"toggle-dropdown",ref:e=>this.toggleElement=e,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})),r("slot",{key:"709fa474ef044a35a09ea9e03f2c2cb7f8beb499",name:"after-input"})),r("div",{key:"1c0599436e013c853b8d52411812d383095b7339",slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},this.options?.length>0&&r("ul",{key:"7d29e377eb3c90d20a0e8659a4404da0f603ce33"},this.options.map((e=>r("nv-fielddropdownitem",{label:e.label,value:e.value,disabled:e.disabled,selected:e.value===this.value})))),r("slot",{key:"76796c930183e266a8f13dceb70040e9a531bf4b",name:"content"}))),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"5ce379ed837ce4045e29835f452615901a49e765",class:"description"},r("slot",{key:"099b08d109920596d58aee26aa3a1f13ed5c8743",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"f8357878d232e6d28714bcc7f3aa508fd33d4c84",hidden:!this.error,class:"error-description"},r("slot",{key:"3f76cd412d3b8cff001295bc68cc726f166788ab",name:"error-description"},this.errorDescription)))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}],value:[{handleValueChange:0}],options:[{handleOptionsChange: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-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)}'}},[324,"nv-fielddropdown",{inputId:[513,"input-id"],name:[513],label:[513],description:[513],placeholder:[513],autocomplete:[513],value:[1537],required:[516],ariaRequiredAttr:[516,"aria-required"],readonly:[516],disabled:[516],error:[516],errorDescription:[513,"error-description"],maxHeight:[513,"max-height"],emptyResult:[513,"empty-result"],filterable:[516],openOnSelect:[516,"open-on-select"],controlledFilter:[516,"controlled-filter"],options:[16],debounceDelay:[514,"debounce-delay"],autofocus:[516],fluid:[516],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"],filterText:[32],selectedValues:[32],open:[32],resultsTruncated:[32],totalResults:[32],isSearching:[32],clearFilter:[64],toggleDropdown:[64]},[[0,"dropdownItemSelected","handleDropdownItemSelected"],[3,"focus","handleFocus"],[3,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"],[4,"click","handleDocumentClick"]],{open:[{handleOpenChange:0}],value:[{handleValueChange:0}],options:[{handleOptionsChange:0}]}]);function C(){"undefined"!=typeof customElements&&["nv-fielddropdown","nv-fielddropdownitem","nv-icon","nv-iconbutton","nv-loader","nv-popover"].forEach((t=>{switch(t){case"nv-fielddropdown":customElements.get(e(t))||customElements.define(e(t),z);break;case"nv-fielddropdownitem":customElements.get(e(t))||b();break;case"nv-icon":customElements.get(e(t))||w();break;case"nv-iconbutton":customElements.get(e(t))||g();break;case"nv-loader":customElements.get(e(t))||k();break;case"nv-popover":customElements.get(e(t))||y()}}))}C();const I=z,T=C;export{I as NvFielddropdown,T as defineCustomElement}