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

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

@@ -21,27 +21,16 @@ export class NvFieldmultiselect {
          */
         this.inputId = uuidv4();
         /**
-         * Defines the maximum height of the multiselect list when open.
-         */
-        this.maxHeight = '200px';
-        /**
-         * Text for the badge showing the number of selected items.
-         */
-        this.badgeLabel = '';
-        /**
-         * The text to display when no items match the filter.
+         * The autocomplete prop helps users fill out the input field faster by
+         * suggesting entries they've used before, like their email or address.
+         * You can turn it on to make forms more convenient or off to ensure users
+         * always type in fresh data.
          */
-        this.emptyResult = 'No results found';
+        this.autocomplete = 'off';
         /**
          * Marks the input field as required.
          */
         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.
          */
@@ -51,35 +40,32 @@ export class NvFieldmultiselect {
          */
         this.disabled = false;
         /**
-         * The autocomplete prop for faster input filling.
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
          */
-        this.autocomplete = 'off';
+        this.error = false;
         /**
-         * Enables or disables the filtering feature for the multiselect items.
+         * Defines the maximum height of the multiselect list when open.
          */
-        this.filterable = false;
+        this.maxHeight = '';
         /**
          * State of the multiselect popover.
          */
         this.open = false;
         /**
-         * List of selected values in the multiselect.
-         */
-        this.selectedValues = [];
-        /**
-         * Sorted options for display.
+         * The text to display when no items match the filter.
          */
-        this.sortedOptions = [];
+        this.emptyResult = 'No results found';
         /**
-         * The text entered by the user for filtering multiselect items.
+         * Enables or disables the filtering feature for the multiselect items.
          */
-        this.filterText = '';
+        this.filterable = false;
         /**
          * Delay in milliseconds before the search is triggered when typing in the filter input.
          * @default 300
          */
         this.debounceDelay = 300;
-        this.isHandlingEscape = false;
         /**
          * Applies focus to the input field as soon as the component is mounted. This
          * is equivalent to setting the native autofocus attribute on an <input>
@@ -90,6 +76,26 @@ export class NvFieldmultiselect {
          * Allows the field to stretch and fill the entire width of its container.
          */
         this.fluid = false;
+        /**
+         * Text for the badge showing the number of selected items.
+         */
+        this.badgeLabel = '';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        /**
+         * The text entered by the user for filtering multiselect items.
+         */
+        this.filterText = '';
+        /**
+         * List of selected values in the multiselect.
+         */
+        this.selectedValues = [];
+        /**
+         * Sorted options for display.
+         */
+        this.sortedOptions = [];
+        this.isHandlingEscape = false;
         /**
          * Handle badge close for options mode.
          */
@@ -299,76 +305,37 @@ export class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "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.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "content" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "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.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("ul", { role: "content" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "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.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
+            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "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.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
-    //#endregion PROPERTIES
+    //#endregion EVENTS
     /****************************************************************************/
-    //#region LIFECYCLE
-    /**
-     * Subscribe to click outside event.
-     */
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside.bind(this));
-    }
-    /**
-     * Set the mode state and handle options change.
-     */
-    componentWillLoad() {
-        var _a;
-        // Don't call handleOptionsChange if we are in slots mode
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-        // Specific initialization for slots mode
-        if (!this.options) {
-            Promise.resolve().then(() => {
-                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-                // Initialize selectedValues with checked items
-                this.selectedValues = items
-                    .filter(item => item.hasAttribute('checked'))
-                    .map(item => item.getAttribute('value') || '');
-                // Force a reorder after initialization
-                requestAnimationFrame(() => {
-                    this.reorderSlotContent();
-                });
-            });
-        }
-        // Initialize the sorted options array with the parsed options for initial rendering
-        if (this.options) {
-            this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
-        }
-        // Apply filtering if the multiselect is filterable and there is a value
-        if (this.filterable && this.value) {
-            this.filterText = String(this.value).toLocaleLowerCase();
-            this.filterItems();
-        }
-        else {
-            // Reset visibility state of all dropdown items
-            this.resetFilter();
-        }
-    }
-    /**
-     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
-     */
-    componentDidLoad() {
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
+    //#region WATCHERS
+    handleOptionsChange(newValue) {
+        if (!newValue)
+            return;
+        this.selectedValues = newValue
+            .filter(option => option.checked)
+            .map(option => option.value);
+        this.reorderOptionsContent();
     }
     /**
-     * Unsubscribe from click outside event.
+     * Emitted when the value changes.
      */
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    watchValueHandler() {
+        // Handle value change and update the corresponding multiselect item if it exists
+        this.setInitialSelection();
     }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
     /**
      * Emitted when the input loses focus.
      * @param {CustomEvent<boolean>} event - The event object containing the focus state.
@@ -426,21 +393,6 @@ export class NvFieldmultiselect {
             console.warn('Received itemChecked event with undefined or null value'); // Warning log
         }
     }
-    handleOptionsChange(newValue) {
-        if (!newValue)
-            return;
-        this.selectedValues = newValue
-            .filter(option => option.checked)
-            .map(option => option.value);
-        this.reorderOptionsContent();
-    }
-    /**
-     * Emitted when the value changes.
-     */
-    watchValueHandler() {
-        // Handle value change and update the corresponding multiselect item if it exists
-        this.setInitialSelection();
-    }
     // Add a listener for the slot content
     handleSlotChange(event) {
         // Check: we only want to reorder if it's the "content" slot
@@ -453,7 +405,67 @@ export class NvFieldmultiselect {
             });
         }
     }
-    //#endregion EVENTS
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Subscribe to click outside event.
+     */
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+    }
+    /**
+     * Set the mode state and handle options change.
+     */
+    componentWillLoad() {
+        var _a;
+        // Don't call handleOptionsChange if we are in slots mode
+        if (this.options) {
+            this.handleOptionsChange(this.options);
+        }
+        // Specific initialization for slots mode
+        if (!this.options) {
+            Promise.resolve().then(() => {
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                // Initialize selectedValues with checked items
+                this.selectedValues = items
+                    .filter(item => item.hasAttribute('checked'))
+                    .map(item => item.getAttribute('value') || '');
+                // Force a reorder after initialization
+                requestAnimationFrame(() => {
+                    this.reorderSlotContent();
+                });
+            });
+        }
+        // Initialize the sorted options array with the parsed options for initial rendering
+        if (this.options) {
+            this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
+        }
+        // Apply filtering if the multiselect is filterable and there is a value
+        if (this.filterable && this.value) {
+            this.filterText = String(this.value).toLocaleLowerCase();
+            this.filterItems();
+        }
+        else {
+            // Reset visibility state of all dropdown items
+            this.resetFilter();
+        }
+    }
+    /**
+     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
+     */
+    componentDidLoad() {
+        if (this.options) {
+            this.handleOptionsChange(this.options);
+        }
+    }
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    //#endregion LIFECYCLE
     /****************************************************************************/
     //#region METHODS
     /**
@@ -959,12 +971,12 @@ export class NvFieldmultiselect {
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["nv-fieldmultiselect.scss"]
+            "$": ["styles/nv-fieldmultiselect.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["nv-fieldmultiselect.css"]
+            "$": ["styles/nv-fieldmultiselect.css"]
         };
     }
     static get properties() {
@@ -1065,29 +1077,35 @@ export class NvFieldmultiselect {
                 "attribute": "placeholder",
                 "reflect": true
             },
-            "maxHeight": {
+            "autocomplete": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "`${TextInputAutocomplete}`",
+                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "references": {
+                        "TextInputAutocomplete": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::TextInputAutocomplete"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the maximum height of the multiselect list when open."
+                    "text": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they've used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-height",
+                "attribute": "autocomplete",
                 "reflect": true,
-                "defaultValue": "'200px'"
+                "defaultValue": "'off'"
             },
-            "badgeLabel": {
+            "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1097,35 +1115,54 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Text for the badge showing the number of selected items."
+                    "text": "Specifies the value of the input field."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "badge-label",
+                "attribute": "value",
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the input field as required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
                 "reflect": true,
-                "defaultValue": "''"
+                "defaultValue": "false"
             },
-            "emptyResult": {
-                "type": "string",
+            "readonly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text to display when no items match the filter."
+                    "text": "Display the input field's content without allowing users to change it."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "empty-result",
+                "attribute": "readonly",
                 "reflect": true,
-                "defaultValue": "'No results found'"
+                "defaultValue": "false"
             },
-            "required": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1137,11 +1174,11 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Marks the input field as required."
+                    "text": "Disables the input field."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
@@ -1190,29 +1227,29 @@ export class NvFieldmultiselect {
                 "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."
+                    "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",
@@ -1222,39 +1259,33 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disables the input field."
+                    "text": "State of the multiselect popover."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
+                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "autocomplete": {
+            "emptyResult": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`${TextInputAutocomplete}`",
-                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
-                    "references": {
-                        "TextInputAutocomplete": {
-                            "location": "import",
-                            "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::TextInputAutocomplete"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The autocomplete prop for faster input filling."
+                    "text": "The text to display when no items match the filter."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
+                "attribute": "empty-result",
                 "reflect": true,
-                "defaultValue": "'off'"
+                "defaultValue": "'No results found'"
             },
             "filterable": {
                 "type": "boolean",
@@ -1276,45 +1307,6 @@ export class NvFieldmultiselect {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the value of the input field."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "value",
-                "reflect": true
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "State of the multiselect popover."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "open",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "options": {
                 "type": "unknown",
                 "mutable": true,
@@ -1397,14 +1389,34 @@ export class NvFieldmultiselect {
                 "attribute": "fluid",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "badgeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the badge showing the number of selected items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge-label",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
+            "filterText": {},
             "selectedValues": {},
             "sortedOptions": {},
-            "filterText": {},
             "isHandlingEscape": {}
         };
     }