@nova-design-system/nova-webcomponents 3.18.0 → 3.19.0

package/dist/components/nv-fielddropdown.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5829b9f7.js';
-import { d as defineCustomElement$6 } from './p-5e315239.js';
-import { d as defineCustomElement$5 } from './p-ed43bcec.js';
-import { d as defineCustomElement$4 } from './p-6ca3d847.js';
-import { d as defineCustomElement$3 } from './p-c981bb48.js';
-import { d as defineCustomElement$2 } from './p-ebfecbaa.js';
+import { d as defineCustomElement$6 } from './p-45a3cf85.js';
+import { d as defineCustomElement$5 } from './p-946a047c.js';
+import { d as defineCustomElement$4 } from './p-5a5db065.js';
+import { d as defineCustomElement$3 } from './p-222136c2.js';
+import { d as defineCustomElement$2 } from './p-4799b6c3.js';
 import { v as v4 } from './p-f5ff676c.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{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]{width:100%;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]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}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 .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;position:relative;width:100%;min-height:40px}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){opacity:0.5;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 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:var(--form-field-padding-y) 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[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>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 .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}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)}";
@@ -14,6 +14,8 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
         super();
         this.__registerHost();
         this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
+        this.openChanged = createEvent(this, "openChanged", 7);
         this.dropdownItemSelected = createEvent(this, "dropdownItemSelected", 7);
         /****************************************************************************/
         //#region PROPERTIES
@@ -58,10 +60,6 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
          * Defines the maximum height of the multiselect list when open.
          */
         this.maxHeight = '';
-        /**
-         * State of the dropdown popover.
-         */
-        this.open = false;
         /**
          * The text to display when no items match the filter.
          */
@@ -71,7 +69,21 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
          */
         this.filterable = false;
         /**
-         * Delay in milliseconds before the search is triggered when typing in the filter input.
+         * 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;
@@ -93,132 +105,75 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
          */
         this.filterText = '';
         this.selectedValues = new Set();
-        this.handleInputContainerClick = (event) => {
-            if (this.disabled || this.readonly) {
+        this.open = false;
+        /**
+         * Closes the popover when a click is detected outside the component.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleClickOutside = (event) => {
+            var _a;
+            if (!(event.target instanceof Node))
                 return;
-            }
-            const target = event.target;
-            if (target.tagName === 'P' || target.tagName === 'SPAN') {
-                this.open = true;
-                // Simulate focus to trigger "focus-within" style
-                const inputContainer = this.el.querySelector('.input-container');
-                if (inputContainer) {
-                    inputContainer.classList.add('focus-within');
-                    // Remove the "focus-within" class after a delay or when the popover is closed
-                    const removeFocusWithin = () => {
-                        inputContainer.classList.remove('focus-within');
-                    };
-                    // Or remove the class when the popover is closed
-                    this.popoverElement.addEventListener('hide', removeFocusWithin);
-                }
-            }
+            if (!((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+                this.open = false;
         };
-        this.handleInput = (event) => {
-            if (!this.filterable)
-                return;
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            const input = event.target;
+        this.handleFilterInput = () => {
             this.open = true;
-            // Clear any existing timer
-            if (this.debounceTimer) {
-                window.clearTimeout(this.debounceTimer);
-            }
-            // Set a new timer for filtering
+            this.filterText = this.inputElement.value;
+            this.filterTextChanged.emit(this.inputElement.value);
+            clearTimeout(this.debounceTimer);
             this.debounceTimer = window.setTimeout(() => {
-                this.filterText = input.value.toLowerCase();
                 this.filterItems();
             }, this.debounceDelay);
         };
-        this.handleInputFocus = () => {
-            if (this.disabled || this.readonly)
-                return;
-            this.open = true;
-        };
-        this.togglePopover = () => {
-            if (this.disabled || this.readonly)
-                return;
-            this.open = !this.open;
-        };
         this.getSelectedLabel = () => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (!this.value)
                 return '';
-            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            if ((_a = this.filterText) === null || _a === void 0 ? void 0 : _a.length)
+                return this.filterText;
+            if (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) > 1) {
                 const matchingItem = this.options.find(option => option.value === this.value);
-                return (_c = (_b = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _b !== void 0 ? _b : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _c !== void 0 ? _c : this.value;
+                return (_d = (_c = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _c !== void 0 ? _c : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _d !== void 0 ? _d : this.value;
             }
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
             const matchingItem = items.find(item => item.value === this.value);
             const selectedLabel = matchingItem
-                ? (_f = (_d = matchingItem.label) !== null && _d !== void 0 ? _d : (_e = matchingItem.textContent) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : matchingItem.value
+                ? (_g = (_e = matchingItem.label) !== null && _e !== void 0 ? _e : (_f = matchingItem.textContent) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : matchingItem.value
                 : '';
             return selectedLabel;
         };
-        this.clearFilter = () => {
-            if (!this.filterable)
-                return;
-            this.filterText = '';
-            this.inputElement.value = this.getSelectedLabel();
-            this.inputElement.focus();
-            this.filterItems();
-        };
-        this.handleBlurInput = (event) => {
-            var _a;
-            const relatedTarget = event.relatedTarget;
-            if (!this.el.contains(relatedTarget) &&
-                !((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))) {
-                this.open = false;
-                if (this.filterable) {
-                    this.clearFilter(); // Resets input to selected label, clears filterText
-                }
-            }
-        };
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
-    handleOptionsChange(newValue) {
-        var _a;
-        if (!newValue)
-            return;
-        if (!this.value) {
-            const defaultValue = newValue.find(option => option.selected);
-            this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
-            this.updateSelectedItem(this.value);
+    handleOpenChange(newOpen) {
+        if (newOpen === false) {
+            clearTimeout(this.debounceTimer);
+            setTimeout(() => {
+                this.clearFilter();
+            }, 100);
         }
     }
-    watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
+    handleValueChange() {
+        this.updateSelectedItem();
+        if (!this.open || !this.filterText)
+            this.setFilterInputToSelectedValue();
     }
-    handleOpenChange(newOpen) {
-        // React to external changes, e.g., clear filter or refilter on open
-        if (newOpen && this.filterable) {
-            this.filterItems(); // Ensure items are filtered if filterText exists
-        }
-        else if (!newOpen) {
-            this.clearFilter(); // Clear on external close
-        }
+    handleOptionsChange() {
+        this.updateSelectedItem();
     }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LISTENERS
-    handleOpenChanged(event) {
-        // Stop propagation to prevent the event from affecting parent components like dialogs
-        event.stopPropagation();
-        // Update `open` based on the popover state
-        if (event.target === this.popoverElement) {
-            this.open = event.detail;
-        }
-        if (!event.detail && this.filterable) {
-            this.clearFilter();
-        }
-    }
     handleDropdownItemSelected(event) {
         if (this.disabled || this.readonly)
             return;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        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');
@@ -227,102 +182,147 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
                 item.setAttribute('selected', 'true');
             }
         });
-        this.clearFilter();
         this.value = event.detail.value;
-        this.open = false;
+        this.setFilterInputToSelectedValue();
+        this.valueChanged.emit(event.detail.value);
     }
-    handleBlur(event) {
-        const target = event.relatedTarget;
-        if (!(target instanceof Node) || !this.el.contains(target)) {
-            this.open = false;
-            if (this.inputElement) {
-                this.filterText = '';
-                this.inputElement.value = this.getSelectedLabel();
-                setTimeout(() => {
-                    this.filterItems();
-                }, 200);
-            }
+    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 (!this.el)
+        if (event.key === 'Escape') {
+            this.focusField();
+            this.open = false;
             return;
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
+        }
+        if (event.key === ' ') {
+            if (event.target == this.selectElement) {
+                event.preventDefault(); // Prevent scrolling down
                 this.open = true;
-                event.preventDefault();
-                return;
             }
             return;
         }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([disabled]):not([hidden])'));
-        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        const items = this.getNavigableItems();
+        const highlightedItem = this.getHighlightedItemIndex(items);
         if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            currentIndex = (currentIndex + 1) % items.length;
-            this.updateHighlightedItem(items, currentIndex);
-        }
-        else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            currentIndex = (currentIndex - 1 + items.length) % items.length;
-            this.updateHighlightedItem(items, currentIndex);
+            event.preventDefault(); // Prevent scrolling down
+            this.open = true;
+            const nextIndex = highlightedItem + 1;
+            this.updateHighlightedItem(items, nextIndex >= items.length ? 0 : nextIndex);
         }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            this.open = false;
+        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 LIFECYCLE
-    componentWillLoad() {
-        this.resetFilter();
-        if (this.filterable && this.filterText) {
-            this.filterItems();
-        }
-        if (this.options) {
-            this.handleOptionsChange(this.options);
+    //#region METHODS
+    /** Clears the filter text */
+    async clearFilter() {
+        var _a;
+        if (!this.filterable)
+            return;
+        if ((_a = this.filterText) === null || _a === void 0 ? void 0 : _a.length) {
+            this.filterText = '';
+            this.filterTextChanged.emit(this.filterText);
         }
+        this.filterItems();
+        // Wait for wrapper lifecycle to finish
+        setTimeout(() => {
+            this.setFilterInputToSelectedValue();
+        }, 0);
     }
-    componentDidLoad() {
-        if (this.value) {
-            this.updateSelectedItem(this.value);
+    /**
+     * 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);
         }
-        if (this.inputElement) {
-            this.inputElement.value = this.getSelectedLabel();
+        else {
+            setTimeout(() => {
+                this.open = !this.open;
+            }, 0);
         }
     }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Retrieves the current filter text entered by the user.
-     * @returns {string} The filter text.
-     */
-    async getFilterText() {
-        return this.filterText;
+    syncToggleDropdown() {
+        this.open = !this.open;
+    }
+    setFilterInputToSelectedValue() {
+        if (!this.filterable)
+            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 === null || focusableItem === void 0 ? void 0 : focusableItem.focus();
     }
     /**
      * Filter dropdown items based on the text entered by the user.
      * If no items are found, display a message indicating no results.
      */
     filterItems() {
-        var _a;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        // Remove the "no results found" item if it exists
-        const existingEmptyItem = this.el.querySelector('nv-fielddropdownitem[data-empty]');
-        if (existingEmptyItem) {
-            existingEmptyItem.remove();
-        }
+        var _a, _b;
+        if (this.controlledFilter)
+            return;
         let hasVisibleItems = false;
-        // Iterate over all items and adjust their visibility
+        const items = this.getFilterableItems();
+        // Remove the "no results found" item if it exists
+        (_a = this.el
+            .querySelector('nv-fielddropdownitem[data-empty]')) === null || _a === void 0 ? void 0 : _a.remove();
         items.forEach(item => {
             var _a, _b;
-            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ''; // Get the textual content of the slot
-            const value = ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || ''; // Get the value of the `value` attribute
-            // Check if the filtered text is present either in the value or in the textual content
-            const shouldShow = value.includes(this.filterText) ||
-                textContent.includes(this.filterText);
+            const filterText = this.filterText.toLowerCase();
+            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+            const value = ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '';
+            // Either in the value or in the textual content
+            const shouldShow = value.includes(filterText) || textContent.includes(filterText);
             if (shouldShow)
                 item.removeAttribute('hidden');
             else
@@ -337,63 +337,47 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
             emptyItem.setAttribute('data-empty', 'true');
             emptyItem.setAttribute('disabled', 'true');
             emptyItem.textContent = this.emptyResult;
-            (_a = this.el.querySelector('ul[slot="content"]')) === null || _a === void 0 ? void 0 : _a.appendChild(emptyItem);
+            (_b = this.el.querySelector('div[slot="content"] ul')) === null || _b === void 0 ? void 0 : _b.prepend(emptyItem);
         }
     }
-    /** Reset the filter and make all items visible. */
-    resetFilter() {
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        items.forEach(item => {
-            item.style.display = '';
-        });
+    async updateSelectedItem() {
+        const items = this.getAllItems();
+        if (this.value) {
+            items.forEach(item => {
+                if (item.value === this.value) {
+                    item.selected = true;
+                }
+                else {
+                    item.selected = false;
+                }
+            });
+        }
     }
-    updateHighlightedItem(items, index) {
-        items.forEach((item, i) => {
-            if (i === index) {
-                item.classList.add('highlighted');
-                item.focus();
-                item.scrollIntoView({ block: 'nearest' });
-            }
-            else {
-                item.classList.remove('highlighted');
-            }
-        });
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        this.updateSelectedItem();
+        this.setFilterInputToSelectedValue();
     }
-    updateSelectedItem(value) {
-        if (!value)
-            return;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        const matchingItem = items.find(item => {
-            var _a;
-            const itemLabel = item.getAttribute('label');
-            const itemValue = item.getAttribute('value');
-            const itemText = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-            return itemLabel === value || itemValue === value || itemText === value;
-        });
-        items.forEach(item => {
-            if (item === matchingItem) {
-                item.setAttribute('selected', '');
-            }
-            else {
-                item.removeAttribute('selected');
-            }
-        });
+    disconnectedCallback() {
+        clearTimeout(this.debounceTimer);
     }
-    //#endregion METHODS
+    //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
         var _a;
-        return (h(Host, { key: '1d5a87b2a5e9d9ca0be659ba5706b1db068d1d2d', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'b07ca241c89f45292e479de79de618c6444a9c42', htmlFor: this.inputId }, h("slot", { key: '0dd6ac2799e187e7233a5a5651ef18d59e4507e8', name: "label" }, this.label))), h("nv-popover", { key: 'b06d107776724937816dc4b98a035b282ed6c1f3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'ab755801a0f2a732ea895e04d6c3a85261422f17', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'b78c41d4064cf067d69fa20ae583c1be29d1f620', name: "before-input" }), h("div", { key: 'b46f6440660056ff71b9debf503f15ca7046ca02', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '36069ce529fba771c9339a3cb6c9c5c838f441c4', 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, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown, onBlur: this.handleBlurInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus, onBlur: this.handleBlurInput }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (h("nv-iconbutton", { key: '36f76135c0e3e1e6750c95116aae6ddd397eec1f', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: 'bd73c43ffae11897359adfae69572ee490f0f5c2', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'a0f237814e9f58aa9e4d72e73a1747248911ade8', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '66d2b27cfcf7ef97df493accaa333e0694234344', name: "after-input" })), h("div", { key: 'de6d7e18d676788cf0c7bfebd25f22b5cd2067ce', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("ul", null, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (h("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ea889c8ecdcfad160010374541b73f548322a0ad', class: "description" }, h("slot", { key: 'b69f67d3a03bf1839edd912ea369cfd87395ae51', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6ecd397cb41aab81173992c90e42f593f1227730', hidden: !this.error, class: "error-description" }, h("slot", { key: '3dff83b119d3cbbf2d00bc8641882326d08f939d', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '428dd85337710d430ac04cf8cbc9021a93307bfe', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a527c33d31152a90f8641e27fbaf91cf73eb06b6', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'e4cf96c38db69080228666e4b924367a0c3a9d72', name: "label" }, this.label))), h("nv-popover", { key: '41723f7ec67e4e5680381e217eba45a1d73b47fc', triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'd4af00d5171b09923c36df9fd44853e1399e584f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'bb6e53746c70fcc8172acd9a7ef8cbf72ae70698', name: "before-input" }), h("div", { key: 'ef3dc9ac5d0d895384653a17f8e61f616a7cbba9', class: "input-container" }, h("slot", { key: '7621b8cb7222330e73a426282877df2e0040714c', 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: this.required, 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: '3de283e59d0c7811b39e30d98fdd7e400a1b3d49', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '6f826edb19430ce535dc8742dfbd77b05d673f4d', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '611f8df410c38faeb9fec9a43ac1f7013ce9b32b', "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: '18d16b6c1d3c1ab910f8a45a339ae750e2277542', name: "after-input" })), h("div", { key: '53624675adac2c6c9345b64e634cbbad4f009a82', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("ul", { key: '3dfd5e914176bab898fd7872eb4ea0206d12b80a' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: 'e1c9151e125d0fe6f129b879b0adf1ae91b94bc4', name: "content" }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '13247930760480ec767ce75c61385036126cd2f3', class: "description" }, h("slot", { key: '09c3f2fa0a1be5bcbe69b757a68a8327fef29ec1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '9b43e41b6b38242b21c750d2d442c78e0930b9bc', hidden: !this.error, class: "error-description" }, h("slot", { key: '44f7756522adbc54b8d85a211dace24a37073fc6', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
     static get watchers() { return {
-        "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"],
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
     }; }
     static get style() { return NvFielddropdownStyle0; }
 }, [68, "nv-fielddropdown", {
@@ -410,20 +394,23 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
         "error": [516],
         "errorDescription": [513, "error-description"],
         "maxHeight": [513, "max-height"],
-        "open": [1540],
         "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],
         "filterText": [32],
         "selectedValues": [32],
-        "getFilterText": [64]
-    }, [[0, "openChanged", "handleOpenChanged"], [0, "dropdownItemSelected", "handleDropdownItemSelected"], [2, "blur", "handleBlur"], [0, "keydown", "handleKeyDown"]], {
-        "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"],
-        "open": ["handleOpenChange"]
+        "open": [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") {