@nova-design-system/nova-webcomponents 3.10.0 → 3.11.0

package/hydrate/index.mjs

@@ -5413,7 +5413,7 @@ const CUSTOM_MONTH_NAMES = {
     ],
 };
 
-const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 var NvAlertStyle0 = nvAlertCss;
 
 /**
@@ -18792,6 +18792,9 @@ class NvFielddropdownitemcheck {
          * Disables the item, preventing any user interaction.
          */
         this.disabled = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
         /**
          * when the child <nv-fieldcheckbox> change its `checked` state,
          * update `this.checked` and emit `itemChecked`.
@@ -18820,8 +18823,11 @@ class NvFielddropdownitemcheck {
             }
         };
     }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
     render() {
-        return (hAsync(Host, { key: '869eb969c0cff66f1947673e5aa3e0c677a07421', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '4bbe45597bdd0f30c8e9a255e52d08be476fab1a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, hAsync("slot", { key: 'f53f44e3fdb78894e9bb37fa455b1407efea17b1' }), hAsync("slot", { key: 'aacd757c1fec541a4fc7b4f2683281aef31ee135', name: "main" }), hAsync("slot", { key: 'ef2f761a3a1f05dcba6145efc89830ddc82af27d', name: "label" }), hAsync("slot", { key: '610700f871b524f1f89538d03bd6c16167e3b24e', name: "description" }))));
+        return (hAsync(Host, { key: 'cb922f0c0224c950ab5a87783028f2909eb1e39c', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '6f8748022131a8cd31b0f69851313f80c330172a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, hAsync("slot", { key: '20d1014accc6cfc00658703057b25037175287af' }), hAsync("slot", { key: 'a7e61eed6bc72d3a14096cac2c195629a0ce2928', name: "main" }), hAsync("slot", { key: '93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14', name: "label" }), hAsync("slot", { key: '837359fc1fea49e0dea221039dc7466cdc86b757', name: "description" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemcheckStyle0; }
@@ -18859,6 +18865,7 @@ class NvFieldmultiselect {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
+        this.isBulkOperation = false;
         /**
          * Sets the ID for the input element and the for attribute of the associated
          * label. If no ID is provided, a random one will be automatically generated
@@ -18966,6 +18973,9 @@ class NvFieldmultiselect {
         this.isSelectAllSectionVisible = true;
         // Add the flag to the class
         this.preventBlurClose = false;
+        this.handleMouseDownPreventBlur = () => {
+            this.preventBlurClose = true;
+        };
         /**
          * Handle badge close for options mode.
          */
