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

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h, Fragment, } from "@stencil/core";
 import { v4 as uuidv4 } from "uuid";
 /**
  * @slot content - The content of the list.
@@ -11,8 +11,6 @@ import { v4 as uuidv4 } from "uuid";
  */
 export class NvFieldmultiselect {
     constructor() {
-        /****************************************************************************/
-        //#region PROPERTIES
         /**
          * 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
@@ -27,11 +25,6 @@ export class NvFieldmultiselect {
          * always type in fresh data.
          */
         this.autocomplete = 'off';
-        /**
-         * Specifies the selected values of the multiselect field.
-         * This is the canonical value for the component and is used for form submission.
-         */
-        this.value = [];
         /**
          * Marks the input field as required.
          */
@@ -59,13 +52,22 @@ export class NvFieldmultiselect {
          */
         this.open = false;
         /**
-         * The text to display when no items match the filter.
+         * Allows the field to stretch and fill the entire width of its container.
          */
-        this.emptyResult = 'No results found';
+        this.fluid = false;
+        /**
+         * Specifies the selected values of the multiselect field.
+         * This is the canonical value for the component and is used for form submission.
+         */
+        this.value = [];
         /**
          * Enables or disables the filtering feature for the multiselect items.
          */
         this.filterable = false;
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyResult = 'No results found';
         /**
          * Delay in milliseconds before the search is triggered when typing in the filter input.
          * @default 300
@@ -77,10 +79,6 @@ export class NvFieldmultiselect {
          * element.
          */
         this.autofocus = false;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
         /**
          * Text for the badge showing the number of selected items.
          */
@@ -89,6 +87,18 @@ export class NvFieldmultiselect {
          * The text entered by the user for filtering multiselect items.
          */
         this.filterText = '';
+        /**
+         * Enables or disables the "Select All / Deselect All" toggle functionality.
+         */
+        this.enableSelectAll = false;
+        /**
+         * Text for the "Select All" button.
+         */
+        this.selectAllLabel = 'Select/deselect all';
+        /**
+         * Text for the "Deselect All" button.
+         */
+        this.deselectAllLabel = 'Select/deselect all';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
@@ -97,10 +107,22 @@ export class NvFieldmultiselect {
          */
         this.sortedOptions = [];
         this.isHandlingEscape = false;
+        /**
+         * Indicates whether the current filter has visible results.
+         * Used to control the visibility of the "Select All" button.
+         */
+        this.hasFilterResults = true;
+        /**
+         * Controls the visibility of the select all section.
+         */
+        this.isSelectAllSectionVisible = true;
+        // Add the flag to the class
+        this.preventBlurClose = false;
         /**
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
+            console.info('handleBadgeCloseOptions:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -118,6 +140,7 @@ export class NvFieldmultiselect {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
+            console.info('handleBadgeCloseSlots:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -126,8 +149,11 @@ export class NvFieldmultiselect {
                 item.checked = false;
                 item.style.display = '';
             });
-            // Reorder slot content
-            this.reorderSlotContent();
+            // Force DOM update before reordering
+            requestAnimationFrame(() => {
+                // Reorder slot content
+                this.reorderSlotContent();
+            });
         };
         /**
          * Handle popover close
@@ -149,12 +175,17 @@ export class NvFieldmultiselect {
             this.filterText = '';
             this.filterTextChanged.emit('');
             this.resetFilter();
+            this.hasFilterResults = true;
         };
         /**
          * Handle input blur for options mode.
          */
         this.handleInputBlurOptions = () => {
             setTimeout(() => {
+                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;
@@ -301,6 +332,102 @@ export class NvFieldmultiselect {
             }
             this.open = !this.open;
         };
+        /**
+         * Toggles the selection state of all non-disabled options in options mode.
+         * Respects filtering by only selecting/deselecting visible items.
+         * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)
+         */
+        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])];
+            }
+            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();
+        };
+        /**
+         * Toggles the selection state of all non-disabled slot items.
+         * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)
+         */
+        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])];
+            }
+            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.
+         * @param {Event} event - The click event.
+         */
+        this.handleSelectAllCheckboxOptionsClick = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            console.info('[handleSelectAllCheckboxOptionsClick] event:', event);
+            const currentState = this.getSelectAllCheckboxStateOptions();
+            console.info('[SelectAll][Options] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
+            // Logic to handle the indeterminate state
+            // - unchecked → select all
+            // - indeterminate → select all (clicking on indeterminate will change to checked)
+            // - checked → deselect all
+            const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
+            console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);
+            this.toggleSelectAllOptions(shouldSelectAll);
+        };
+        /**
+         * Handle click on the select all checkbox in slots mode.
+         * @param {Event} event - The click event.
+         */
+        this.handleSelectAllCheckboxSlotsClick = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            console.info('[handleSelectAllCheckboxSlotsClick] event:', event);
+            const currentState = this.getSelectAllCheckboxStateSlots();
+            console.info('[SelectAll][Slots] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
+            // Logic to handle the indeterminate state
+            // - unchecked → select all
+            // - indeterminate → select all (clicking on indeterminate will change to checked)
+            // - checked → deselect all
+            const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
+            console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);
+            this.toggleSelectAllSlots(shouldSelectAll);
+        };
         //#endregion METHODS
         /****************************************************************************/
         //#region RENDER
