@koobiq/components 19.8.7 → 19.8.9

package/fesm2022/koobiq-components-tree.mjs

@@ -934,26 +934,15 @@ class KbqTreeOption extends KbqTreeNode {
         this._id = `kbq-tree-option-${uniqueIdCounter++}`;
         this.hasFocus = false;
         this.updateCheckboxState = () => {
-            if (this.checkboxThirdState && this.isExpandable) {
-                if (this.descendantsAllSelected()) {
-                    this.checkboxState = 'checked';
-                }
-                else if (this.descendantsPartiallySelected()) {
-                    this.checkboxState = 'indeterminate';
-                }
-                else {
-                    this.checkboxState = this.selected ? 'checked' : 'unchecked';
-                }
-            }
-            else {
-                this.checkboxState = this.selected ? 'checked' : 'unchecked';
-            }
+            this.syncCheckboxState();
             this.updateParentsCheckboxState(this.data);
         };
         inject(DestroyRef).onDestroy(() => (this.isDestroyed = true));
     }
     ngAfterContentInit() {
-        Promise.resolve().then(this.updateCheckboxState);
+        // Its own state only: rendering a row changes no ancestor's, and the tree recomputes every row once the data
+        // nodes change.
+        Promise.resolve().then(() => this.syncCheckboxState());
         this.value = this.tree.treeControl.getValue(this.data);
     }
     descendantsAllSelected() {
@@ -965,9 +954,13 @@ class KbqTreeOption extends KbqTreeNode {
         return descendants.some((child) => this.tree?.selectionModel.isSelected(child));
     }
     updateParentsCheckboxState(node) {
-        this.tree.treeControl.getParents(node, []).forEach((parent) => {
-            const parentOption = this.tree.unorderedOptions.find((option) => option.data === parent);
-            parentOption?.updateCheckboxState();
+        const parents = new Set(this.tree.treeControl.getParents(node, []));
+        if (!parents.size)
+            return;
+        // Each ancestor reads its state off the selection rather than off its children, so recomputing it is enough.
+        this.tree.unorderedOptions.forEach((option) => {
+            if (parents.has(option.data))
+                option.syncCheckboxState();
         });
     }
     toggle() {
@@ -1073,8 +1066,9 @@ class KbqTreeOption extends KbqTreeNode {
     }
     markForCheck() {
         this.changeDetectorRef.markForCheck();
+        // Its own state only: after a selection or data change the tree calls this on every option.
         if (this.showCheckbox) {
-            this.updateCheckboxState();
+            this.syncCheckboxState();
         }
     }
     /** @docs-private */
@@ -1083,6 +1077,23 @@ class KbqTreeOption extends KbqTreeNode {
             return;
         this.focus('mouse');
     }
+    /** Recomputes the option's own checkbox state, leaving its ancestors as they are. */
+    syncCheckboxState() {
+        if (this.checkboxThirdState && this.isExpandable) {
+            if (this.descendantsAllSelected()) {
+                this.checkboxState = 'checked';
+            }
+            else if (this.descendantsPartiallySelected()) {
+                this.checkboxState = 'indeterminate';
+            }
+            else {
+                this.checkboxState = this.selected ? 'checked' : 'unchecked';
+            }
+        }
+        else {
+            this.checkboxState = this.selected ? 'checked' : 'unchecked';
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: KBQ_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqTreeOption, isStandalone: true, selector: "kbq-tree-option", inputs: { checkboxThirdState: "checkboxThirdState", disabled: "disabled", selectable: ["selectable", "selectable", booleanAttribute], showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "mouseenter": "onMouseenter()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-tree-option_multiple": "tree.multiple", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-disabled": "disabled", "class.kbq-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-option" }, providers: [
             { provide: KbqTreeNode, useExisting: KbqTreeOption },
@@ -1366,6 +1377,10 @@ class KbqTreeSelection extends KbqTreeBase {
         this.userTabIndex = null;
         // this parameter used when select has a search field
         this.optionShouldHoldFocusOnBlur = false;
+        /** `treeControl.dataNodes` the options' checkbox states were last recomputed against. */
+        this.checkboxSyncedDataNodes = null;
+        // Angular 19 has no `DestroyRef.destroyed`.
+        this.isDestroyed = false;
         this.navigationChange = new EventEmitter();
         this.selectionChange = new EventEmitter();
         this.onSelectAll = new EventEmitter();
@@ -1449,6 +1464,7 @@ class KbqTreeSelection extends KbqTreeBase {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.isDestroyed = true;
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
     focus($event) {
@@ -1618,6 +1634,21 @@ class KbqTreeSelection extends KbqTreeBase {
         super.renderNodeChanges(data, dataDiffer, viewContainer, parentData);
         this.sortedNodes = this.getSortedNodes(viewContainer);
         this.nodeOutlet.changeDetectorRef.detectChanges();
+        this.scheduleCheckboxSync();
+    }
+    /**
+     * Recomputes every option's checkbox state after `dataNodes` is replaced, which moves the descendants a branch
+     * counts: no selection change follows to do it. A microtask later, as a flat data source assigns `dataNodes` only
+     * after it emits.
+     */
+    scheduleCheckboxSync() {
+        Promise.resolve().then(() => {
+            const dataNodes = this.treeControl?.dataNodes ?? null;
+            if (this.isDestroyed || dataNodes === this.checkboxSyncedDataNodes)
+                return;
+            this.checkboxSyncedDataNodes = dataNodes;
+            this.unorderedOptions?.forEach((option) => option.markForCheck());
+        });
     }
     emitNavigationEvent(option) {
         this.navigationChange.emit(new KbqTreeNavigationChange(this, option));