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

package/dist/components/nv-fieldmultiselect.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
-import { d as defineCustomElement$8 } from './p-5a5f11c2.js';
-import { d as defineCustomElement$7 } from './p-9d6aaf76.js';
-import { d as defineCustomElement$6 } from './p-56ef8131.js';
-import { d as defineCustomElement$5 } from './p-91b58443.js';
-import { d as defineCustomElement$4 } from './p-a9e1bf70.js';
-import { d as defineCustomElement$3 } from './p-7b89fb48.js';
-import { d as defineCustomElement$2 } from './p-664c5a14.js';
+import { d as defineCustomElement$8 } from './p-373926aa.js';
+import { d as defineCustomElement$7 } from './p-e00cbb8a.js';
+import { d as defineCustomElement$6 } from './p-2012b8ba.js';
+import { d as defineCustomElement$5 } from './p-591730e7.js';
+import { d as defineCustomElement$4 } from './p-dc3faba3.js';
+import { d as defineCustomElement$3 } from './p-150daf68.js';
+import { d as defineCustomElement$2 } from './p-b7b78e64.js';
 import { v as v4 } from './p-f5ff676c.js';
 
 const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect 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-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect 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%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect 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-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .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-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
@@ -68,10 +68,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * State of the multiselect popover.
          */
         this.open = false;
-        /**
-         * Options configuration for the multiselect items.
-         */
-        this.parsedOptions = [];
         /**
          * List of selected values in the multiselect.
          */
@@ -89,12 +85,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * @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
@@ -115,7 +105,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                 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();
         };
@@ -143,13 +133,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                 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();
@@ -318,7 +301,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * @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
@@ -341,13 +324,13 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * 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
@@ -361,8 +344,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             });
         }
         // 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) {
@@ -378,10 +361,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * 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);
         }
     }
     /**
@@ -406,6 +387,12 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         else {
             this.handlePopoverClose();
         }
+        if (this.options) {
+            this.reorderOptionsContent();
+        }
+        else {
+            this.reorderSlotContent();
+        }
     }
     /**
      * Listen for the `itemChecked` event emitted by child items.
@@ -439,41 +426,13 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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.
@@ -570,7 +529,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * Reorder the content of the slot.
      */
     reorderSlotContent() {
-        if (this.modeState === 'options')
+        if (this.options)
             return;
         const ul = this.el.querySelector('ul');
         if (!ul)
@@ -634,7 +593,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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 => {
@@ -657,11 +616,11 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         }
         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);
@@ -746,7 +705,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * Filter multiselect items in slots mode
      */
     filterSlotsItems() {
-        if (this.modeState === 'options')
+        if (this.options)
             return;
         const ul = this.el.querySelector('ul');
         if (!ul)
@@ -882,7 +841,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             // 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 {
@@ -994,9 +953,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * @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 formAssociated() { return true; }
     get el() { return this; }
@@ -1023,14 +980,12 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         "filterable": [516],
         "value": [1537],
         "open": [1540],
-        "options": [513],
+        "options": [1040],
         "debounceDelay": [514, "debounce-delay"],
         "autofocus": [516],
-        "parsedOptions": [32],
         "selectedValues": [32],
         "sortedOptions": [32],
         "filterText": [32],
-        "modeState": [32],
         "isHandlingEscape": [32],
         "getFilterText": [64],
         "resetFilter": [64],