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

package/dist/esm/nv-fieldmultiselect.entry.js

@@ -9,6 +9,7 @@ const NvFieldmultiselect = class {
         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
@@ -116,6 +117,9 @@ const NvFieldmultiselect = class {
         this.isSelectAllSectionVisible = true;
         // Add the flag to the class
         this.preventBlurClose = false;
+        this.handleMouseDownPreventBlur = () => {
+            this.preventBlurClose = true;
+        };
         /**
          * Handle badge close for options mode.
          */
@@ -302,6 +306,11 @@ const NvFieldmultiselect = class {
          */
         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;
@@ -338,24 +347,33 @@ const NvFieldmultiselect = class {
         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.
@@ -364,31 +382,40 @@ const NvFieldmultiselect = class {
         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();
+                });
             }
-            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));
+            finally {
+                // Defer reset to next frame to ensure any async child emissions are ignored
+                requestAnimationFrame(() => {
+                    this.isBulkOperation = false; // Reset flag
+                });
             }
-            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.
@@ -440,16 +467,10 @@ const NvFieldmultiselect = class {
                     width: '0',
                     height: '0',
                     pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), h("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" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("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 })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllOptionsButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), h("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" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("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 })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllOptionsButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("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 }))))), h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (h("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 }))))), h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (h("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
@@ -462,16 +483,10 @@ const NvFieldmultiselect = class {
                     width: '0',
                     height: '0',
                     pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), h("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" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllSlotButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), h("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" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllSlotButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("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 }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
+                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxSlotsClick }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -500,7 +515,12 @@ const NvFieldmultiselect = class {
         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();
@@ -545,7 +565,9 @@ const NvFieldmultiselect = class {
      * @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;
@@ -553,21 +575,23 @@ const NvFieldmultiselect = class {
         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;
             }
         }
@@ -595,7 +619,11 @@ const NvFieldmultiselect = class {
      */
     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.
@@ -653,7 +681,9 @@ const NvFieldmultiselect = class {
      */
     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
     /****************************************************************************/
@@ -1182,13 +1212,23 @@ const NvFieldmultiselect = class {
             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);
         });