@@ -19152,6 +19162,11 @@ class NvFieldmultiselect {
          */
         this.handleInputBlurSlots = () => {
             setTimeout(() => {
+                // Honor preventBlurClose to avoid closing when interacting inside the popover
+                if (this.preventBlurClose) {
+                    this.preventBlurClose = false;
+                    return; // Don't close the popover
+                }
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
@@ -19188,24 +19203,33 @@ class NvFieldmultiselect {
         this.toggleSelectAllOptions = (selectAll) => {
             if (!this.options)
                 return;
-            // Get visible and enabled option values from DOM
-            const visibleOptionValues = this.getVisibleEnabledOptionItems();
-            console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
-            if (selectAll) {
-                // Select all visible options - merge with existing selections
-                this.value = [...new Set([...this.value, ...visibleOptionValues])];
+            this.isBulkOperation = true; // Set flag to suppress individual emissions
+            try {
+                // Get visible and enabled option values from DOM
+                const visibleOptionValues = this.getVisibleEnabledOptionItems();
+                console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
+                if (selectAll) {
+                    // Select all visible options - merge with existing selections
+                    this.value = [...new Set([...this.value, ...visibleOptionValues])];
+                }
+                else {
+                    // Deselect only the visible options, keep others that might be filtered out
+                    this.value = this.value.filter(val => !visibleOptionValues.includes(val));
+                }
+                console.info('[SelectAll][Options] New value after toggle:', this.value);
+                // Emit the change event
+                this.valueChanged.emit(this.value);
+                // Synchronize child components
+                this.syncChildComponents();
+                // Reorder content to move selected items to top
+                this.reorderOptionsContent();
             }
-            else {
-                // Deselect only the visible options, keep others that might be filtered out
-                this.value = this.value.filter(val => !visibleOptionValues.includes(val));
+            finally {
+                // Defer reset to next frame to ensure any async child emissions are ignored
+                requestAnimationFrame(() => {
+                    this.isBulkOperation = false; // Reset flag
+                });
             }
-            console.info('[SelectAll][Options] New value after toggle:', this.value);
-            // Emit the change event
-            this.valueChanged.emit(this.value);
-            // Synchronize child components
-            this.syncChildComponents();
-            // Reorder content to move selected items to top
-            this.reorderOptionsContent();
         };
         /**
          * Toggles the selection state of all non-disabled slot items.
@@ -19214,31 +19238,40 @@ class NvFieldmultiselect {
         this.toggleSelectAllSlots = (selectAll) => {
             if (this.options)
                 return; // Only for slots mode
-            // Get visible and enabled items
-            const items = this.getVisibleEnabledSlotItems();
-            console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
-            if (selectAll) {
-                // Select all visible items
-                const allActiveValues = items
-                    .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
-                    .filter(value => value !== '');
-                this.value = [...new Set([...this.value, ...allActiveValues])];
+            this.isBulkOperation = true; // Set flag to suppress individual emissions
+            try {
+                // Get visible and enabled items
+                const items = this.getVisibleEnabledSlotItems();
+                console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
+                if (selectAll) {
+                    // Select all visible items
+                    const allActiveValues = items
+                        .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
+                        .filter(value => value !== '');
+                    this.value = [...new Set([...this.value, ...allActiveValues])];
+                }
+                else {
+                    // Deselect only the visible items, keep others that might be filtered out
+                    const visibleValues = items
+                        .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
+                        .filter(value => value !== '');
+                    this.value = this.value.filter(val => !visibleValues.includes(val));
+                }
+                console.info('[SelectAll][Slots] New value after toggle:', this.value);
+                // Emit the change event
+                this.valueChanged.emit(this.value);
+                // Force synchronization with a small delay to ensure DOM is updated
+                requestAnimationFrame(() => {
+                    this.syncChildComponents();
+                    this.reorderSlotContent();
+                });
+            }
+            finally {
+                // Defer reset to next frame to ensure any async child emissions are ignored
+                requestAnimationFrame(() => {
+                    this.isBulkOperation = false; // Reset flag
+                });
             }
-            else {
-                // Deselect only the visible items, keep others that might be filtered out
-                const visibleValues = items
-                    .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
-                    .filter(value => value !== '');
-                this.value = this.value.filter(val => !visibleValues.includes(val));
-            }
-            console.info('[SelectAll][Slots] New value after toggle:', this.value);
-            // Emit the change event
-            this.valueChanged.emit(this.value);
-            // Force synchronization with a small delay to ensure DOM is updated
-            requestAnimationFrame(() => {
-                this.syncChildComponents();
-                this.reorderSlotContent();
-            });
         };
         /**
          * Handle click on the select all checkbox in options mode.
@@ -19290,16 +19323,10 @@ class NvFieldmultiselect {
                     width: '0',
                     height: '0',
                     pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, hAsync("span", null, this.placeholder)))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.clearFilterText })), hAsync("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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllOptionsButton() && (hAsync("div", { class: "select-all-container" }, hAsync("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (hAsync("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, hAsync("span", null, this.placeholder)))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText })), hAsync("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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllOptionsButton() && (hAsync("div", { class: "select-all-container" }, hAsync("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (hAsync("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
                     'indeterminate', label: this.getSelectAllCheckboxStateOptions() === 'unchecked'
                     ? this.selectAllLabel
-                    : this.deselectAllLabel, onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.handleSelectAllCheckboxOptionsClick }))))), hAsync("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
+                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxOptionsClick }))))), hAsync("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (hAsync("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
@@ -19312,16 +19339,10 @@ class NvFieldmultiselect {
                     width: '0',
                     height: '0',
                     pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), hAsync("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, hAsync("span", null, this.placeholder)))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), hAsync("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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllSlotButton() && (hAsync("div", { class: "select-all-container" }, hAsync("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (hAsync("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), hAsync("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, hAsync("span", null, this.placeholder)))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (hAsync("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), hAsync("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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllSlotButton() && (hAsync("div", { class: "select-all-container" }, hAsync("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (hAsync("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
                     'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
                     ? this.selectAllLabel
-                    : this.deselectAllLabel, onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.handleSelectAllCheckboxSlotsClick }))))), hAsync("slot", { name: "content" }))), this.renderDescriptions()));
+                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxSlotsClick }))))), hAsync("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -19350,7 +19371,12 @@ class NvFieldmultiselect {
         this.reorderOptionsContent();
     }
     watchValueHandler() {
-        console.info('[Watch:value] Value changed:', this.value);
+        console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
+        // Skip processing during bulk operations
+        if (this.isBulkOperation) {
+            console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
+            return;
+        }
         // Synchronize child components when value changes programmatically
         if (this.el && this.el.isConnected) {
             this.syncChildComponents();
@@ -19395,7 +19421,9 @@ class NvFieldmultiselect {
      * @param {CustomEvent} event - The event object containing the selected value and its checked state.
      */
     handleItemChecked(event) {
-        if (this.disabled || this.readonly) {
+        if (this.disabled || this.readonly || this.isBulkOperation) {
+            // Skip processing itemChecked events during bulk operations
+            console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
             return;
         }
         const { value, checked } = event.detail;
@@ -19403,21 +19431,23 @@ class NvFieldmultiselect {
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
+            let hasChanged = false;
             if (checked && valueIndex === -1) {
                 newValue.push(value);
+                hasChanged = true;
             }
             else if (!checked && valueIndex > -1) {
                 newValue.splice(valueIndex, 1);
+                hasChanged = true;
             }
             console.info('[Event:itemChecked] newValue after update:', newValue);
-            // Always update the state and emit the event when an item is checked/unchecked
-            this.value = newValue;
-            this.valueChanged.emit(this.value);
-            // Update the checked state of all items to ensure consistency
-            this.syncChildComponents();
+            if (hasChanged) {
+                this.value = newValue;
+                this.valueChanged.emit(this.value);
+                this.syncChildComponents();
+            }
             // Preserve the filter text in the input
             if (this.filterable && this.inputElement) {
-                // Keep the current filter text in the input
                 this.inputElement.value = this.filterText;
             }
         }
@@ -19445,7 +19475,11 @@ class NvFieldmultiselect {
      */
     connectedCallback() {
         console.info('[Lifecycle] connectedCallback - value:', this.value);
-        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Bind once and reuse the same reference for add/remove to avoid leaks
+        if (!this._boundHandleClickOutside) {
+            this._boundHandleClickOutside = this.handleClickOutside.bind(this);
+        }
+        document.addEventListener('click', this._boundHandleClickOutside);
     }
     /**
      * Set the mode state and handle options change.
@@ -19503,7 +19537,9 @@ class NvFieldmultiselect {
      */
     disconnectedCallback() {
         console.info('[Lifecycle] disconnectedCallback - value:', this.value);
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
+        if (this._boundHandleClickOutside) {
+            document.removeEventListener('click', this._boundHandleClickOutside);
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
@@ -20032,13 +20068,23 @@ class NvFieldmultiselect {
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
             const shouldBeChecked = this.value.includes(itemValue);
             console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
-            if (shouldBeChecked) {
-                item.setAttribute('checked', '');
-                item.checked = true;
-            }
-            else {
-                item.removeAttribute('checked');
-                item.checked = false;
+            // Only update if the checked state differs to avoid triggering unnecessary events
+            if (item.checked !== shouldBeChecked) {
+                // Set attribute and property, but avoid triggering itemChecked during bulk
+                if (this.isBulkOperation) {
+                    // Directly update the DOM attribute to avoid triggering the setter
+                    if (shouldBeChecked) {
+                        item.setAttribute('checked', '');
+                    }
+                    else {
+                        item.removeAttribute('checked');
+                    }
+                    // Update internal state without emitting events (assumes nv-fielddropdownitemcheck respects this)
+                    item.checked = shouldBeChecked;
+                }
+                else {
+                    item.checked = shouldBeChecked;
+                }
             }
             console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
         });
@@ -26965,7 +27011,7 @@ class NvTogglebuttongroup {
     }; }
 }
 
-const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 var NvTooltipStyle0 = nvTooltipCss;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-webcomponents",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/dist/components/p-2ef4fb88.js.map

@@ -1 +0,0 @@
-{"file":"p-2ef4fb88.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,sxBAAsxB,CAAC;AAC5yB,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAiDjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  user-select: none;\n  &:has([fluid]:not([fluid='false'])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow:\n    0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n    var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n    0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n    var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  [data-scope='popover'] {\n    @include tooltip-styles();\n\n    [data-scope='arrow'] {\n      @include arrow-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ reflect: false, mutable: true })\n  triggerElement: Element;\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won’t appear.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n   * element.\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(child => {\n        return child.getAttribute('slot') === null;\n      });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/p-51a156ff.js.map

@@ -1 +0,0 @@
-{"file":"p-51a156ff.js","mappings":";;;AAAA,MAAM,2BAA2B,GAAG,yWAAyW,CAAC;AAC9Y,uCAAe,2BAA2B;;MCoB7B,wBAAwB;IALrC;;;;;;;;;QAeE,YAAO,GAAY,KAAK,CAAC;;;;QA+BhB,aAAQ,GAAY,KAAK,CAAC;;;;;;QA+B3B,2BAAsB,GAAG,CAAC,KAA2B;YAC3D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;;YAE1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;;QAGM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF,CAAC;KAuBH;IArBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7B,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC/B,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,IAE7C,8DAAa,EACb,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CACf,CACd,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  cursor: pointer;\n  display: flex;\n  padding: var(--list-dropdown-item-padding-y)  var(--list-dropdown-item-padding-x);\n  border-radius: var(--list-dropdown-item-radius);\n\n  &:hover {\n    background-color: var(--components-list-dropdown-item-background-hover);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          labelPlacement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        >\n          <slot></slot>\n          <slot name=\"main\"></slot>\n          <slot name=\"label\"></slot>\n          <slot name=\"description\"></slot>\n        </nv-fieldcheckbox>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/native/p-2a3325fb.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,F as s,H as o,g as n}from"./p-d0a33e64.js";import{v as r}from"./p-f5ff676c.js";const l='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-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;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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 nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}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%;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 input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.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}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}';const a=l;const c=class{constructor(n){e(this,n);this.valueChanged=t(this,"valueChanged",7);this.filterTextChanged=t(this,"filterTextChanged",7);this.inputId=r();this.autocomplete="off";this.required=false;this.readonly=false;this.disabled=false;this.error=false;this.maxHeight="";this.open=false;this.fluid=false;this.value=[];this.filterable=false;this.emptyResult="No results found";this.debounceDelay=300;this.autofocus=false;this.badgeLabel="";this.filterText="";this.enableSelectAll=false;this.selectAllLabel="Select/deselect all";this.deselectAllLabel="Select/deselect all";this.sortedOptions=[];this.isHandlingEscape=false;this.hasFilterResults=true;this.isSelectAllSectionVisible=true;this.preventBlurClose=false;this.handleBadgeCloseOptions=()=>{console.info("handleBadgeCloseOptions:",this.value);this.value=[];this.valueChanged.emit(this.value);const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.checked=false;e.style.display=""}));this.options=this.options.filter((e=>!e.isDivider));this.reorderOptionsContent()};this.handleBadgeCloseSlots=()=>{console.info("handleBadgeCloseSlots:",this.value);this.value=[];this.valueChanged.emit(this.value);const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.checked=false;e.style.display=""}));requestAnimationFrame((()=>{this.reorderSlotContent()}))};this.handlePopoverClose=()=>{if(this.isHandlingEscape){return}if(this.filterable){this.resetFilter()}};this.clearFilterText=()=>{this.filterText="";this.filterTextChanged.emit("");this.resetFilter();this.hasFilterResults=true};this.handleInputBlurOptions=()=>{setTimeout((()=>{if(this.preventBlurClose){this.preventBlurClose=false;return}if(!this.el.contains(document.activeElement)){this.open=false;if(this.filterable){this.clearFilterText()}}}),150)};this.handleInputContainerClickOptions=e=>{if(this.disabled||this.readonly){return}const t=e.target;if(t.tagName==="P"||t.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const t=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",t)}}};this.handleInputContainerClickSlots=e=>{if(this.disabled||this.readonly){return}const t=e.target;if(t.tagName==="P"||t.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const t=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",t)}}};this.handleInputOptions=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const t=e.target;this.filterText=t.value;this.filterTextChanged.emit(this.filterText);if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterItemsOption()}),this.debounceDelay)};this.handleInputSlots=e=>{if(!this.filterable)return;if(this.disabled||this.readonly)return;const t=e.target;this.filterText=t.value;this.filterTextChanged.emit(this.filterText);if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterSlotsItems()}),this.debounceDelay)};this.handleInputFocusOptions=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputFocusSlots=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputBlurSlots=()=>{setTimeout((()=>{if(!this.el.contains(document.activeElement)){this.open=false;if(this.filterable){this.clearFilterText()}}}),150)};this.togglePopoverOptions=()=>{if(this.disabled||this.readonly){return}this.open=!this.open};this.togglePopoverSlots=()=>{if(this.disabled||this.readonly){return}this.open=!this.open};this.toggleSelectAllOptions=e=>{if(!this.options)return;const t=this.getVisibleEnabledOptionItems();console.info("[SelectAll][Options] toggleSelectAllOptions called. selectAll:",e,"visibleOptionValues:",t,"Current value:",this.value);if(e){this.value=[...new Set([...this.value,...t])]}else{this.value=this.value.filter((e=>!t.includes(e)))}console.info("[SelectAll][Options] New value after toggle:",this.value);this.valueChanged.emit(this.value);this.syncChildComponents();this.reorderOptionsContent()};this.toggleSelectAllSlots=e=>{if(this.options)return;const t=this.getVisibleEnabledSlotItems();console.info("[SelectAll][Slots] toggleSelectAllSlots called. selectAll:",e,"visible slot items:",t.map((e=>e.getAttribute("value")||e.getAttribute("label"))),"Current value:",this.value);if(e){const e=t.map((e=>e.getAttribute("value")||e.getAttribute("label")||"")).filter((e=>e!==""));this.value=[...new Set([...this.value,...e])]}else{const e=t.map((e=>e.getAttribute("value")||e.getAttribute("label")||"")).filter((e=>e!==""));this.value=this.value.filter((t=>!e.includes(t)))}console.info("[SelectAll][Slots] New value after toggle:",this.value);this.valueChanged.emit(this.value);requestAnimationFrame((()=>{this.syncChildComponents();this.reorderSlotContent()}))};this.handleSelectAllCheckboxOptionsClick=e=>{e.stopPropagation();e.preventDefault();console.info("[handleSelectAllCheckboxOptionsClick] event:",e);const t=this.getSelectAllCheckboxStateOptions();console.info("[SelectAll][Options] Checkbox clicked. Current state:",t,"Current value:",this.value);const i=t==="unchecked"||t==="indeterminate";console.info("[SelectAll][Options] shouldSelectAll:",i);this.toggleSelectAllOptions(i)};this.handleSelectAllCheckboxSlotsClick=e=>{e.stopPropagation();e.preventDefault();console.info("[handleSelectAllCheckboxSlotsClick] event:",e);const t=this.getSelectAllCheckboxStateSlots();console.info("[SelectAll][Slots] Checkbox clicked. Current state:",t,"Current value:",this.value);const i=t==="unchecked"||t==="indeterminate";console.info("[SelectAll][Slots] shouldSelectAll:",i);this.toggleSelectAllSlots(i)};this.renderOptionsMode=()=>i(o,{"aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{htmlFor:this.inputId},i("slot",{name:"label"},this.label)),i("nv-popover",{ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{class:"input-wrapper-multiselect",slot:"trigger"},i("slot",{name:"before-input"}),i("div",{class:"input-container-multiselect"},i("slot",{name:"leading-input"}),this.value.length>0&&i("nv-badge",{slot:"leading-input","prevent-auto-close":true,color:"10",dismissible:this.value.length>0,label:`${this.value.length} ${this.badgeLabel}`,"aria-label":`Clear all ${this.value.length} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseOptions}),this.filterable||this.disabled||this.readonly?i("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.filterText,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputOptions,onFocus:this.handleInputFocusOptions,onBlur:this.handleInputBlurOptions,onKeyDown:this.handleKeyDown,"data-scope":"focusable","aria-label":this.label,"aria-controls":`${this.inputId}-listbox`}):i(s,null,i("input",{id:this.inputId,type:"text",style:{position:"absolute",opacity:"0",width:"0",height:"0",pointerEvents:"none"},tabIndex:-1,"aria-hidden":"true",autoComplete:this.autocomplete,name:this.name,onFocus:this.handleInputFocusOptions}),i("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClickOptions,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusOptions,"aria-label":this.label,"aria-controls":`${this.inputId}-listbox`,"data-scope":"focusable",role:"button"},i("span",null,this.placeholder))),this.error&&i("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),this.filterable&&this.filterText.length>0&&i("nv-iconbutton",{"data-scope":"clear-filter",name:"x",size:"md",emphasis:"lower","aria-label":"Clear filter text",tabindex:"-1",title:"Clear filter text",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.clearFilterText}),i("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",title:this.open?"Hide dropdown":"Show dropdown",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.togglePopoverOptions})),i("slot",{name:"after-input"})),i("div",{id:`${this.inputId}-listbox`,slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},this.shouldShowToggleAllOptionsButton()&&i("div",{class:"select-all-container"},i("div",{class:"select-all-header"},this.isSelectAllSectionVisible&&i("nv-fieldcheckbox",{checked:this.getSelectAllCheckboxStateOptions()==="checked",indeterminate:this.getSelectAllCheckboxStateOptions()==="indeterminate",label:this.getSelectAllCheckboxStateOptions()==="unchecked"?this.selectAllLabel:this.deselectAllLabel,onMouseDown:()=>{this.preventBlurClose=true},onClick:this.handleSelectAllCheckboxOptionsClick}))),i("ul",{role:"listbox","aria-multiselectable":"true"},this.options.map((e=>i("nv-fielddropdownitemcheck",{role:"option",label:e.label,description:e.description,value:e.value,checked:this.value.includes(e.value),disabled:e.disabled})))))),this.renderDescriptions());this.renderSlotsMode=()=>i(o,{"aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{htmlFor:this.inputId},i("slot",{name:"label"},this.label)),i("nv-popover",{ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{class:"input-wrapper-multiselect",slot:"trigger"},i("slot",{name:"before-input"}),i("div",{class:"input-container-multiselect",onClick:this.handleInputContainerClickSlots},i("slot",{name:"leading-input"}),this.value.length>0&&i("nv-badge",{slot:"leading-input","prevent-auto-close":true,color:"10",dismissible:this.value.length>0,label:`${this.value.length} ${this.badgeLabel}`,"aria-label":`Clear all ${this.value.length} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseSlots}),this.filterable||this.disabled||this.readonly?i("input",{id:this.inputId,ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.filterText,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputSlots,onFocus:this.handleInputFocusSlots,onBlur:this.handleInputBlurSlots,onKeyDown:this.handleKeyDown,"data-scope":"focusable","aria-label":this.label,"aria-controls":`${this.inputId}-listbox`}):i(s,null,i("input",{id:this.inputId,type:"text",style:{position:"absolute",opacity:"0",width:"0",height:"0",pointerEvents:"none"},tabIndex:-1,"aria-hidden":"true",autoComplete:this.autocomplete,name:this.name,onFocus:this.handleInputFocusSlots}),i("p",{id:this.inputId,class:"non-filterable-text","aria-label":this.label,onClick:this.handleInputContainerClickSlots,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusSlots,"aria-controls":`${this.inputId}-listbox`,"data-scope":"focusable",role:"button"},i("span",null,this.placeholder))),this.error&&i("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),this.filterable&&this.filterText.length>0&&i("nv-iconbutton",{name:"x",size:"md",emphasis:"lower",tabindex:"-1",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.clearFilterText,"aria-label":"Clear filter text"}),i("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",title:this.open?"Hide dropdown":"Show dropdown",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.togglePopoverSlots})),i("slot",{name:"after-input"})),i("div",{id:`${this.inputId}-listbox`,slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},this.shouldShowToggleAllSlotButton()&&i("div",{class:"select-all-container"},i("div",{class:"select-all-header"},this.isSelectAllSectionVisible&&i("nv-fieldcheckbox",{checked:this.getSelectAllCheckboxStateSlots()==="checked",indeterminate:this.getSelectAllCheckboxStateSlots()==="indeterminate",label:this.getSelectAllCheckboxStateSlots()==="unchecked"?this.selectAllLabel:this.deselectAllLabel,onMouseDown:()=>{this.preventBlurClose=true},onClick:this.handleSelectAllCheckboxSlotsClick}))),i("slot",{name:"content"}))),this.renderDescriptions())}handleOptionsChange(e){console.info("[Watch:options] newValue:",e);console.info("[Watch:options] current value before update:",this.value);if(!e)return;if(this.value===undefined||this.value.length===0){this.value=e.filter((e=>e.checked)).map((e=>e.value));console.info("[Watch:options] updated value from checked options:",this.value)}else{e.forEach((e=>{e.checked=this.value.includes(e.value)}));console.info("[Watch:options] options checked state synced to value:",e)}this.reorderOptionsContent()}watchValueHandler(){console.info("[Watch:value] Value changed:",this.value);if(this.el&&this.el.isConnected){this.syncChildComponents()}if(this.options){this.options.forEach((e=>{e.checked=this.value.includes(e.value)}))}}handleOpenChanged(e){e.stopPropagation();this.open=e.detail;if(this.open){if(this.filterText){this.filterItems()}}else{this.handlePopoverClose()}if(this.options){this.reorderOptionsContent()}else{this.reorderSlotContent()}}handleItemChecked(e){if(this.disabled||this.readonly){return}const{value:t,checked:i}=e.detail;console.info("[Event:itemChecked] value:",t,"checked:",i,"current value:",this.value);if(t!==undefined&&t!==null){const e=[...this.value];const s=e.indexOf(t);if(i&&s===-1){e.push(t)}else if(!i&&s>-1){e.splice(s,1)}console.info("[Event:itemChecked] newValue after update:",e);this.value=e;this.valueChanged.emit(this.value);this.syncChildComponents();if(this.filterable&&this.inputElement){this.inputElement.value=this.filterText}}else{console.warn("[Event:itemChecked] Received itemChecked event with undefined or null value")}}handleSlotChange(e){const t=e.target;if(t&&t.name==="content"){requestAnimationFrame((()=>{this.reorderSlotContent()}))}}connectedCallback(){console.info("[Lifecycle] connectedCallback - value:",this.value);document.addEventListener("click",this.handleClickOutside.bind(this))}componentWillLoad(){var e;console.info("[Lifecycle] componentWillLoad - value:",this.value,"options:",this.options);if(this.options){this.handleOptionsChange(this.options)}if(!this.options){this.initializeValueFromSlots();Promise.resolve().then((()=>{this.syncChildComponents();requestAnimationFrame((()=>{this.reorderSlotContent()}))}))}if(this.options){this.sortedOptions=[...(e=this.options)!==null&&e!==void 0?e:[]]}if(!this.filterText){this.resetFilter()}this.hasFilterResults=true}componentDidLoad(){console.info("[Lifecycle] componentDidLoad - value:",this.value,"options:",this.options);if(this.options){this.handleOptionsChange(this.options)}this.syncChildComponents();if(!this.options){this.initializeValueFromSlots();this.syncChildComponents()}}disconnectedCallback(){console.info("[Lifecycle] disconnectedCallback - value:",this.value);document.removeEventListener("click",this.handleClickOutside.bind(this))}async getFilterText(){return this.filterText}async resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.style.display=""}));const t=this.el.querySelector("ul");if(t){const i=t.querySelector("[data-empty]");if(i)i.remove();const s=e.filter((e=>this.value.includes(e.getAttribute("value")||"")));const o=e.filter((e=>!this.value.includes(e.getAttribute("value")||"")));if(s.length>0){this.manageDivider(t,s,o)}}this.hasFilterResults=true}async getSelectedValues(){console.info("getSelectedValues:",this.value);return this.value}async selectAll(){if(this.disabled||this.readonly)return;if(this.options){this.toggleSelectAllOptions(true)}else{this.toggleSelectAllSlots(true)}}async deselectAll(){if(this.disabled||this.readonly)return;if(this.options){this.toggleSelectAllOptions(false)}else{this.toggleSelectAllSlots(false)}}async toggleSelectAll(){if(this.disabled||this.readonly)return;const e=this.options?this.getSelectAllCheckboxStateOptions():this.getSelectAllCheckboxStateSlots();const t=e==="unchecked"||e==="indeterminate";if(this.options){this.toggleSelectAllOptions(t)}else{this.toggleSelectAllSlots(t)}}reorderSlotContent(){if(this.options)return;const e=this.el.querySelector("ul");if(!e)return;e.querySelectorAll("hr.multiselect-divider").forEach((e=>e.remove()));const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((e=>e.style.display!=="none"));const i=e.querySelector("[data-empty]");if(i){return}const s=t.filter((e=>this.value.includes(e.getAttribute("value")||"")));const o=t.filter((e=>!this.value.includes(e.getAttribute("value")||"")));s.forEach((t=>{e.appendChild(t)}));if(s.length>0&&o.length>0){const t=document.createElement("hr");t.className="multiselect-divider";e.appendChild(t)}o.forEach((t=>{e.appendChild(t)}))}reorderOptionsContent(){const e=this.el.querySelector("ul");if(!e)return;const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck")).filter((e=>e.style.display!=="none"));const i=t.filter((e=>this.value.includes(e.getAttribute("value")||"")));const s=t.filter((e=>!this.value.includes(e.getAttribute("value")||"")));i.forEach((t=>e.appendChild(t)));s.forEach((t=>e.appendChild(t)));this.manageDivider(e,i,s)}filterItems(){const e=this.el.querySelector("ul");if(!e)return;const t=e.querySelector("[data-empty]");if(t){t.remove()}if(!this.filterText.trim()){if(this.options&&this.options.length>0){const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((e=>{e.style.display=""}))}else{const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.style.display=""}))}const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));const i=t.filter((e=>this.value.includes(e.getAttribute("value")||"")));const s=t.filter((e=>!this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,i,s);return}const i=this.normalizeText(this.filterText);let s=false;if(this.options&&this.options.length>0){const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((e=>{const t=this.options.find((t=>t.value===e.getAttribute("value")));if(t&&!t.isDivider){const o=this.normalizeText(t.label).includes(i)||this.normalizeText(t.value).includes(i);e.style.display=o?"":"none";if(o)s=true}}));const o=t.filter((e=>e.style.display!=="none"));const n=o.filter((e=>this.value.includes(e.getAttribute("value")||"")));const r=o.filter((e=>!this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,n,r)}else{const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{const t=e.getAttribute("label")||"";const o=e.getAttribute("value")||"";const n=e.textContent||"";const r=this.normalizeText(t).includes(i)||this.normalizeText(o).includes(i)||this.normalizeText(n).includes(i);e.style.display=r?"":"none";if(r)s=true}))}if(!s){const t=document.createElement("li");t.setAttribute("data-empty","true");t.textContent=this.emptyResult;t.classList.add("no-results-message");e.appendChild(t)}this.reorderSlotContent()}filterItemsOption(){const e=this.el.querySelector("ul");if(!e)return;const t=this.normalizeText(this.filterText);let i=false;const s=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));if(!this.filterText.trim()){this.removeEmptyMessageOption(e);s.forEach((e=>e.style.display=""));this.reorderOptionsContent();this.hasFilterResults=true;return}s.forEach((e=>{const s=e.getAttribute("label")||"";const o=e.getAttribute("value")||"";const n=this.normalizeText(s).includes(t)||this.normalizeText(o).includes(t);e.style.display=n?"":"none";if(n)i=true}));this.hasFilterResults=i;const o=s.filter((e=>e.style.display!=="none"));const n=o.filter((e=>this.value.includes(e.getAttribute("value")||"")));const r=o.filter((e=>!this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,n,r);if(!i){this.addEmptyMessageOption(e)}else{this.removeEmptyMessageOption(e)}}filterSlotsItems(){if(this.options)return;const e=this.el.querySelector("ul");if(!e)return;const t=e.querySelector("[data-empty]");if(t){t.remove()}if(!this.filterText.trim()){this.resetFilter();this.hasFilterResults=true;return}const i=this.normalizeText(this.filterText);let s=false;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));o.forEach((e=>{var t;const o=e.getAttribute("label")||"";const n=e.getAttribute("value")||"";const r=((t=e.textContent)===null||t===void 0?void 0:t.trim())||"";const l=this.normalizeText(o).includes(i)||this.normalizeText(n).includes(i)||this.normalizeText(r).includes(i);e.style.display=l?"":"none";if(l)s=true}));this.hasFilterResults=s;const n=o.filter((e=>e.style.display!=="none"));const r=n.filter((e=>this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,r,n.filter((e=>!this.value.includes(e.getAttribute("value")||""))));if(!s){const t=document.createElement("li");t.setAttribute("data-empty","true");t.textContent=this.emptyResult;t.classList.add("no-results-message");e.appendChild(t)}}normalizeText(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().trim()}handleClickOutside(e){if(this.el.contains(e.target)||this.inputElement&&this.inputElement.contains(e.target)){return}this.open=false}async handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;if(!this.filterable){requestAnimationFrame((()=>{this.focusFirstItem()}))}e.preventDefault();return}return}const t=Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));if(t.length===0){console.warn("No visible items found to navigate");return}let i=t.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();i=i===-1?0:(i+1)%t.length;this.updateHighlightedItem(t,i)}else if(e.key==="ArrowUp"){e.preventDefault();i=i===-1?t.length-1:(i-1+t.length)%t.length;this.updateHighlightedItem(t,i)}else if(e.key==="Enter"&&i>=0){e.preventDefault();const s=t[i];const o=s.hasAttribute("checked");s.checked=!o;s.dispatchEvent(new MouseEvent("click",{view:window,bubbles:true,cancelable:true}))}else if(e.key==="Escape"){e.preventDefault();e.stopPropagation();const t=async()=>{this.isHandlingEscape=true;if(this.options){this.reorderOptionsContent()}else{this.reorderSlotContent()}await new Promise((e=>setTimeout(e,100)));setTimeout((()=>{this.isHandlingEscape=false;this.open=false}),150);if(this.inputElement){this.inputElement.blur()}};await t()}}updateHighlightedItem(e,t){e.forEach(((e,i)=>{if(i===t){e.classList.add("highlighted");e.setAttribute("tabindex","0");e.scrollIntoView({block:"nearest"});const t=e.querySelector("nv-fieldcheckbox");if(t){t.focus()}}else{e.classList.remove("highlighted");e.setAttribute("tabindex","-1")}}))}focusFirstItem(){const e=this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');if(e){e.setAttribute("tabindex","0");e.classList.add("highlighted");e.scrollIntoView({block:"nearest"});const t=e.querySelector("nv-fieldcheckbox");if(t){t.focus()}}else{console.warn("No visible first item found to focus")}}addEmptyMessageOption(e){const t=e.querySelector("[data-empty]");if(t)return;const i=document.createElement("li");i.setAttribute("data-empty","true");i.textContent=this.emptyResult;i.classList.add("no-results-message");e.appendChild(i)}removeEmptyMessageOption(e){const t=e.querySelector("[data-empty]");if(t)t.remove()}manageDivider(e,t,i){let s=e.querySelector("hr.multiselect-divider");if(!s){s=document.createElement("hr");s.className="multiselect-divider";e.appendChild(s)}const o=t.length>0&&i.length>0;if(o){const e=t[t.length-1];e.after(s);s.style.display=""}else{s.style.display="none"}}syncChildComponents(){if(!this.el||!this.el.isConnected){return}const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));console.info("[syncChildComponents] value:",this.value);e.forEach((e=>{const t=e.getAttribute("value")||e.getAttribute("label")||"";const i=this.value.includes(t);console.info("[syncChildComponents] itemValue:",t,"shouldBeChecked:",i,"item.checked(before):",e.checked);if(i){e.setAttribute("checked","");e.checked=true}else{e.removeAttribute("checked");e.checked=false}console.info("[syncChildComponents] itemValue:",t,"item.checked(after):",e.checked)}))}getVisibleEnabledSlotItems(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));return e.filter((e=>{const t=e.style.display==="none";const i=e.hasAttribute("disabled");return!t&&!i}))}getVisibleEnabledOptionItems(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));const t=e.filter((e=>{const t=e.style.display==="none";const i=e.hasAttribute("disabled");return!t&&!i}));return t.map((e=>e.getAttribute("value")||"")).filter((e=>e!==""))}shouldShowToggleAllOptionsButton(){if(!this.options)return false;return this.enableSelectAll&&this.hasFilterResults}getSelectAllCheckboxStateOptions(){if(!this.options)return"unchecked";const e=this.getVisibleEnabledOptionItems();if(e.length===0)return"unchecked";const t=e.filter((e=>this.value.includes(e)));if(t.length===0)return"unchecked";if(t.length===e.length)return"checked";return"indeterminate"}getSelectAllCheckboxStateSlots(){if(this.options)return"unchecked";const e=this.getVisibleEnabledSlotItems();if(e.length===0)return"unchecked";const t=e.filter((e=>{const t=e.getAttribute("value")||e.getAttribute("label")||"";return t!==""&&this.value.includes(t)}));if(t.length===0)return"unchecked";if(t.length===e.length)return"checked";return"indeterminate"}shouldShowToggleAllSlotButton(){if(this.options)return false;return this.enableSelectAll&&this.hasFilterResults}initializeValueFromSlots(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));const t=e.filter((e=>e.hasAttribute("checked"))).map((e=>e.getAttribute("value")||e.getAttribute("label")||""));this.value=Array.from(new Set([...this.value||[],...t]));console.info("[initializeValueFromSlots] checkedValues:",t,"combined value:",this.value)}renderDescriptions(){return[(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{class:"description"},i("slot",{name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{hidden:!this.error,class:"error-description"},i("slot",{name:"error-description"},this.errorDescription))]}render(){return this.options?this.renderOptionsMode():this.renderSlotsMode()}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{options:["handleOptionsChange"],value:["watchValueHandler"]}}};c.style=a;export{c as nv_fieldmultiselect};
-//# sourceMappingURL=p-2a3325fb.entry.js.map