@nova-design-system/nova-webcomponents 3.1.0 → 3.3.0

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9bda5507.js');
+const index = require('./index-c56424e5.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;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}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);width:100%}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight: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 nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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 input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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 {
@@ -22,10 +22,6 @@ const NvFielddropdown = class {
          * accessibility.
          */
         this.inputId = v4.v4();
-        /**
-         * State of the dropdown popover.
-         */
-        this.open = false;
         /**
          * The autocomplete prop helps users fill out the input field faster by
          * suggesting entries they've used before, like their email or address.
@@ -38,12 +34,6 @@ const NvFielddropdown = class {
          * before submitting the form.
          */
         this.required = false;
-        /**
-         * Alters the input field's appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
         /**
          * Display the input field's content without allowing users to change it.
          * Users can still click on it, select, and copy the text, but they won't be
@@ -56,6 +46,20 @@ const NvFielddropdown = class {
          * clicks or touches.
          */
         this.disabled = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Defines the maximum height of the multiselect list when open.
+         */
+        this.maxHeight = '';
+        /**
+         * State of the dropdown popover.
+         */
+        this.open = false;
         /**
          * The text to display when no items match the filter.
          */
@@ -64,6 +68,11 @@ const NvFielddropdown = class {
          * Enables or disables the filtering feature for the dropdown items.
          */
         this.filterable = false;
+        /**
+         * Delay in milliseconds before the search is triggered when typing in the filter input.
+         * @default 300
+         */
+        this.debounceDelay = 300;
         /**
          * Applies focus to the input field as soon as the component is mounted. This
          * is equivalent to setting the native autofocus attribute on an <input>
@@ -77,7 +86,9 @@ const NvFielddropdown = class {
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
-        /** The text entered by the user for filtering dropdown items. */
+        /**
+         * The text entered by the user for filtering dropdown items.
+         */
         this.filterText = '';
         this.selectedValues = new Set();
         this.handleInputContainerClick = (event) => {
@@ -108,8 +119,15 @@ const NvFielddropdown = class {
             }
             const input = event.target;
             this.open = true;
-            this.filterText = input.value.toLowerCase();
-            this.filterItems();
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterItems();
+            }, this.debounceDelay);
         };
         this.handleInputFocus = () => {
             if (this.disabled || this.readonly)
@@ -145,6 +163,31 @@ const NvFielddropdown = class {
             this.filterItems();
         };
     }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleOptionsChange(newValue) {
+        var _a;
+        if (!newValue)
+            return;
+        if (!this.value) {
+            const defaultValue = newValue.find(option => option.selected);
+            this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
+            this.updateSelectedItem(this.value);
+        }
+    }
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleOpenChanged(event) {
+        // Stop propagation to prevent the event from affecting parent components like dialogs
+        event.stopPropagation();
+        // Update `open` based on the popover state
+        this.open = event.detail;
+    }
     handleDropdownItemSelected(event) {
         if (this.disabled || this.readonly)
             return;
@@ -161,25 +204,6 @@ const NvFielddropdown = class {
         this.value = event.detail.value;
         this.open = false;
     }
-    handleOpenChanged(event) {
-        // Stop propagation to prevent the event from affecting parent components like dialogs
-        event.stopPropagation();
-        // Update `open` based on the popover state
-        this.open = event.detail;
-    }
-    watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
-    }
-    handleOptionsChange(newValue) {
-        var _a;
-        if (!newValue)
-            return;
-        if (!this.value) {
-            const defaultValue = newValue.find(option => option.selected);
-            this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
-            this.updateSelectedItem(this.value);
-        }
-    }
     handleBlur(event) {
         const target = event.relatedTarget;
         if (!(target instanceof Node) || !this.el.contains(target)) {
@@ -221,7 +245,27 @@ const NvFielddropdown = class {
             this.open = false;
         }
     }
-    //#endregion EVENTS
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.resetFilter();
+        if (this.filterable && this.filterText) {
+            this.filterItems();
+        }
+        if (this.options) {
+            this.handleOptionsChange(this.options);
+        }
+    }
+    componentDidLoad() {
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+        if (this.inputElement) {
+            this.inputElement.value = this.getSelectedLabel();
+        }
+    }
+    //#endregion LIFECYCLE
     /****************************************************************************/
     //#region METHODS
     /**
@@ -310,38 +354,18 @@ const NvFielddropdown = class {
     }
     //#endregion METHODS
     /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.resetFilter();
-        if (this.filterable && this.filterText) {
-            this.filterItems();
-        }
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-    }
-    componentDidLoad() {
-        if (this.value) {
-            this.updateSelectedItem(this.value);
-        }
-        if (this.inputElement) {
-            this.inputElement.value = this.getSelectedLabel();
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
     //#region RENDER
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'cf5547bf05355ee548804c697fd6a3524d68c1ba', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '76d23fc85b18e8bf4288d4f7bcf47a4af283fc23', htmlFor: this.inputId }, index.h("slot", { key: 'fe4faee394762bb88feeaea26ae508981cf25f95', name: "label" }, this.label))), index.h("nv-popover", { key: '477a08c8898de641e707bf34fc1584ad217f8beb', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '4154ac008b7868eb231eb951e88dd6feba4a758a', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'c59d39d2f18c2a5a8a40c2c796ca564f4356168c', name: "before-input" }), index.h("div", { key: '4eb6163061b5daf3aa4d6afe64970e0e5bf551d6', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'b183868757274f389a00a4cd8f745a137d6ead44', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.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.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: 'ca073047dfa1cf558c77fbae2d84e77fd5ae33bf', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: 'b847592deb061bcc9c2ec6649ba66290da54e1d0', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'f30ddb81d582840918866bdaa8055fcf30cdf9dc', "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 })), index.h("slot", { key: '023464c8dc5c2d502abff1e5738d861eccb31cd7', name: "after-input" })), index.h("div", { key: '7143961a33d624d653e066e5dc3f74865171303f', slot: "content" }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'afee31c96dade12087ea2a476ef51dd235c34ad7', class: "description" }, index.h("slot", { key: '53ca646ce1abc0d2d96764b7e7cf08dcdf908909', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f282d962255459043b865d18c95a328cd5c7b2e8', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c01c9c62d1fb43c469b271f1e5f5ac5c401b112e', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '3864f366575665c4730dde8fd0d8e37c4ee11d82', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8ce42f691251468c6c054464ee3695e2bea90bd5', htmlFor: this.inputId }, index.h("slot", { key: '7e779704e1c3f9f6ee71455679c0e1d5d4ee8795', name: "label" }, this.label))), index.h("nv-popover", { key: '82cdd318e195ef44513684afba0e9c9772cad448', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '1189c8fd06db511cb51721ac14cdc54ef286691c', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '9069907e055d77a19c30c045e29eaf4bf998f9a0', name: "before-input" }), index.h("div", { key: '2c57f017b25754d4b5baf44e3457e95256dfdccf', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '939e749473e4df95a28fcf98e8b6d455408bff71', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.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.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: 'dcf54042b261665e5317ac122a93ca12fcedd9bc', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '3551957d94021648d731f97c1ba7ecdc8a325c15', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e8576d20f760219f236aa9ba52a34f762cc8d23e', "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 })), index.h("slot", { key: '48e9ae570e34cde3d20594a3f6518298ebbad02e', name: "after-input" })), index.h("div", { key: 'cec0a670f4158ca91aa45dcee7a5c25a584226f9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e24dbfc170fb20e48ca2a474508a7c9beac6b87e', class: "description" }, index.h("slot", { key: '3b4429e2dd0b4f070309b00c6cba94cd343e7165', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b59ecbf446b142840f5c5933c505900abf126378', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'bf3c16d6a9fdc7a10741518153465a736eff808c', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["watchValueHandler"],
-        "options": ["handleOptionsChange"]
+        "options": ["handleOptionsChange"],
+        "value": ["watchValueHandler"]
     }; }
 };
 NvFielddropdown.style = NvFielddropdownStyle0;

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

@@ -1 +1 @@
-{"file":"nv-fielddropdown.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host"],"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  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\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 })\n  readonly filterable: boolean = false;\n\n  /**\n   * List of options used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\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: false })\n  readonly options?: {\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  /**\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  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: 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  selectedValues: Set<string> = new Set();\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    // Stop propagation to prevent the event from affecting parent components like dialogs\n    event.stopPropagation();\n\n    // Update `open` based on the popover state\n    this.open = event.detail;\n  }\n\n  @Watch('value')\n  watchValueHandler(newValue: typeof this.value) {\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n    if (!this.value) {\n      const defaultValue = newValue.find(option => option.selected);\n      this.value = defaultValue?.value ?? '';\n      this.updateSelectedItem(this.value);\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.options?.length > 1) {\n      const matchingItem = this.options.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.filterable || 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.filterable && 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.options?.length > 0 ? (\n              <ul>\n                {this.options.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.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host"],"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@import '../../../styles/scrollbar';\n\nnv-fielddropdown {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid='false']) {\n    @include form-field-fluid();\n  }\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    div[slot='content'] {\n      @include scrollbar();\n      max-height: calc(90vh - var(--list-dropdown-padding) * 2);\n      overflow-y: auto;\n      position: relative;\n    }\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';\n\nimport { v4 as uuidv4 } from 'uuid';\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   * Timer for debouncing input events.\n   * Private property preferred over @State as it:\n   * - Doesn't need to trigger re-renders\n   * - Is purely for internal logic\n   * - Improves performance by avoiding Stencil's reactivity system\n   */\n  private debounceTimer: number;\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   * 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   * 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   * 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   * 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   * 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   * Defines the maximum height of the multiselect list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '';\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: 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 })\n  readonly filterable: boolean = false;\n\n  /**\n   * List of options used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\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: false })\n  readonly options?: {\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  /**\n   * Delay in milliseconds before the search is triggered when typing in the filter input.\n   * @default 300\n   */\n  @Prop({ reflect: true })\n  readonly debounceDelay: number = 300;\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  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /**\n   * The text entered by the user for filtering dropdown items.\n   */\n  @State()\n  filterText: string = '';\n\n  @State()\n  selectedValues: Set<string> = new Set();\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  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n\n    if (!this.value) {\n      const defaultValue = newValue.find(option => option.selected);\n      this.value = defaultValue?.value ?? '';\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  @Watch('value')\n  watchValueHandler(newValue: typeof this.value) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    // Stop propagation to prevent the event from affecting parent components like dialogs\n    event.stopPropagation();\n\n    // Update `open` based on the popover state\n    this.open = event.detail;\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('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 LISTENERS\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 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\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterText = input.value.toLowerCase();\n      this.filterItems();\n    }, this.debounceDelay);\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.options?.length > 1) {\n      const matchingItem = this.options.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 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.filterable || 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.filterable && 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\n            slot=\"content\"\n            style={this.maxHeight ? { maxHeight: this.maxHeight } : {}}\n          >\n            {this.options?.length > 0 ? (\n              <ul>\n                {this.options.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\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9bda5507.js');
+const index = require('./index-c56424e5.js');
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
 const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;