@koobiq/components 20.4.1 → 20.4.3

package/fesm2022/koobiq-components-tree.mjs

@@ -978,20 +978,7 @@ class KbqTreeOption extends KbqTreeNode {
         this.updateCheckboxState = () => {
             if (this.selectAllRow())
                 return;
-            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);
         };
         this.tree = tree;
@@ -999,7 +986,9 @@ class KbqTreeOption extends KbqTreeNode {
     ngAfterContentInit() {
         if (this.selectAllRow())
             return;
-        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() {
@@ -1011,9 +1000,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() {
@@ -1119,8 +1112,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 */
@@ -1129,6 +1123,25 @@ class KbqTreeOption extends KbqTreeNode {
             return;
         this.focus('mouse');
     }
+    /** Recomputes the option's own checkbox state, leaving its ancestors as they are. */
+    syncCheckboxState() {
+        if (this.selectAllRow())
+            return;
+        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: "20.3.30", ngImport: i0, type: KbqTreeOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTreeOption, isStandalone: true, selector: "kbq-tree-option", inputs: { checkboxThirdState: { classPropertyName: "checkboxThirdState", publicName: "checkboxThirdState", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null } }, 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 },
@@ -1480,6 +1493,8 @@ class KbqTreeSelection extends KbqTreeBase {
         this.optionShouldHoldFocusOnBlur = false;
         /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
         this.selectAllOption = viewChild(KbqTreeOption, ...(ngDevMode ? [{ debugName: "selectAllOption" }] : []));
+        /** `treeControl.dataNodes` the options' checkbox states were last recomputed against. */
+        this.checkboxSyncedDataNodes = null;
         this.navigationChange = output();
         this.selectionChange = new EventEmitter();
         this.onSelectAll = output();
@@ -1780,6 +1795,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.destroyRef.destroyed || dataNodes === this.checkboxSyncedDataNodes)
+                return;
+            this.checkboxSyncedDataNodes = dataNodes;
+            this.unorderedOptions?.forEach((option) => option.markForCheck());
+        });
     }
     emitNavigationEvent(option) {
         this.navigationChange.emit(new KbqTreeNavigationChange(this, option));