@agorapulse/ui-components 20.3.26-beta.1 → 20.3.28

package/fesm2022/agorapulse-ui-components-nav-selector.mjs

@@ -1036,6 +1036,9 @@ class NavSelectorBuilder {
         }
         const displayTokenInvalid = children.some(({ displayTokenInvalid }) => displayTokenInvalid);
         const selectedChildrenCount = children.filter(({ selected }) => selected).length;
+        // A group is selected if all children are either selected or not selectable
+        // (disabled children must still be selected to count)
+        const selected = children.every(c => c.selected || !c.selectable);
         return {
             uid: node.uid,
             alias: node.alias,
@@ -1054,9 +1057,9 @@ class NavSelectorBuilder {
             displayCounter: node.folded && children.some(child => isInternalNavSelectorEntryALeaf(child) && child.counter !== 0),
             counter: children.reduce((acc, { counter }) => acc + counter, 0),
             displayTokenInvalid,
-            selected: false,
+            selected,
             selectable: multipleModeEnabled && children.some(child => child.selectable && !child.disabled),
-            undeterminedSelection: selectedChildrenCount !== children.length && selectedChildrenCount > 0,
+            undeterminedSelection: !selected && selectedChildrenCount > 0,
             folded: node.folded,
             type: node.type,
         };
@@ -1156,11 +1159,10 @@ class NavSelectorBuilder {
             }
             else if (isInternalNavSelectorEntryAGroup(entry)) {
                 const children = this.setInitialSelection(entry.children, selectedEntryUids);
-                // A group is selected if all its selectable non-disabled children are selected
-                const selectableChildren = children.filter(child => child.selectable && !child.disabled);
-                const selectedChildren = children.filter(child => child.selected);
-                const selected = selectableChildren.length > 0 && selectableChildren.every(child => child.selected);
-                const undeterminedSelection = !selected && selectedChildren.length > 0;
+                // A group is selected if all children are either selected or not selectable
+                // (disabled children must still be selected to count)
+                const selected = children.every(c => c.selected || !c.selectable);
+                const undeterminedSelection = !selected && children.some(c => c.selected);
                 return {
                     ...entry,
                     children,
@@ -1367,14 +1369,14 @@ class NavSelectorMerger {
             newLeaf.viewMoreDisplayed = oldLeaf.viewMoreDisplayed;
             newLeaf.folded = oldLeaf.folded;
             newLeaf.displayCounter = newLeaf.folded && newLeaf.counterDisplayable;
-            newLeaf.selected = oldLeaf.selected;
+            // Don't copy selected state - it's set by the builder based on initialSelectedEntryUids
             newLeaf.accessibility.tabIndex = oldLeaf.accessibility.tabIndex;
             const oldDetailByUId = associateBy(oldLeaf.details, 'uid');
             newLeaf.details.forEach(newDetail => {
                 if (!oldDetailByUId[newDetail.uid] || newDetail.errorReason) {
                     return;
                 }
-                newDetail.selected = oldDetailByUId[newDetail.uid].selected;
+                // Don't copy selected state - it's set by the builder based on initialSelectedEntryUids
                 newDetail.accessibility.tabIndex = oldDetailByUId[newDetail.uid].accessibility.tabIndex;
             });
         }
@@ -1574,14 +1576,16 @@ class NavSelectorMultiSelect {
             }
             // Recalculate selected and undeterminedSelection based on children
             // because disabled items may have retained their selected state.
-            // A group is selected if all children are either: selected, not selectable, or disabled
-            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && (!child.selectable || child.disabled)));
+            // A group is selected if all children are either selected or not selectable
+            // (disabled children must still be selected to count)
+            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
             undeterminedSelection = !selected && children.some(child => child.selected);
         }
         else {
             children = entry.children.map(child => this.toggleSelectLeaf(child, entryUid));
-            // A group is selected if all children are either: selected, not selectable, or disabled
-            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && (!child.selectable || child.disabled)));
+            // A group is selected if all children are either selected or not selectable
+            // (disabled children must still be selected to count)
+            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
             undeterminedSelection = !selected && children.some(child => child.selected);
         }
         return {
@@ -1619,7 +1623,8 @@ class NavSelectorMultiSelect {
             if (isInternalNavSelectorEntryALeaf(child)) {
                 return {
                     ...child,
-                    selected: false,
+                    // Disabled or non-selectable leafs retain their current selected state
+                    selected: child.disabled || !child.selectable ? child.selected : false,
                 };
             }
             else if (isInternalNavSelectorEntryACategory(child)) {
@@ -1628,11 +1633,18 @@ class NavSelectorMultiSelect {
                     children: this.unselectChildren(child.children),
                 };
             }
-            else if (isInternalNavSelectorEntryANode(child)) {
+            else if (isInternalNavSelectorEntryAGroup(child)) {
+                const children = this.unselectChildren(child.children);
+                // Recalculate group state based on children
+                // A group is selected if all children are either selected or not selectable
+                // (disabled children must still be selected to count)
+                const selected = children.every(c => c.selected || (isInternalNavSelectorEntryALeaf(c) && !c.selectable));
+                const undeterminedSelection = !selected && children.some(c => c.selected);
                 return {
                     ...child,
-                    children: this.unselectChildren(child.children),
-                    selected: false,
+                    children,
+                    selected,
+                    undeterminedSelection,
                 };
             }
             return child;
@@ -1643,7 +1655,8 @@ class NavSelectorMultiSelect {
             if (isInternalNavSelectorEntryALeaf(child)) {
                 return {
                     ...child,
-                    selected: child.selectable,
+                    // Disabled or non-selectable leafs retain their current selected state
+                    selected: child.disabled || !child.selectable ? child.selected : child.selectable,
                 };
             }
             else if (isInternalNavSelectorEntryACategory(child)) {
@@ -1653,10 +1666,17 @@ class NavSelectorMultiSelect {
                 };
             }
             else if (isInternalNavSelectorEntryAGroup(child)) {
+                const children = this.selectChildren(child.children);
+                // Recalculate group state based on children
+                // A group is selected if all children are either selected or not selectable
+                // (disabled children must still be selected to count)
+                const selected = children.every(c => c.selected || (isInternalNavSelectorEntryALeaf(c) && !c.selectable));
+                const undeterminedSelection = !selected && children.some(c => c.selected);
                 return {
                     ...child,
-                    children: this.selectChildren(child.children),
-                    selected: true,
+                    children,
+                    selected,
+                    undeterminedSelection,
                 };
             }
             return child;
@@ -1786,6 +1806,27 @@ class NavSelectorState {
     search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
     noResults = computed(() => this._entries().every(({ hidden }) => hidden), ...(ngDevMode ? [{ debugName: "noResults" }] : []));
     texts = this._texts.asReadonly();
+    isAllSelected = computed(() => {
+        if (!this.multipleModeEnabled()) {
+            return false;
+        }
+        const entries = this._entries();
+        return this.areAllSelectableItemsSelected(entries);
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    isSelectAllIndeterminate = computed(() => {
+        if (!this.multipleModeEnabled()) {
+            return false;
+        }
+        const entries = this._entries();
+        const allSelected = this.areAllSelectableItemsSelected(entries);
+        if (allSelected) {
+            return false;
+        }
+        // Check if ANY item is selected (including disabled/mandatory items)
+        // This matches the behavior of group checkboxes
+        const selectedUids = this.collectSelectedUids(entries);
+        return selectedUids.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "isSelectAllIndeterminate" }] : []));
     expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     previousSelectedUids = [];
     selectedUidsChangeCallback = null;
@@ -1998,6 +2039,35 @@ class NavSelectorState {
     resetFocus() {
         this._entries.update(entries => NavSelectorAccessibility.resetFocus(entries));
     }
+    toggleSelectAll() {
+        if (!this.multipleModeEnabled()) {
+            return;
+        }
+        this._entries.update(entries => {
+            const allSelected = this.areAllSelectableItemsSelected(entries);
+            return allSelected ? NavSelectorMultiSelect.unselectAll(entries) : NavSelectorMultiSelect.selectAll(entries);
+        });
+    }
+    areAllSelectableItemsSelected(entries) {
+        const selectableNonDisabledUids = this.collectSelectableNonDisabledUids(entries);
+        const selectedUids = this.collectSelectedUids(entries);
+        if (selectableNonDisabledUids.length === 0) {
+            return false;
+        }
+        return selectableNonDisabledUids.every(uid => selectedUids.includes(uid));
+    }
+    collectSelectableNonDisabledUids(entries) {
+        return entries.flatMap(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                // Only include selectable and non-disabled items (user-interactable)
+                return entry.selectable && !entry.disabled ? [entry.uid] : [];
+            }
+            else if (isInternalNavSelectorEntryANode(entry)) {
+                return this.collectSelectableNonDisabledUids(entry.children);
+            }
+            return [];
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorState });
 }
@@ -2934,12 +3004,10 @@ class NavSelectorComponent {
     el = inject(ElementRef);
     componentUid = `nav-selector-${nextUniqueId++}`;
     ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
+    stableNavSelectorEntries = computed(() => this.navSelectorEntries(), ...(ngDevMode ? [{ debugName: "stableNavSelectorEntries", equal: isEqual }] : [{ equal: isEqual }]));
     expanded = this.navSelectorState.expanded.asReadonly();
     entries = computed(() => this.navSelectorState.entries(), ...(ngDevMode ? [{ debugName: "entries", equal: isEqual }] : [{ equal: isEqual }]));
     selectableEntryUids = computed(() => computeSelectableUids(this.entries()), ...(ngDevMode ? [{ debugName: "selectableEntryUids", equal: isEqual }] : [{ equal: isEqual }]));
-    existingSelectableUids = computed(() => this.selectedEntryUids().filter(uid => this.selectableEntryUids().includes(uid)), ...(ngDevMode ? [{ debugName: "existingSelectableUids", equal: isEqual }] : [{
-            equal: isEqual,
-        }]));
     visibleEntryUids = computed(() => computeVisibleUids(this.entries()), ...(ngDevMode ? [{ debugName: "visibleEntryUids", equal: isEqual }] : [{ equal: isEqual }]));
     visibleAccountsChange = outputFromObservable(toObservable(this.visibleEntryUids).pipe(map(visibleAccountUids => ({ visibleAccountUids }))));
     constructor() {
@@ -2962,17 +3030,19 @@ class NavSelectorComponent {
             const expanded = this.expanded();
             untracked(() => this.onExpansionStateChange.emit({ expanded }));
         });
+        // When inputs change, rebuild entries with current selected uids
         effect(() => {
-            // When AS inputs changes, rebuild AS with current initial selected uids
             const multipleModeEnabled = this.multipleModeEnabled();
-            const newEntries = this.navSelectorEntries(); // FIXME: Check if it's needed to add a guard on this value
+            const newEntries = this.stableNavSelectorEntries();
+            const selectedUids = this.selectedEntryUids();
             untracked(() => {
                 this.navSelectorState.updateMultiModeEnabled(multipleModeEnabled);
+                const limit = this.detailsDisplayedLimit();
                 if (!this.entries().length) {
-                    this.navSelectorState.initEntries(newEntries, this.selectedEntryUids(), this.detailsDisplayedLimit());
+                    this.navSelectorState.initEntries(newEntries, selectedUids, limit);
                 }
                 else {
-                    this.navSelectorState.updateEntries(newEntries, this.selectedEntryUids(), this.detailsDisplayedLimit());
+                    this.navSelectorState.updateEntries(newEntries, selectedUids, limit);
                 }
             });
         });
@@ -2980,16 +3050,9 @@ class NavSelectorComponent {
             const detailsDisplayedLimit = this.detailsDisplayedLimit();
             untracked(() => this.navSelectorState.updateDetailsDisplayedLimit(detailsDisplayedLimit));
         });
-        effect(() => {
-            const isInit = !!this.entries().length;
-            const existingSelectableUids = this.existingSelectableUids();
-            untracked(() => {
-                if (isInit) {
-                    // Trigger selection change when initial selectedEntryUids model changes
-                    this.navSelectorState.onSelectionChange(existingSelectableUids);
-                }
-            });
-        });
+        // Note: No longer need of a separate effect for selectedEntryUids changes
+        // The effect above (line 166) now watches selectedEntryUids and calls updateEntries
+        // which properly handles disabled items through the builder
         effect(() => {
             const translatedTexts = this.translatedTexts();
             untracked(() => this.navSelectorState.updateTexts(translatedTexts));