@@ -309,35 +436,83 @@ export class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), this.value.length > 0 && (h("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 ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.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" })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, h("span", null, this.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", tabindex: "-1", 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', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("ul", { role: "content" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (h(Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), this.value.length > 0 && (h("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 ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.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` })) : (h(Fragment, null, h("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 }), 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() ===
+                    '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()));
         };
         /**
          * Renders the component in slots mode
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), this.value.length > 0 && (h("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 ? (h("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" })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, h("span", null, this.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", 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', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("slot", { name: "content" }))), this.renderDescriptions()));
+            return (h(Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), this.value.length > 0 && (h("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 ? (h("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` })) : (h(Fragment, null, h("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 }), 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() ===
+                    'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
+                    ? this.selectAllLabel
+                    : this.deselectAllLabel, onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, onClick: this.handleSelectAllCheckboxSlotsClick }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
     handleOptionsChange(newValue) {
+        console.info('[Watch:options] newValue:', newValue);
+        console.info('[Watch:options] current value before update:', this.value);
         if (!newValue)
             return;
-        this.value = newValue
-            .filter(option => option.checked)
-            .map(option => option.value);
+        // If the parent has set a value prop, use it. Otherwise, derive from checked options.
+        // (Assume: if value is undefined, it's not set by parent; if it's an array, it's set.)
+        if (this.value === undefined || this.value.length === 0) {
+            this.value = newValue
+                .filter(option => option.checked)
+                .map(option => option.value);
+            console.info('[Watch:options] updated value from checked options:', this.value);
+        }
+        else {
+            // If value is set, ensure checked states in options match value
+            newValue.forEach(option => {
+                option.checked = this.value.includes(option.value);
+            });
+            console.info('[Watch:options] options checked state synced to value:', newValue);
+        }
         this.reorderOptionsContent();
     }
-    /**
-     * Emitted when the value changes.
-     */
     watchValueHandler() {
+        console.info('[Watch:value] Value changed:', this.value);
         // Synchronize child components when value changes programmatically
         if (this.el && this.el.isConnected) {
             this.syncChildComponents();
         }
+        // Also, update options checked state if options exist
+        if (this.options) {
+            this.options.forEach(option => {
+                option.checked = this.value.includes(option.value);
+            });
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -376,6 +551,7 @@ export class NvFieldmultiselect {
             return;
         }
         const { value, checked } = event.detail;
+        console.info('[Event:itemChecked] value:', value, 'checked:', checked, 'current value:', this.value);
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
@@ -385,6 +561,7 @@ export class NvFieldmultiselect {
             else if (!checked && valueIndex > -1) {
                 newValue.splice(valueIndex, 1);
             }
+            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);
@@ -397,7 +574,7 @@ export class NvFieldmultiselect {
             }
         }
         else {
-            console.warn('Received itemChecked event with undefined or null value'); // Warning log
+            console.warn('[Event:itemChecked] Received itemChecked event with undefined or null value'); // Warning log
         }
     }
     // Add a listener for the slot content
@@ -419,6 +596,7 @@ export class NvFieldmultiselect {
      * Subscribe to click outside event.
      */
     connectedCallback() {
+        console.info('[Lifecycle] connectedCallback - value:', this.value);
         document.addEventListener('click', this.handleClickOutside.bind(this));
     }
     /**
@@ -426,12 +604,15 @@ export class NvFieldmultiselect {
      */
     componentWillLoad() {
         var _a;
+        console.info('[Lifecycle] componentWillLoad - value:', this.value, 'options:', this.options);
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
         // Specific initialization for slots mode
         if (!this.options) {
+            // Initialize value from checked slotted children
+            this.initializeValueFromSlots();
             // Use a microtask to ensure DOM is ready
             Promise.resolve().then(() => {
                 // Synchronize child components
@@ -450,21 +631,30 @@ export class NvFieldmultiselect {
         if (!this.filterText) {
             this.resetFilter();
         }
+        // Initialize filter results state
+        this.hasFilterResults = true;
     }
     /**
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
+        console.info('[Lifecycle] componentDidLoad - value:', this.value, 'options:', this.options);
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
         // Final synchronization of child components after everything is loaded
         this.syncChildComponents();
+        // For slots mode, ensure value is initialized from checked children if not already
+        if (!this.options) {
+            this.initializeValueFromSlots();
+            this.syncChildComponents();
+        }
     }
     /**
      * Unsubscribe from click outside event.
      */
     disconnectedCallback() {
+        console.info('[Lifecycle] disconnectedCallback - value:', this.value);
         document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
     //#endregion LIFECYCLE
@@ -499,14 +689,67 @@ export class NvFieldmultiselect {
                 this.manageDivider(ul, selectedItems, unselectedItems);
             }
         }
+        // Reset filter results state
+        this.hasFilterResults = true;
     }
     /**
      * Returns the list of selected values.
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
+        console.info('getSelectedValues:', this.value);
         return this.value;
     }
+    /**
+     * Select all visible and enabled items.
+     * Works for both options and slots mode.
+     * @returns {Promise<void>}
+     */
+    async selectAll() {
+        if (this.disabled || this.readonly)
+            return;
+        if (this.options) {
+            this.toggleSelectAllOptions(true);
+        }
+        else {
+            this.toggleSelectAllSlots(true);
+        }
+    }
+    /**
+     * Deselect all visible and enabled items.
+     * Works for both options and slots mode.
+     * @returns {Promise<void>}
+     */
+    async deselectAll() {
+        if (this.disabled || this.readonly)
+            return;
+        if (this.options) {
+            this.toggleSelectAllOptions(false);
+        }
+        else {
+            this.toggleSelectAllSlots(false);
+        }
+    }
+    /**
+     * Toggle selection state of all visible and enabled items.
+     * If all items are selected, deselects all. Otherwise, selects all.
+     * Works for both options and slots mode.
+     * @returns {Promise<void>}
+     */
+    async toggleSelectAll() {
+        if (this.disabled || this.readonly)
+            return;
+        const currentState = this.options
+            ? this.getSelectAllCheckboxStateOptions()
+            : this.getSelectAllCheckboxStateSlots();
+        const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
+        if (this.options) {
+            this.toggleSelectAllOptions(shouldSelectAll);
+        }
+        else {
+            this.toggleSelectAllSlots(shouldSelectAll);
+        }
+    }
     /**
      * Reorder the content of the slot.
      */
@@ -550,7 +793,7 @@ export class NvFieldmultiselect {
      * Reorder the content for options mode with async handling
      */
     reorderOptionsContent() {
-        const ul = this.el.querySelector('ul[role="content"]');
+        const ul = this.el.querySelector('ul');
         if (!ul)
             return;
         const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
@@ -658,6 +901,7 @@ export class NvFieldmultiselect {
             this.removeEmptyMessageOption(ul);
             items.forEach(item => (item.style.display = ''));
             this.reorderOptionsContent(); // Reorder after reset
+            this.hasFilterResults = true; // Reset filter means we have results
             return;
         }
         // Filter the items
@@ -670,6 +914,8 @@ export class NvFieldmultiselect {
             if (matchesFilter)
                 hasVisibleItems = true;
         });
+        // Update the filter results state
+        this.hasFilterResults = hasVisibleItems;
         // Manage the divider with the visible items
         const visibleItems = items.filter(item => item.style.display !== 'none');
         const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
@@ -700,6 +946,7 @@ export class NvFieldmultiselect {
         // If filter text is empty, reset all items visibility
         if (!this.filterText.trim()) {
             this.resetFilter();
+            this.hasFilterResults = true; // Reset filter means we have results
             return;
         }
         const normalizedFilter = this.normalizeText(this.filterText);
@@ -719,6 +966,8 @@ export class NvFieldmultiselect {
             if (matchesFilter)
                 hasVisibleItems = true;
         });
+        // Update the filter results state
+        this.hasFilterResults = hasVisibleItems;
         // Get visible items after filtering
         const visibleItems = items.filter(item => item.style.display !== 'none');
         const visibleSelectedItems = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
@@ -929,10 +1178,13 @@ export class NvFieldmultiselect {
             return;
         }
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        console.info('[syncChildComponents] value:', this.value);
         items.forEach(item => {
             // Get the effective value: use explicit value if present, otherwise use label
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
-            if (this.value.includes(itemValue)) {
+            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;
             }
@@ -940,7 +1192,105 @@ export class NvFieldmultiselect {
                 item.removeAttribute('checked');
                 item.checked = false;
             }
+            console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
+        });
+    }
+    /**
+     * Gets visible and enabled slot items using consistent logic.
+     * @returns {Element[]} Array of visible and enabled items
+     */
+    getVisibleEnabledSlotItems() {
+        const allItems = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        return allItems.filter(item => {
+            const isHidden = item.style.display === 'none';
+            const isDisabled = item.hasAttribute('disabled');
+            return !isHidden && !isDisabled;
+        });
+    }
+    /**
+     * Gets visible and enabled option items by checking DOM elements.
+     * @returns {string[]} Array of visible and enabled option values
+     */
+    getVisibleEnabledOptionItems() {
+        const allItems = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        const visibleItems = allItems.filter(item => {
+            const isHidden = item.style.display === 'none';
+            const isDisabled = item.hasAttribute('disabled');
+            return !isHidden && !isDisabled;
+        });
+        return visibleItems
+            .map(item => item.getAttribute('value') || '')
+            .filter(value => value !== '');
+    }
+    /**
+     * Determines if the toggle all button should be shown in options mode.
+     * @returns {boolean} True if there are visible items and no "No results found" message
+     */
+    shouldShowToggleAllOptionsButton() {
+        if (!this.options)
+            return false; // Only for options mode
+        return this.enableSelectAll && this.hasFilterResults;
+    }
+    /**
+     * Gets the checkbox state for the select all checkbox in options mode.
+     * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state
+     */
+    getSelectAllCheckboxStateOptions() {
+        if (!this.options)
+            return 'unchecked';
+        // Get visible and enabled option values from DOM
+        const visibleOptionValues = this.getVisibleEnabledOptionItems();
+        if (visibleOptionValues.length === 0)
+            return 'unchecked';
+        const selectedVisibleOptions = visibleOptionValues.filter(value => this.value.includes(value));
+        if (selectedVisibleOptions.length === 0)
+            return 'unchecked';
+        if (selectedVisibleOptions.length === visibleOptionValues.length)
+            return 'checked';
+        return 'indeterminate';
+    }
+    /**
+     * Gets the checkbox state for the select all checkbox in slots mode.
+     * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state
+     */
+    getSelectAllCheckboxStateSlots() {
+        if (this.options)
+            return 'unchecked';
+        // Get all visible and enabled items
+        const items = this.getVisibleEnabledSlotItems();
+        if (items.length === 0)
+            return 'unchecked';
+        const selectedItems = items.filter(item => {
+            const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
+            return itemValue !== '' && this.value.includes(itemValue);
         });
+        if (selectedItems.length === 0)
+            return 'unchecked';
+        if (selectedItems.length === items.length)
+            return 'checked';
+        return 'indeterminate';
+    }
+    /**
+     * Determines if the toggle all button should be shown in slots mode.
+     * @returns {boolean} True if there are visible items and no "No results found" message
+     */
+    shouldShowToggleAllSlotButton() {
+        if (this.options)
+            return false; // Only for slots mode
+        return this.enableSelectAll && this.hasFilterResults;
+    }
+    /**
+     * Initializes the value array from checked slotted nv-fielddropdownitemcheck elements (slots mode only).
+     */
+    initializeValueFromSlots() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Values from checked slot children
+        const checkedValues = items
+            .filter(item => item.hasAttribute('checked'))
+            .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
+        // Combine with current this.value (set by code), ensuring uniqueness
+        this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
+        console.info('[initializeValueFromSlots] checkedValues:', checkedValues, 'combined value:', this.value);
     }
     /**
      * Renders description and error description sections
@@ -974,7 +1324,7 @@ export class NvFieldmultiselect {
     }
     static get properties() {
         return {
-            "inputId": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -986,15 +1336,14 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and user-friendly."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input-id",
-                "reflect": true,
-                "defaultValue": "uuidv4()"
+                "attribute": "label",
+                "reflect": true
             },
-            "name": {
+            "inputId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1006,14 +1355,15 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
+                    "text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
-                "reflect": true
+                "attribute": "input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
             },
-            "label": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1025,11 +1375,11 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and user-friendly."
+                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
+                "attribute": "name",
                 "reflect": true
             },
             "description": {
@@ -1096,24 +1446,6 @@ export class NvFieldmultiselect {
                 "reflect": true,
                 "defaultValue": "'off'"
             },
-            "value": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the selected values of the multiselect field.\nThis is the canonical value for the component and is used for form submission."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -1259,25 +1591,63 @@ export class NvFieldmultiselect {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "emptyResult": {
-                "type": "string",
+            "fluid": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text to display when no items match the filter."
+                    "text": "Allows the field to stretch and fill the entire width of its container."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "empty-result",
+                "attribute": "fluid",
                 "reflect": true,
-                "defaultValue": "'No results found'"
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Additional description for the option */\n    description?: string;\n    /** Whether this option is pre-checked */\n    checked?: boolean;\n  }[]",
+                    "resolved": "{ label: string; value: string; isDivider?: boolean; disabled?: boolean; description?: string; checked?: boolean; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "options=[{\n \"label\": \"Option 1\",\n \"value\": \"option1\",\n},\n{\n \"label\": \"Option 2\",\n \"value\": \"option2\",\n}]"
+                        }],
+                    "text": "List of options used to automatically generate dropdown items. This\nprovides an alternative to using the slot manually."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the selected values of the multiselect field.\nThis is the canonical value for the component and is used for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             },
             "filterable": {
                 "type": "boolean",
@@ -1299,25 +1669,25 @@ export class NvFieldmultiselect {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "options": {
-                "type": "unknown",
-                "mutable": true,
+            "emptyResult": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Additional description for the option */\n    description?: string;\n    /** Whether this option is pre-checked */\n    checked?: boolean;\n  }[]",
-                    "resolved": "{ label: string; value: string; isDivider?: boolean; disabled?: boolean; description?: string; checked?: boolean; }[]",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "example",
-                            "text": "options=[{\n \"label\": \"Option 1\",\n \"value\": \"option1\",\n},\n{\n \"label\": \"Option 2\",\n \"value\": \"option2\",\n}]"
-                        }],
-                    "text": "List of options used to automatically generate dropdown items. This\nprovides an alternative to using the slot manually."
+                    "tags": [],
+                    "text": "The text to display when no items match the filter."
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "attribute": "empty-result",
+                "reflect": true,
+                "defaultValue": "'No results found'"
             },
             "debounceDelay": {
                 "type": "number",
@@ -1362,7 +1732,47 @@ export class NvFieldmultiselect {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "fluid": {
+            "badgeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the badge showing the number of selected items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge-label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "filterText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text entered by the user for filtering multiselect items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-text",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "enableSelectAll": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1374,15 +1784,15 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allows the field to stretch and fill the entire width of its container."
+                    "text": "Enables or disables the \"Select All / Deselect All\" toggle functionality."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fluid",
+                "attribute": "enable-select-all",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "badgeLabel": {
+            "selectAllLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1394,17 +1804,17 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Text for the badge showing the number of selected items."
+                    "text": "Text for the \"Select All\" button."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "badge-label",
+                "attribute": "select-all-label",
                 "reflect": true,
-                "defaultValue": "''"
+                "defaultValue": "'Select/deselect all'"
             },
-            "filterText": {
+            "deselectAllLabel": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1414,20 +1824,22 @@ export class NvFieldmultiselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text entered by the user for filtering multiselect items."
+                    "text": "Text for the \"Deselect All\" button."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-text",
+                "attribute": "deselect-all-label",
                 "reflect": true,
-                "defaultValue": "''"
+                "defaultValue": "'Select/deselect all'"
             }
         };
     }
     static get states() {
         return {
             "sortedOptions": {},
-            "isHandlingEscape": {}
+            "isHandlingEscape": {},
+            "hasFilterResults": {},
+            "isSelectAllSectionVisible": {}
         };
     }
     static get events() {
@@ -1528,6 +1940,66 @@ export class NvFieldmultiselect {
                             "text": "The selected values."
                         }]
                 }
+            },
+            "selectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select all visible and enabled items.\nWorks for both options and slots mode.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "deselectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Deselect all visible and enabled items.\nWorks for both options and slots mode.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "toggleSelectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle selection state of all visible and enabled items.\nIf all items are selected, deselects all. Otherwise, selects all.\nWorks for both options and slots mode.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }