@nova-design-system/nova-webcomponents 3.0.0-beta.38 → 3.0.0-beta.39

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5910ba06.js');
 const v4 = require('./v4-7014b8b0.js');
 
-const nvFielddropdownCss = "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}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)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;display:flex;flex-direction:column;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 .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;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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,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);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}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:500;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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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 nvFielddropdownCss = "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}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)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;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 .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;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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,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);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}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:500;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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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 NvFielddropdownStyle0 = nvFielddropdownCss;
 
-const NVFieldDropDown = class {
+const NvFielddropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
         this.valueChanged = index.createEvent(this, "valueChanged", 7);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -59,34 +59,35 @@ const NVFieldDropDown = class {
         /**
          * The text to display when no items match the filter.
          */
-        this.emptyresult = 'No results found';
-        /**
-         * The text entered by the user for filtering dropdown items.
-         */
-        this.filterText = '';
+        this.emptyResult = 'No results found';
         /**
          * Enables or disables the filtering feature for the dropdown items.
          */
         this.filterable = false;
+        /**
+         * 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;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        /** The text entered by the user for filtering dropdown items. */
+        this.filterText = '';
         this.isFilterable = this.filterable;
         this.selectedValues = new Set();
         /**
          * Options configuration for the dropdown items.
          */
         this.parsedOptions = [];
-        /**
-         * Handle click on the input container.
-         * @param {MouseEvent} event - The click event.
-         */
         this.handleInputContainerClick = (event) => {
             if (this.disabled || this.readonly) {
-                return; // Do nothing if the dropdown is disabled or read-only
+                return;
             }
             const target = event.target;
-            // Check if it is the paragraph or another part of the container
             if (target.tagName === 'P' || target.tagName === 'SPAN') {
                 this.open = true;
-                this.popoverElement.show();
                 // Simulate focus to trigger "focus-within" style
                 const inputContainer = this.el.querySelector('.input-container');
                 if (inputContainer) {
@@ -100,85 +101,59 @@ const NVFieldDropDown = class {
                 }
             }
         };
-        /**
-         * Handle input change.
-         * @param {Event} event - The input event.
-         */
         this.handleInput = (event) => {
             if (!this.filterable)
-                return; // Do not filter if `filterable` is false
+                return;
             if (this.disabled || this.readonly) {
-                return; // Do not toggle the state if the dropdown is disabled or read-only
+                return;
             }
             const input = event.target;
             this.filterText = input.value.toLowerCase();
-            this.value = input.value; // Update the value
-            this.valueChanged.emit(input.value); // Emit an event if needed
-            this.filterItems(); // Update the visibility of items
+            this.filterItems();
         };
-        /**
-         * Handle input focus.
-         */
-        this.handleInputFocus = () => {
-            if (this.disabled || this.readonly) {
-                return; // Do not toggle the state if the dropdown is disabled or read-only
+        this.handleClickOutside = (event) => {
+            if (this.el.contains(event.target) ||
+                (this.inputElement && this.inputElement.contains(event.target))) {
+                return;
             }
-            this.open = true; // Force the popover to open
+            this.open = false;
         };
-        /**
-         * Handle input blur.
-         */
-        this.handleInputBlur = () => {
-            // Use a delay to check if the focus is still within the popover
-            setTimeout(() => {
-                if (!this.el.contains(document.activeElement)) {
-                    this.open = false;
-                    this.popoverElement.hide(); // Close the popover if the focus is outside the component
-                }
-            }, 150);
+        this.handleInputFocus = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.open = true;
         };
-        /**
-         * Toggle the dropdown popover.
-         * @returns {void}
-         */
         this.togglePopover = () => {
-            if (this.disabled || this.readonly) {
-                return; // Do not toggle if disabled or read-only
-            }
+            if (this.disabled || this.readonly)
+                return;
             this.open = !this.open;
-            if (this.open) {
-                this.popoverElement.show();
-                // If the dropdown is not filterable, focus on the first item
-                if (!this.filterable) {
-                    this.focusFirstItem();
-                }
-            }
-            else {
-                this.popoverElement.hide();
+            if (this.open && !this.filterable) {
+                this.focusFirstItem();
             }
         };
+        this.getSelectedLabel = () => {
+            var _a, _b, _c;
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+            const matchingItem = items.find(item => item.getAttribute('value') === this.value);
+            return matchingItem
+                ? (_c = (_a = matchingItem.label) !== null && _a !== void 0 ? _a : (_b = matchingItem.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : matchingItem.value
+                : '';
+        };
     }
-    handleItemSelected(event) {
+    handleDropdownItemSelected(event) {
         if (this.disabled || this.readonly)
             return;
-        // Retrieve all nv-fielddropdownitem elements present in the dropdown.
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        // For each item, remove the 'selected' attribute and the 'selected' class.
         items.forEach(item => {
             if (item !== event.target) {
                 item.removeAttribute('selected');
-                item.classList.remove('selected');
+            }
+            else {
+                item.setAttribute('selected', 'true');
             }
         });
-        // Update the value and emit the event with the selected item.
         this.value = event.detail.value;
-        event.target.setAttribute('selected', 'true');
-        event.target.classList.add('selected');
-        this.dropdownItemSelected.emit(event.detail);
-        // Close the popover after selecting.
-        if (this.popoverElement) {
-            this.popoverElement.hide();
-        }
+        this.open = false;
     }
     handleOpenChanged(event) {
         this.open = event.detail; // Update `open` based on the popover state
@@ -192,27 +167,22 @@ const NVFieldDropDown = class {
             this.updateSelectedItem(newValue);
         }
     }
-    /**
-     * Watch for changes in the options prop
-     * @param {string} newValue - The new value of the options prop
-     */
     handleOptionsChange(newValue) {
         if (newValue) {
             try {
                 const parsedOpts = JSON.parse(newValue);
                 this.parsedOptions = [...parsedOpts];
-                // Handle pre-selected option
                 const selectedOption = this.parsedOptions.find(opt => opt.selected);
                 if (selectedOption) {
                     this.value = selectedOption.value;
-                    // Wait for items to be rendered
                     requestAnimationFrame(() => {
+                        // Wait for items to be rendered
                         this.updateSelectedItem(selectedOption.value);
                     });
                 }
             }
             catch (error) {
-                console.error('Error parsing options:', error);
+                console.error('nv-fielddropdown: error parsing options:', error);
                 this.parsedOptions = [];
             }
         }
@@ -220,52 +190,68 @@ const NVFieldDropDown = class {
             this.parsedOptions = [];
         }
     }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region METHODS
-    componentWillLoad() {
-        // Initialize options if provided
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-        if (this.value) {
-            // If an initial value exists, set it as selected
-            this.updateSelectedItem(this.value);
+    handleBlur(event) {
+        const target = event.relatedTarget;
+        if (!(target instanceof Node) || !this.el.contains(target)) {
+            this.open = false;
         }
     }
-    componentDidLoad() {
-        document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Check again after complete rendering
-        if (this.value) {
-            this.updateSelectedItem(this.value);
+    handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                if (!this.filterable) {
+                    // Focus on the first item if it is not filterable
+                    this.focusFirstItem();
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'));
+        if (items.length === 0) {
+            console.warn('No dropdown items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        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);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+            if (this.inputElement) {
+                this.inputElement.blur();
+            }
         }
     }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
     /**
-     * Subscribe to click outside event.
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
      */
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside.bind(this));
-        // First, reset the filter to ensure all elements are visible
-        this.resetFilter();
-        // Then, handle the pre-selection
-        this.setInitialSelection();
-        // Finally, apply the filter if needed
-        if (this.filterable && this.filterText) {
-            this.filterItems();
-        }
+    async getFilterText() {
+        return this.filterText;
     }
     /**
-     * Set the initial selection based on the current value and update the inputElement value.
+     * Set the initial selection based on the current value and update the
+     * inputElement value.
      */
     setInitialSelection() {
-        var _a;
+        if (!this.value)
+            return;
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        const selectedItem = items.find(item => {
-            var _a;
-            return item.getAttribute('label') === this.value ||
-                item.getAttribute('value') === this.value ||
-                ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
-        });
+        const selectedItem = items.find(item => item.getAttribute('value') === this.value);
         items.forEach(item => {
             item.removeAttribute('selected');
             item.classList.remove('selected');
@@ -273,11 +259,7 @@ const NVFieldDropDown = class {
         if (selectedItem) {
             selectedItem.setAttribute('selected', 'true');
             selectedItem.classList.add('selected');
-            this.value =
-                selectedItem.getAttribute('label') ||
-                    selectedItem.getAttribute('value') ||
-                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
-                    '';
+            this.value = selectedItem.getAttribute('value');
             if (this.inputElement) {
                 this.inputElement.value = this.value;
             }
@@ -286,12 +268,6 @@ const NVFieldDropDown = class {
             console.warn('No matching item found for value:', this.value);
         }
     }
-    /**
-     * Unsubscribe from click outside event.
-     */
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
-    }
     /**
      * Filter dropdown items based on the text entered by the user.
      * If no items are found, display a message indicating no results.
@@ -323,97 +299,26 @@ const NVFieldDropDown = class {
             const emptyItem = document.createElement('nv-fielddropdownitem');
             emptyItem.setAttribute('data-empty', 'true');
             emptyItem.setAttribute('disabled', 'true');
-            emptyItem.textContent = this.emptyresult;
+            emptyItem.textContent = this.emptyResult;
             (_a = this.el.querySelector('ul[slot="content"]')) === null || _a === void 0 ? void 0 : _a.appendChild(emptyItem);
         }
     }
-    /**
-     * Reset the filter and make all items visible.
-     */
+    /** Reset the filter and make all items visible. */
     resetFilter() {
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
         items.forEach(item => {
             item.style.display = '';
         });
     }
-    /**
-     * Retrieves the current filter text entered by the user.
-     * @returns {string} The filter text.
-     */
-    async getFilterText() {
-        return this.filterText;
-    }
-    /**
-     * Handle click outside the component.
-     * @param {MouseEvent} event - The click event.
-     */
-    handleClickOutside(event) {
-        if (this.el.contains(event.target) ||
-            (this.inputElement && this.inputElement.contains(event.target))) {
-            return;
-        }
-        this.popoverElement.hide();
-    }
-    handleKeyDown(event) {
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
-                this.open = true;
-                this.popoverElement.show();
-                if (!this.filterable) {
-                    // Focus on the first item if it is not filterable
-                    this.focusFirstItem();
-                }
-                event.preventDefault();
-                return;
-            }
-            return;
-        }
-        // Verify if the popover is defined before looking for items
-        if (!this.popoverElement) {
-            console.warn('Popover element is not defined');
-            return;
-        }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'));
-        // Verify if items exist
-        if (items.length === 0) {
-            console.warn('No dropdown items found to navigate');
-            return;
-        }
-        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
-        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);
-        }
-        else if (event.key === 'Enter' && currentIndex >= 0) {
-            event.preventDefault();
-            items[currentIndex].click();
-        }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            this.open = false;
-            this.popoverElement.hide();
-            if (this.inputElement) {
-                this.inputElement.blur();
-            }
-        }
-    }
     updateHighlightedItem(items, index) {
         items.forEach((item, i) => {
             if (i === index) {
                 item.classList.add('highlighted');
-                item.setAttribute('tabindex', '0');
-                item.focus(); // Forcer le focus ici
+                item.focus();
                 item.scrollIntoView({ block: 'nearest' });
             }
             else {
                 item.classList.remove('highlighted');
-                item.setAttribute('tabindex', '-1');
             }
         });
     }
@@ -424,17 +329,11 @@ const NVFieldDropDown = class {
             this.updateHighlightedItem(Array.from(this.el.querySelectorAll('nv-fielddropdownitem')), 0);
         }
         else {
-            console.warn('No first item found to focus');
+            console.warn('nv-fielddropdown: no first item found to focus');
         }
     }
     updateSelectedItem(value) {
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        // Reset all items
-        items.forEach(item => {
-            item.removeAttribute('selected');
-            item.classList.remove('selected');
-        });
-        // Find the item matching the value
         const matchingItem = items.find(item => {
             var _a;
             const itemLabel = item.getAttribute('label');
@@ -442,30 +341,54 @@ const NVFieldDropDown = class {
             const itemText = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
             return itemLabel === value || itemValue === value || itemText === value;
         });
-        if (matchingItem) {
-            // Mark the item as selected
-            matchingItem.setAttribute('selected', 'true');
-            matchingItem.classList.add('selected');
-            // Update the input
-            if (this.inputElement) {
-                this.inputElement.value = value;
+        items.forEach(item => {
+            if (item === matchingItem) {
+                item.setAttribute('selected', '');
+            }
+            else {
+                item.removeAttribute('selected');
             }
-            // Emit the selection event
-            this.dropdownItemSelected.emit({
-                value: value,
-                label: matchingItem.getAttribute('label') || value,
-                selected: true,
-                disabled: matchingItem.hasAttribute('disabled'),
-            });
+        });
+        if (matchingItem && this.inputElement) {
+            this.inputElement.value = value;
         }
     }
     //#endregion METHODS
     /****************************************************************************/
+    //#region LIFECYCLE
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        this.resetFilter();
+        this.setInitialSelection();
+        if (this.filterable && this.filterText) {
+            this.filterItems();
+        }
+    }
+    componentWillLoad() {
+        if (this.options) {
+            this.handleOptionsChange(this.options);
+        }
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Check again after complete rendering
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9e43d5dee909615ce58a1b64e571e661ccdb4110' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '29ffcbf274cb1b0fc8c80e43ffe623f26f3096a3', htmlFor: this.inputId }, index.h("slot", { key: '8e27c4d52d2ce610f8effcae32a9ee6ade400706', name: "label" }, this.label))), index.h("nv-popover", { key: '5247b86cd12e74382a9301cac81f861370a8ba98', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '92d59151fc3400a38971a860f73fc43d8f9b92a0', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '9810c88233a55840334a7a57e6626ab17b48a565', name: "before-input" }), index.h("div", { key: '2670bb58b928b2fcb98f2da6501b852df83c6790', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'a66ce39a54b100c2afd9f90daf3777293e59adbb', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, index.h("span", null, this.value || this.placeholder))), index.h("nv-iconbutton", { key: '41a66e981d964b0b8492a74a17b242766a67a5e1', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover })), index.h("slot", { key: '7555c854f681c5fad08f48d77f64483245804280', name: "after-input" })), index.h("div", { key: 'cf179ec57b0a51e970e1e763ce63d34e23481f40', slot: "content" }, index.h("ul", { key: '843c7aeccc847171266f36209808d7b3e9b30f08', slot: "content" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value })))) : (index.h("slot", { name: "content" }))))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '04e05d9f19e2a932c10ffd63762aa4c0218efe2f', class: "description" }, index.h("slot", { key: '19c66921ebb6e041ffd7324a3e31a3ed76750590', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e2d3829e8469d0ae5da3bbe1942de809f17b7ee8', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'd4b83f3b8345cc941c1f3058ddee103f36625974', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '99855b7abf6a00da6e086f2ad69bd95fe096bd50' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '36453f817c5a428f55b0d3b344848fefb614ad76', htmlFor: this.inputId }, index.h("slot", { key: 'a4373ba2f11246c05926b4c1b42af627edb69418', name: "label" }, this.label))), index.h("nv-popover", { key: '5325f5dbb84f5aab2d52afb0cbf9c2363899c5af', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '9925e66e8222adf7471c12eb3c3a94b320f97d4a', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'ec55d54c546beef866e0afe9b0593ad4b0b1af94', name: "before-input" }), index.h("div", { key: '0a0114905e4452ff8a2c7442478d1a0a42c1b058', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'b8745ddd519c940f95aad372976b4c4b3dd15b10', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { 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, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, index.h("span", null, this.getSelectedLabel() || this.value || this.placeholder))), index.h("nv-iconbutton", { key: 'f5b99e6b87c13f131bc212936778e85e5a953788', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'f1f21795ba6f40193c7c57c5c585315b732a13e1', name: "after-input" })), index.h("div", { key: '147ce233da3d6c6e118b476eca1ed943bb20951f', slot: "content" }, this.parsedOptions.length > 0 ? (index.h("ul", null, this.parsedOptions.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '4e5978d880fd207281e9fa2b1f283c851798b25d', class: "description" }, index.h("slot", { key: '8c80ef894500189da8944e7abbba9957ea411820', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '22d0d1c7a84b56978e330c4bb7f073ef221e0fb9', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'fe4769ff4c96e525b5f0fca55ed0afbe5d837ac3', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -475,8 +398,8 @@ const NVFieldDropDown = class {
         "options": ["handleOptionsChange"]
     }; }
 };
-NVFieldDropDown.style = NvFielddropdownStyle0;
+NvFielddropdown.style = NvFielddropdownStyle0;
 
-exports.nv_fielddropdown = NVFieldDropDown;
+exports.nv_fielddropdown = NvFielddropdown;
 
 //# sourceMappingURL=nv-fielddropdown.cjs.entry.js.map