@nova-design-system/nova-webcomponents 3.0.0-beta.46 → 3.0.0

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

@@ -62,10 +62,6 @@ export class NvFieldmultiselect {
          * State of the multiselect popover.
          */
         this.open = false;
-        /**
-         * Options configuration for the multiselect items.
-         */
-        this.parsedOptions = [];
         /**
          * List of selected values in the multiselect.
          */
@@ -83,12 +79,6 @@ export class NvFieldmultiselect {
          * @default 300
          */
         this.debounceDelay = 300;
-        /**
-         * State for the mode of the multiselect.
-         * @type {'options' | 'slots'}
-         * @default 'options'
-         */
-        this.modeState = 'options'; // Default value
         this.isHandlingEscape = false;
         /**
          * Applies focus to the input field as soon as the component is mounted. This
@@ -109,7 +99,7 @@ export class NvFieldmultiselect {
                 item.style.display = '';
             });
             // Reorder options without the divider since there are no selected elements
-            this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);
+            this.options = this.options.filter(option => !option.isDivider);
             // Reorder options without the divider since there are no selected elements
             this.reorderOptionsContent();
         };
@@ -137,13 +127,6 @@ export class NvFieldmultiselect {
                 return;
             }
             this.filterText = '';
-            // Only reorder based on the mode
-            if (this.modeState === 'options') {
-                this.reorderOptionsContent();
-            }
-            else {
-                this.reorderSlotContent();
-            }
             // Reset filter if needed
             if (this.filterable) {
                 this.resetFilter();
@@ -312,7 +295,7 @@ 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 })) : (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 }, 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.parsedOptions.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, 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 })) : (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 }, 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()));
         };
         /**
          * Renders the component in slots mode
@@ -335,13 +318,13 @@ export class NvFieldmultiselect {
      * Set the mode state and handle options change.
      */
     componentWillLoad() {
-        this.modeState = this.options ? 'options' : 'slots';
+        var _a;
         // Don't call handleOptionsChange if we are in slots mode
-        if (this.modeState === 'options') {
+        if (this.options) {
             this.handleOptionsChange(this.options);
         }
         // Specific initialization for slots mode
-        if (this.modeState === 'slots') {
+        if (!this.options) {
             Promise.resolve().then(() => {
                 const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
                 // Initialize selectedValues with checked items
@@ -355,8 +338,8 @@ export class NvFieldmultiselect {
             });
         }
         // Initialize the sorted options array with the parsed options for initial rendering
-        if (this.modeState === 'options') {
-            this.sortedOptions = [...this.parsedOptions];
+        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) {
@@ -372,10 +355,8 @@ export class NvFieldmultiselect {
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
-        if (this.modeState === 'options') {
-            requestAnimationFrame(() => {
-                this.reorderOptionsContent();
-            });
+        if (this.options) {
+            this.handleOptionsChange(this.options);
         }
     }
     /**
@@ -400,6 +381,12 @@ export class NvFieldmultiselect {
         else {
             this.handlePopoverClose();
         }
+        if (this.options) {
+            this.reorderOptionsContent();
+        }
+        else {
+            this.reorderSlotContent();
+        }
     }
     /**
      * Listen for the `itemChecked` event emitted by child items.
@@ -433,41 +420,13 @@ export class NvFieldmultiselect {
             console.warn('Received itemChecked event with undefined or null value'); // Warning log
         }
     }
-    /**
-     * Emitted when the options change.
-     * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
-     */
     handleOptionsChange(newValue) {
-        if (typeof newValue === 'string') {
-            try {
-                const parsedOpts = JSON.parse(newValue);
-                this.selectedValues = parsedOpts
-                    .filter(option => option.checked)
-                    .map(option => option.value);
-                this.parsedOptions = [...parsedOpts];
-            }
-            catch (error) {
-                console.error('Error parsing options:', error);
-                this.parsedOptions = [];
-            }
-        }
-        else if (Array.isArray(newValue)) {
-            this.selectedValues = newValue
-                .filter(option => option.checked)
-                .map(option => option.value);
-            this.parsedOptions = [...newValue];
-        }
-        else {
-            this.parsedOptions = [];
-        }
-        // Wait for the options to be fully loaded
-        Promise.resolve().then(() => {
-            requestAnimationFrame(() => {
-                if (this.modeState === 'options') {
-                    this.reorderOptionsContent();
-                }
-            });
-        });
+        if (!newValue)
+            return;
+        this.selectedValues = newValue
+            .filter(option => option.checked)
+            .map(option => option.value);
+        this.reorderOptionsContent();
     }
     /**
      * Emitted when the value changes.
@@ -564,7 +523,7 @@ export class NvFieldmultiselect {
      * Reorder the content of the slot.
      */
     reorderSlotContent() {
-        if (this.modeState === 'options')
+        if (this.options)
             return;
         const ul = this.el.querySelector('ul');
         if (!ul)
@@ -628,7 +587,7 @@ export class NvFieldmultiselect {
             existingEmptyMessage.remove();
         }
         if (!this.filterText.trim()) {
-            if (this.parsedOptions && this.parsedOptions.length > 0) {
+            if (this.options && this.options.length > 0) {
                 // Reset options display
                 const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
                 items.forEach(item => {
@@ -651,11 +610,11 @@ export class NvFieldmultiselect {
         }
         const normalizedFilter = this.normalizeText(this.filterText);
         let hasVisibleItems = false;
-        if (this.parsedOptions && this.parsedOptions.length > 0) {
+        if (this.options && this.options.length > 0) {
             // Filter options mode
             const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach(item => {
-                const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
+                const option = this.options.find(opt => opt.value === item.getAttribute('value'));
                 if (option && !option.isDivider) {
                     const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
                         this.normalizeText(option.value).includes(normalizedFilter);
@@ -740,7 +699,7 @@ export class NvFieldmultiselect {
      * Filter multiselect items in slots mode
      */
     filterSlotsItems() {
-        if (this.modeState === 'options')
+        if (this.options)
             return;
         const ul = this.el.querySelector('ul');
         if (!ul)
@@ -876,7 +835,7 @@ export class NvFieldmultiselect {
             // Do the reorder and wait a bit before closing
             const handleEscape = async () => {
                 this.isHandlingEscape = true; // Disable the hide listener
-                if (this.modeState === 'options') {
+                if (this.options) {
                     this.reorderOptionsContent();
                 }
                 else {
@@ -988,9 +947,7 @@ export class NvFieldmultiselect {
      * @returns {any} The JSX for the component
      */
     render() {
-        return this.modeState === 'options'
-            ? this.renderOptionsMode()
-            : this.renderSlotsMode();
+        return this.options ? this.renderOptionsMode() : this.renderSlotsMode();
     }
     static get is() { return "nv-fieldmultiselect"; }
     static get formAssociated() { return true; }
@@ -1353,29 +1310,24 @@ export class NvFieldmultiselect {
                 "defaultValue": "false"
             },
             "options": {
-                "type": "string",
-                "mutable": false,
+                "type": "unknown",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Additional description for the option */\n    description?: string;\n    /** Whether this option is pre-checked */\n    checked?: boolean;\n  }[]",
+                    "resolved": "{ label: string; value: string; isDivider?: boolean; disabled?: boolean; description?: string; checked?: boolean; }[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "description",
-                            "text": "The options are passed as a JSON string."
-                        }, {
                             "name": "example",
-                            "text": "options='[{\"label\": \"Option 1\", \"value\": \"option1\"}, {\"label\": \"Option 2\", \"value\": \"option2\"}]'"
+                            "text": "options=[{\n \"label\": \"Option 1\",\n \"value\": \"option1\",\n},\n{\n \"label\": \"Option 2\",\n \"value\": \"option2\",\n}]"
                         }],
-                    "text": "List of options available in the multiselect."
+                    "text": "List of options used to automatically generate dropdown items. This\nprovides an alternative to using the slot manually."
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "options",
-                "reflect": true
+                "setter": false
             },
             "debounceDelay": {
                 "type": "number",
@@ -1424,11 +1376,9 @@ export class NvFieldmultiselect {
     }
     static get states() {
         return {
-            "parsedOptions": {},
             "selectedValues": {},
             "sortedOptions": {},
             "filterText": {},
-            "modeState": {},
             "isHandlingEscape": {}
         };
     }