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

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

@@ -20,10 +20,6 @@ export class NvFielddropdown {
          * accessibility.
          */
         this.inputId = uuidv4();
-        /**
-         * 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.
@@ -36,12 +32,6 @@ export class NvFielddropdown {
          * 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
@@ -54,6 +44,20 @@ export class NvFielddropdown {
          * 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.
          */
@@ -62,6 +66,11 @@ export class NvFielddropdown {
          * 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>
@@ -75,7 +84,9 @@ export class NvFielddropdown {
         //#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) => {
@@ -106,8 +117,15 @@ export class NvFielddropdown {
             }
             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)
@@ -143,6 +161,31 @@ export class NvFielddropdown {
             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;
@@ -159,25 +202,6 @@ export class NvFielddropdown {
         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)) {
@@ -219,7 +243,27 @@ export class NvFielddropdown {
             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
     /**
@@ -308,32 +352,12 @@ export class NvFielddropdown {
     }
     //#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 (h(Host, { key: 'cf5547bf05355ee548804c697fd6a3524d68c1ba', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '76d23fc85b18e8bf4288d4f7bcf47a4af283fc23', htmlFor: this.inputId }, h("slot", { key: 'fe4faee394762bb88feeaea26ae508981cf25f95', name: "label" }, this.label))), h("nv-popover", { key: '477a08c8898de641e707bf34fc1584ad217f8beb', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '4154ac008b7868eb231eb951e88dd6feba4a758a', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'c59d39d2f18c2a5a8a40c2c796ca564f4356168c', name: "before-input" }), h("div", { key: '4eb6163061b5daf3aa4d6afe64970e0e5bf551d6', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'b183868757274f389a00a4cd8f745a137d6ead44', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (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 && (h("nv-iconbutton", { key: 'ca073047dfa1cf558c77fbae2d84e77fd5ae33bf', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: 'b847592deb061bcc9c2ec6649ba66290da54e1d0', name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { key: '023464c8dc5c2d502abff1e5738d861eccb31cd7', name: "after-input" })), h("div", { key: '7143961a33d624d653e066e5dc3f74865171303f', slot: "content" }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("ul", null, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (h("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'afee31c96dade12087ea2a476ef51dd235c34ad7', class: "description" }, h("slot", { key: '53ca646ce1abc0d2d96764b7e7cf08dcdf908909', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f282d962255459043b865d18c95a328cd5c7b2e8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'c01c9c62d1fb43c469b271f1e5f5ac5c401b112e', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '3864f366575665c4730dde8fd0d8e37c4ee11d82', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8ce42f691251468c6c054464ee3695e2bea90bd5', htmlFor: this.inputId }, h("slot", { key: '7e779704e1c3f9f6ee71455679c0e1d5d4ee8795', name: "label" }, this.label))), h("nv-popover", { key: '82cdd318e195ef44513684afba0e9c9772cad448', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '1189c8fd06db511cb51721ac14cdc54ef286691c', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '9069907e055d77a19c30c045e29eaf4bf998f9a0', name: "before-input" }), h("div", { key: '2c57f017b25754d4b5baf44e3457e95256dfdccf', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '939e749473e4df95a28fcf98e8b6d455408bff71', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (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 && (h("nv-iconbutton", { key: 'dcf54042b261665e5317ac122a93ca12fcedd9bc', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '3551957d94021648d731f97c1ba7ecdc8a325c15', name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { key: '48e9ae570e34cde3d20594a3f6518298ebbad02e', name: "after-input" })), h("div", { key: 'cec0a670f4158ca91aa45dcee7a5c25a584226f9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("ul", null, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (h("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e24dbfc170fb20e48ca2a474508a7c9beac6b87e', class: "description" }, h("slot", { key: '3b4429e2dd0b4f070309b00c6cba94cd343e7165', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b59ecbf446b142840f5c5933c505900abf126378', hidden: !this.error, class: "error-description" }, h("slot", { key: 'bf3c16d6a9fdc7a10741518153465a736eff808c', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fielddropdown"; }
     static get formAssociated() { return true; }
@@ -369,7 +393,7 @@ export class NvFielddropdown {
                 "reflect": true,
                 "defaultValue": "uuidv4()"
             },
-            "label": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -381,14 +405,14 @@ export class NvFielddropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and\nuser-friendly."
+                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
+                "attribute": "name",
                 "reflect": true
             },
-            "description": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -400,14 +424,14 @@ export class NvFielddropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
+                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and\nuser-friendly."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
+                "attribute": "label",
                 "reflect": true
             },
-            "placeholder": {
+            "description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -419,14 +443,14 @@ export class NvFielddropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display temporary text inside the input field to give users a hint about\nwhat to type. It's a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
+                    "text": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
+                "attribute": "description",
                 "reflect": true
             },
-            "name": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -438,33 +462,13 @@ export class NvFielddropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
+                    "text": "Display temporary text inside the input field to give users a hint about\nwhat to type. It's a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
+                "attribute": "placeholder",
                 "reflect": true
             },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "State of the dropdown popover."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "open",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,
@@ -530,6 +534,46 @@ export class NvFielddropdown {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the input field's content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won't be\nable to type or delete anything."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled prop lets you turn off the input field so that users can't\ntype in it. When disabled, the field is grayed out and won't respond to\nclicks or touches."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "error": {
                 "type": "boolean",
                 "mutable": false,
@@ -575,29 +619,29 @@ export class NvFielddropdown {
                 "attribute": "error-description",
                 "reflect": true
             },
-            "readonly": {
-                "type": "boolean",
+            "maxHeight": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display the input field's content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won't be\nable to type or delete anything."
+                    "text": "Defines the maximum height of the multiselect list when open."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
+                "attribute": "max-height",
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "''"
             },
-            "disabled": {
+            "open": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -607,11 +651,11 @@ export class NvFielddropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The disabled prop lets you turn off the input field so that users can't\ntype in it. When disabled, the field is grayed out and won't respond to\nclicks or touches."
+                    "text": "State of the dropdown popover."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
+                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
@@ -675,6 +719,29 @@ export class NvFielddropdown {
                 "getter": false,
                 "setter": false
             },
+            "debounceDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "300"
+                        }],
+                    "text": "Delay in milliseconds before the search is triggered when typing in the filter input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "debounce-delay",
+                "reflect": true,
+                "defaultValue": "300"
+            },
             "autofocus": {
                 "type": "boolean",
                 "mutable": false,
@@ -791,23 +858,23 @@ export class NvFielddropdown {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "value",
-                "methodName": "watchValueHandler"
-            }, {
                 "propName": "options",
                 "methodName": "handleOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "watchValueHandler"
             }];
     }
     static get listeners() {
         return [{
-                "name": "dropdownItemSelected",
-                "method": "handleDropdownItemSelected",
+                "name": "openChanged",
+                "method": "handleOpenChanged",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "openChanged",
-                "method": "handleOpenChanged",
+                "name": "dropdownItemSelected",
+                "method": "handleDropdownItemSelected",
                 "target": undefined,
                 "capture": false,
                 "passive": false