@nova-design-system/nova-webcomponents 3.0.0-beta.43 → 3.0.0-beta.45

package/dist/components/nv-fielddropdown.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
-import { d as defineCustomElement$6 } from './p-9476354d.js';
-import { d as defineCustomElement$5 } from './p-ebf24fd0.js';
-import { d as defineCustomElement$4 } from './p-1e095bba.js';
+import { d as defineCustomElement$6 } from './p-8ea5e3c0.js';
+import { d as defineCustomElement$5 } from './p-78b00756.js';
+import { d as defineCustomElement$4 } from './p-3b096098.js';
 import { d as defineCustomElement$3 } from './p-3a3ba5b1.js';
-import { d as defineCustomElement$2 } from './p-057ae4f2.js';
+import { d as defineCustomElement$2 } from './p-e46c2e31.js';
 import { v as v4 } from './p-f5ff676c.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%;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;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:500;line-height:var(--form-field-line-height)}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>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-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: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[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:\"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;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:500;line-height:var(--form-field-line-height)}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>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-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: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$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown extends H {
@@ -110,6 +110,7 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
                 return;
             }
             const input = event.target;
+            this.open = true;
             this.filterText = input.value.toLowerCase();
             this.filterItems();
         };
@@ -122,21 +123,27 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
             if (this.disabled || this.readonly)
                 return;
             this.open = !this.open;
-            if (this.open && !this.filterable) {
-                this.focusFirstItem();
-            }
         };
         this.getSelectedLabel = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
+            if (!this.value)
+                return '';
+            if (this.parsedOptions.length > 1) {
+                const matchingItem = this.parsedOptions.find(option => option.value === this.value);
+                return (_b = (_a = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _a !== void 0 ? _a : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _b !== void 0 ? _b : this.value;
+            }
             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
+            const matchingItem = items.find(item => item.value === this.value);
+            const selectedLabel = matchingItem
+                ? (_e = (_c = matchingItem.label) !== null && _c !== void 0 ? _c : (_d = matchingItem.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : matchingItem.value
                 : '';
+            return selectedLabel;
         };
         this.clearFilter = () => {
+            if (!this.filterable)
+                return;
             this.filterText = '';
-            this.inputElement.value = '';
+            this.inputElement.value = this.getSelectedLabel();
             this.inputElement.focus();
             this.filterItems();
         };
@@ -153,6 +160,7 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
                 item.setAttribute('selected', 'true');
             }
         });
+        this.clearFilter();
         this.value = event.detail.value;
         this.open = false;
     }
@@ -164,23 +172,18 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
         this.filterable = newValue;
     }
     watchValueHandler(newValue) {
-        if (newValue) {
-            this.updateSelectedItem(newValue);
-        }
         this.valueChanged.emit(newValue);
     }
     handleOptionsChange(newValue) {
+        var _a;
         if (newValue) {
             try {
                 const parsedOpts = JSON.parse(newValue);
                 this.parsedOptions = [...parsedOpts];
-                const selectedOption = this.parsedOptions.find(opt => opt.selected);
-                if (selectedOption) {
-                    this.value = selectedOption.value;
-                    requestAnimationFrame(() => {
-                        // Wait for items to be rendered
-                        this.updateSelectedItem(selectedOption.value);
-                    });
+                if (!this.value) {
+                    const defaultValue = parsedOpts.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);
                 }
             }
             catch (error) {
@@ -196,26 +199,27 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
         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);
+            }
         }
     }
     handleKeyDown(event) {
+        if (!this.el)
+            return;
         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;
-        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([disabled]):not([hidden])'));
         let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
         if (event.key === 'ArrowDown') {
             event.preventDefault();
@@ -242,31 +246,6 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
     async getFilterText() {
         return this.filterText;
     }
-    /**
-     * Set the initial selection based on the current value and update the
-     * inputElement value.
-     */
-    setInitialSelection() {
-        if (!this.value)
-            return;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        const selectedItem = items.find(item => item.getAttribute('value') === this.value);
-        items.forEach(item => {
-            item.removeAttribute('selected');
-            item.classList.remove('selected');
-        });
-        if (selectedItem) {
-            selectedItem.setAttribute('selected', 'true');
-            selectedItem.classList.add('selected');
-            this.value = selectedItem.getAttribute('value');
-            if (this.inputElement) {
-                this.inputElement.value = this.value;
-            }
-        }
-        else {
-            console.warn('No matching item found for value:', this.value);
-        }
-    }
     /**
      * Filter dropdown items based on the text entered by the user.
      * If no items are found, display a message indicating no results.
@@ -288,7 +267,10 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
             // 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);
-            item.style.display = shouldShow ? '' : 'none'; // Hide or show the item
+            if (shouldShow)
+                item.removeAttribute('hidden');
+            else
+                item.setAttribute('hidden', '');
             if (shouldShow) {
                 hasVisibleItems = true;
             }
@@ -321,17 +303,9 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
             }
         });
     }
-    focusFirstItem() {
-        const firstItem = this.el.querySelector('nv-fielddropdownitem');
-        if (firstItem) {
-            firstItem.focus();
-            this.updateHighlightedItem(Array.from(this.el.querySelectorAll('nv-fielddropdownitem')), 0);
-        }
-        else {
-            console.warn('nv-fielddropdown: no first item found to focus');
-        }
-    }
     updateSelectedItem(value) {
+        if (!value)
+            return;
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
         const matchingItem = items.find(item => {
             var _a;
@@ -348,38 +322,34 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
                 item.removeAttribute('selected');
             }
         });
-        if (matchingItem && this.inputElement) {
-            this.inputElement.value = value;
-        }
     }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
         this.resetFilter();
-        this.setInitialSelection();
         if (this.filterable && this.filterText) {
             this.filterItems();
         }
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
-        if (this.value) {
-            this.updateSelectedItem(this.value);
-        }
     }
     componentDidLoad() {
         if (this.value) {
             this.updateSelectedItem(this.value);
         }
+        if (this.inputElement) {
+            this.inputElement.value = this.getSelectedLabel();
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '189f41e526d7245f4d5fae078d2bea1528a9a8d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '91d5c635c4d37f5d6d3fef0e6dd3212009d1be35', htmlFor: this.inputId }, h("slot", { key: 'e749e641f077753464eaa21289ebf71c0b6f673b', name: "label" }, this.label))), h("nv-popover", { key: 'c3c0456e9937745b4784c7b858b9cfadcf4e7240', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '1ad04f70880de711e371267859950d272f78902f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '99ff9d306c69aba7e5eb033feae1a05f7dcb01f6', name: "before-input" }), h("div", { key: '7afb87ecb3eacaf7510abd5b6b02645ba355f719', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'fe3749cdf9f25f0b7fd52949c955b1804fd65630', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (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 })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, h("span", null, this.getSelectedLabel() || this.value || this.placeholder))), this.isFilterable && this.filterText && this.open && (h("nv-iconbutton", { key: '9806da726e4dce22f0a73664b482a405cb7cc071', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '781fb90765533615737da8c294ce497f22dbd9c6', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '1060f3a91606d26c3368299623b0d8211df5f6ec', "data-scope": "toggle-dropdown", 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 })), h("slot", { key: 'b123b91bb2c09f77010bef649d11a27bf16cb3ab', name: "after-input" })), h("div", { key: '94234acfe1881c11b3e6fadda0f234d036ea47ef', slot: "content" }, this.parsedOptions.length > 0 ? (h("ul", null, this.parsedOptions.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: '26de437b142f81e21145ac4f6a15c7e6aecfbfa7', class: "description" }, h("slot", { key: '6c95582790d276567ad9e1619a949419a72f54c1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6ac20b9462e708a456e61c8e3721a585b03e696e', hidden: !this.error, class: "error-description" }, h("slot", { key: '1def9c4e17495a831ea9702ae121c64e812df9b6', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '0fb1d2326cefd85ffd337307a0a0dd74acda8a14', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'bf6f4116b86cca549e7f9b65a17e1cb35b06ef60', htmlFor: this.inputId }, h("slot", { key: 'a81ad465e6a08e1bc9463c9d91c5d2cd05805e39', name: "label" }, this.label))), h("nv-popover", { key: '8c90cf3f3f08455b41b31681c4377d5404dd4b31', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '756eb9ff31134ece738ea9748a88837ec4979ddf', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '1853a781eedfeea6aae57ed94c452524e4e69e83', name: "before-input" }), h("div", { key: '26c839ffc62cb1747de5099725695de6c213a220', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '8685a92ee488f99dda4cbfe6bdd59e347e3ce0ce', name: "leading-input" }), this.isFilterable || 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 })) : (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 }, this.getSelectedLabel() || this.value || this.placeholder)), this.isFilterable && this.filterText && this.open && (h("nv-iconbutton", { key: '1fa4ea0ef878980847d667431c9e52b18de1a4b1', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '77aa0f468d8c6488595ffc2305480174c18d3069', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '9954a5b1910693b0be417d27da8f9005467d99f3', "data-scope": "toggle-dropdown", 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 })), h("slot", { key: '0e258c9b03e4dbcfe94b577ffaf77f2379a9c9a3', name: "after-input" })), h("div", { key: 'b697df1d8c64c9d2eaf09e427cd49c9d5ec0a323', slot: "content" }, this.parsedOptions.length > 0 ? (h("ul", null, this.parsedOptions.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: '7a783fcd4da5623ad478e4a03fb454e093e7fc8e', class: "description" }, h("slot", { key: '93c4c95ca8e8e4bf50086fb861b126aa7f5f828a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8a0de0edb2a7855d478a40059e19f2f26f2ed681', hidden: !this.error, class: "error-description" }, h("slot", { key: '93b87131ac4e8371815e7c82ef6e15ebcff2bc88', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/nv-fielddropdown.js.map

@@ -1 +1 @@
-{"file":"nv-fielddropdown.js","mappings":"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","names":["NvFielddropdown","uuidv4"],"sources":["src/components/nv-fielddropdown/styles/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@import '../../../styles/form-field';\n\nnv-fielddropdown {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    @include form-field-popover();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    @include input-wrapper-styles();\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    @include input-container-styles();\n\n    input[type=\"search\"]::-webkit-search-decoration,\n    input[type=\"search\"]::-webkit-search-cancel-button,\n    input[type=\"search\"]::-webkit-search-results-button,\n    input[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance:none;\n    }\n\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n    }\n\n    > nv-iconbutton {\n      @include form-field-action();\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n    }\n  }\n\n  .non-filterable-text {\n    @include non-filterable-text-styles();\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'styles/nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFielddropdown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It's a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It's a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   * The placeholder is displayed only when the filterable option is enabled.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input's data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they've used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input's value is managed by the component's state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field's content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won't be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can't\n   * type in it. When disabled, the field is grayed out and won't respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyResult: string = 'No results found';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  /**\n   * List of options available in the dropdown. The options are passed as a JSON\n   * string.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   *  \"selected\": true\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\"\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /** The text entered by the user for filtering dropdown items. */\n  @State()\n  filterText: string = '';\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  /**\n   * Options configuration for the dropdown items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }> = [];\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<\n    HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n  >;\n\n  @Listen('dropdownItemSelected')\n  handleDropdownItemSelected(\n    event: CustomEvent<\n      HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n    >,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n      } else {\n        item.setAttribute('selected', 'true');\n      }\n    });\n\n    this.value = event.detail.value;\n    this.open = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail; // Update `open` based on the popover state\n  }\n\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  @Watch('value')\n  watchValueHandler(newValue: string) {\n    if (newValue) {\n      this.updateSelectedItem(newValue);\n    }\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (newValue) {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n        const selectedOption = this.parsedOptions.find(opt => opt.selected);\n\n        if (selectedOption) {\n          this.value = selectedOption.value;\n          requestAnimationFrame(() => {\n            // Wait for items to be rendered\n            this.updateSelectedItem(selectedOption.value);\n          });\n        }\n      } catch (error) {\n        console.error('nv-fielddropdown: error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else {\n      this.parsedOptions = [];\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur(event: FocusEvent) {\n    const target = event.relatedTarget;\n\n    if (!(target instanceof Node) || !this.el.contains(target)) {\n      this.open = false;\n    }\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        if (!this.filterable) {\n          // Focus on the first item if it is not filterable\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    if (items.length === 0) {\n      console.warn('No dropdown items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  /**\n   * Set the initial selection based on the current value and update the\n   * inputElement value.\n   */\n  private setInitialSelection() {\n    if (!this.value) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const selectedItem = items.find(\n      item => item.getAttribute('value') === this.value,\n    );\n\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n      this.value = selectedItem.getAttribute('value');\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    } else {\n      console.warn('No matching item found for value:', this.value);\n    }\n  }\n\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.filterItems();\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitem');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyResult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /** Reset the filter and make all items visible. */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) return;\n\n    this.open = true;\n  };\n\n  private togglePopover = () => {\n    if (this.disabled || this.readonly) return;\n\n    this.open = !this.open;\n\n    if (this.open && !this.filterable) {\n      this.focusFirstItem();\n    }\n  };\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.focus();\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\n    } else {\n      console.warn('nv-fielddropdown: no first item found to focus');\n    }\n  }\n\n  private updateSelectedItem(value: string) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    items.forEach(item => {\n      if (item === matchingItem) {\n        item.setAttribute('selected', '');\n      } else {\n        item.removeAttribute('selected');\n      }\n    });\n\n    if (matchingItem && this.inputElement) {\n      this.inputElement.value = value;\n    }\n  }\n\n  private getSelectedLabel = (): string => {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(\n      item => item.getAttribute('value') === this.value,\n    );\n    return matchingItem\n      ? matchingItem.label ??\n          matchingItem.textContent?.trim() ??\n          matchingItem.value\n      : '';\n  };\n\n  private clearFilter = () => {\n    this.filterText = '';\n    this.inputElement.value = '';\n    this.inputElement.focus();\n    this.filterItems();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.resetFilter();\n    this.setInitialSelection();\n\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.getSelectedLabel()}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={this.disabled ? -1 : 0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>\n                    {this.getSelectedLabel() || this.value || this.placeholder}\n                  </span>\n                </p>\n              )}\n\n              {this.isFilterable && this.filterText && this.open && (\n                <nv-iconbutton\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  class=\"clear-button\"\n                  onClick={this.clearFilter}\n                  aria-label=\"Clear input\"\n                />\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            {this.parsedOptions.length > 0 ? (\n              <ul>\n                {this.parsedOptions.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))}\n              </ul>\n            ) : (\n              <slot name=\"content\"></slot>\n            )}\n          </div>\n        </nv-popover>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-fielddropdown.js","mappings":"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","names":["NvFielddropdown","uuidv4"],"sources":["src/components/nv-fielddropdown/styles/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@import '../../../styles/form-field';\n\nnv-fielddropdown {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  &[hidden]:not([hidden='false']) label {\n    display: none;\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    @include form-field-popover();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    @include input-wrapper-styles();\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    @include input-container-styles();\n\n    input[type=\"search\"]::-webkit-search-decoration,\n    input[type=\"search\"]::-webkit-search-cancel-button,\n    input[type=\"search\"]::-webkit-search-results-button,\n    input[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance:none;\n    }\n\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n    }\n\n    > nv-iconbutton {\n      @include form-field-action();\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n    }\n  }\n\n  .non-filterable-text {\n    @include non-filterable-text-styles();\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'styles/nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFielddropdown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It's a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It's a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   * The placeholder is displayed only when the filterable option is enabled.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input's data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they've used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input's value is managed by the component's state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field's content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won't be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can't\n   * type in it. When disabled, the field is grayed out and won't respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyResult: string = 'No results found';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  /**\n   * List of options available in the dropdown. The options are passed as a JSON\n   * string.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   *  \"selected\": true\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\"\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /** The text entered by the user for filtering dropdown items. */\n  @State()\n  filterText: string = '';\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  /**\n   * Options configuration for the dropdown items.\n   */\n  @State()\n  parsedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }> = [];\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<\n    HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n  >;\n\n  @Listen('dropdownItemSelected')\n  handleDropdownItemSelected(\n    event: CustomEvent<\n      HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n    >,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n      } else {\n        item.setAttribute('selected', 'true');\n      }\n    });\n\n    this.clearFilter();\n    this.value = event.detail.value;\n    this.open = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail; // Update `open` based on the popover state\n  }\n\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  @Watch('value')\n  watchValueHandler(newValue: string) {\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (newValue) {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n        if (!this.value) {\n          const defaultValue = parsedOpts.find(option => option.selected);\n          this.value = defaultValue?.value ?? '';\n          this.updateSelectedItem(this.value);\n        }\n      } catch (error) {\n        console.error('nv-fielddropdown: error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else {\n      this.parsedOptions = [];\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur(event: FocusEvent) {\n    const target = event.relatedTarget;\n    if (!(target instanceof Node) || !this.el.contains(target)) {\n      this.open = false;\n\n      if (this.inputElement) {\n        this.filterText = '';\n        this.inputElement.value = this.getSelectedLabel();\n        setTimeout(() => {\n          this.filterItems();\n        }, 200);\n      }\n    }\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.el) return;\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll(\n        'nv-fielddropdownitem:not([disabled]):not([hidden])',\n      ),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.open = true;\n    this.filterText = input.value.toLowerCase();\n    this.filterItems();\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      if (shouldShow) item.removeAttribute('hidden');\n      else item.setAttribute('hidden', '');\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitem');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyResult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /** Reset the filter and make all items visible. */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) return;\n    this.open = true;\n  };\n\n  private togglePopover = () => {\n    if (this.disabled || this.readonly) return;\n    this.open = !this.open;\n  };\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.focus();\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n      }\n    });\n  }\n\n  private getSelectedLabel = (): string => {\n    if (!this.value) return '';\n\n    if (this.parsedOptions.length > 1) {\n      const matchingItem = this.parsedOptions.find(\n        option => option.value === this.value,\n      );\n      return matchingItem?.label ?? matchingItem?.value ?? this.value;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => item.value === this.value);\n\n    const selectedLabel = matchingItem\n      ? matchingItem.label ??\n        matchingItem.textContent?.trim() ??\n        matchingItem.value\n      : '';\n\n    return selectedLabel;\n  };\n\n  private clearFilter = () => {\n    if (!this.filterable) return;\n\n    this.filterText = '';\n    this.inputElement.value = this.getSelectedLabel();\n    this.inputElement.focus();\n    this.filterItems();\n  };\n\n  private updateSelectedItem(value: string) {\n    if (!value) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    items.forEach(item => {\n      if (item === matchingItem) {\n        item.setAttribute('selected', '');\n      } else {\n        item.removeAttribute('selected');\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.resetFilter();\n\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n    if (this.inputElement) {\n      this.inputElement.value = this.getSelectedLabel();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"combobox\"\n        aria-expanded={this.open.toString()}\n        aria-haspopup=\"listbox\"\n        aria-label={this.label}\n      >\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  data-scope=\"focusable\"\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.getSelectedLabel()}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onClick={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  data-scope=\"focusable\"\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={this.disabled ? -1 : 0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  {this.getSelectedLabel() || this.value || this.placeholder}\n                </p>\n              )}\n\n              {this.isFilterable && this.filterText && this.open && (\n                <nv-iconbutton\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  class=\"clear-button\"\n                  onClick={this.clearFilter}\n                  aria-label=\"Clear input\"\n                />\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            {this.parsedOptions.length > 0 ? (\n              <ul>\n                {this.parsedOptions.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))}\n              </ul>\n            ) : (\n              <slot name=\"content\"></slot>\n            )}\n          </div>\n        </nv-popover>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-fielddropdownitem.js

@@ -1,4 +1,4 @@
-import { N as NvFielddropdownitem$1, d as defineCustomElement$1 } from './p-9476354d.js';
+import { N as NvFielddropdownitem$1, d as defineCustomElement$1 } from './p-8ea5e3c0.js';
 
 const NvFielddropdownitem = NvFielddropdownitem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-fielddropdownitemcheck.js

@@ -1,4 +1,4 @@
-import { N as NvFielddropdownitemcheck$1, d as defineCustomElement$1 } from './p-1fad2529.js';
+import { N as NvFielddropdownitemcheck$1, d as defineCustomElement$1 } from './p-ef255589.js';
 
 const NvFielddropdownitemcheck = NvFielddropdownitemcheck$1;
 const defineCustomElement = defineCustomElement$1;