@mozaic-ds/angular 2.0.33 → 2.0.34

package/fesm2022/mozaic-ds-angular.mjs

@@ -11433,7 +11433,8 @@ class TreeStateService {
         this.toggleExpanded(node.id);
         if (!wasExpanded) {
             const loadFn = this.loadChildrenFn();
-            if (loadFn && node.children === undefined) {
+            const resolved = this.findNode(node.id) ?? node;
+            if (loadFn && resolved.children === undefined) {
                 this.addLoading(node.id);
                 return loadFn(node).pipe(take(1), tap((children) => {
                     this.patchChildren(node.id, children);
@@ -11495,6 +11496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         }] });
 
 class TreeSelectionService {
+    stateService = inject(TreeStateService);
     selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
     selectionMode = signal('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
     rootNodes = signal([], ...(ngDevMode ? [{ debugName: "rootNodes" }] : /* istanbul ignore next */ []));
@@ -11515,40 +11517,62 @@ class TreeSelectionService {
             return true;
         return ancestors.some((a) => a.disabled);
     }
+    /**
+     * A node is indeterminate when it has loaded children AND
+     * some (but not all) of its leaf-level descendants are selected.
+     */
     isIndeterminate(node) {
-        if (node.children === undefined)
+        const resolved = this._resolveNode(node);
+        const leaves = this._collectLeafIds(resolved);
+        if (leaves.length === 0)
             return false;
-        if (node.children.length === 0)
-            return false;
-        const enabledIds = this._collectEnabledDescendantIds(node);
-        if (enabledIds.length === 0)
-            return false;
-        const selectedCount = enabledIds.filter((id) => this.selectedIds().has(id)).length;
-        return selectedCount > 0 && selectedCount < enabledIds.length;
+        const selectedCount = leaves.filter((id) => this.selectedIds().has(id)).length;
+        return selectedCount > 0 && selectedCount < leaves.length;
     }
+    /**
+     * A node is checked when:
+     * - Leaf node (no children or children not loaded): its ID is in selectedIds
+     * - Parent with loaded children: ALL leaf descendants are selected
+     */
     isCheckedComputed(node) {
         if (this.selectionMode() === 'radio') {
             return this.selectedIds().has(node.id);
         }
-        if (node.children === undefined || node.children.length === 0) {
+        const resolved = this._resolveNode(node);
+        const leaves = this._collectLeafIds(resolved);
+        // Node is a leaf or has no loaded children
+        if (leaves.length === 0) {
             return this.selectedIds().has(node.id);
         }
-        const enabledIds = this._collectEnabledDescendantIds(node);
-        if (enabledIds.length === 0)
-            return this.selectedIds().has(node.id);
-        return enabledIds.every((id) => this.selectedIds().has(id));
+        return leaves.every((id) => this.selectedIds().has(id));
     }
+    /**
+     * Select a node: add all leaf descendant IDs (or the node's own ID if leaf).
+     */
     selectNode(node) {
         if (this.selectionMode() === 'radio') {
             this.selectedIds.set(new Set([node.id]));
             return;
         }
+        const resolved = this._resolveNode(node);
         this.selectedIds.update((current) => {
             const next = new Set(current);
-            this._collectEnabledIds(node).forEach((id) => next.add(id));
+            const leaves = this._collectLeafIds(resolved);
+            if (leaves.length === 0) {
+                // Node is a leaf
+                if (!node.disabled)
+                    next.add(node.id);
+            }
+            else {
+                leaves.forEach((id) => next.add(id));
+            }
             return next;
         });
     }
+    /**
+     * Deselect a node: remove all leaf descendant IDs (or the node's own ID if leaf).
+     * Also remove the node's own ID in case it's in the set from external sources.
+     */
     deselectNode(node) {
         if (this.selectionMode() === 'radio') {
             this.selectedIds.update((current) => {
@@ -11558,9 +11582,13 @@ class TreeSelectionService {
             });
             return;
         }
+        const resolved = this._resolveNode(node);
         this.selectedIds.update((current) => {
             const next = new Set(current);
-            this._collectEnabledIds(node).forEach((id) => next.delete(id));
+            // Always remove the node itself
+            next.delete(node.id);
+            // Remove all known descendants (leaf + parents)
+            this._collectAllDescendantIds(resolved).forEach((id) => next.delete(id));
             return next;
         });
     }
@@ -11572,30 +11600,83 @@ class TreeSelectionService {
             this.selectNode(node);
         }
     }
-    _collectEnabledIds(node) {
-        if (node.disabled)
+    /**
+     * Called when children are loaded for a node.
+     * - If parent ID was in selectedIds: replace it with children's leaf IDs (propagate down).
+     * - If parent ID was NOT in selectedIds: remove any orphan children IDs that
+     *   may have been left from a prior bulk operation (e.g. Select All → deselect parent).
+     */
+    propagateOnChildrenLoaded(parentId) {
+        const parent = this._resolveNode({ id: parentId });
+        if (!parent || !parent.children || parent.children.length === 0)
+            return;
+        const selected = this.selectedIds();
+        const next = new Set(selected);
+        if (selected.has(parentId)) {
+            // Parent was selected → replace with leaf children
+            next.delete(parentId);
+            for (const child of parent.children) {
+                if (!child.disabled) {
+                    const childLeaves = this._collectLeafIds(this._resolveNode(child));
+                    if (childLeaves.length === 0) {
+                        next.add(child.id);
+                    }
+                    else {
+                        childLeaves.forEach((id) => next.add(id));
+                    }
+                }
+            }
+        }
+        else {
+            // Parent was NOT selected → clean up any orphan descendant IDs
+            this._collectAllDescendantIds(parent).forEach((id) => next.delete(id));
+        }
+        this.selectedIds.set(next);
+    }
+    /**
+     * Collect leaf-level IDs (terminal nodes that have no loaded children).
+     * Returns empty array if the node itself is a leaf.
+     */
+    _collectLeafIds(node) {
+        const resolved = this._resolveNode(node);
+        if (!resolved.children || resolved.children.length === 0) {
             return [];
-        const ids = [node.id];
-        if (node.children) {
-            for (const child of node.children) {
-                ids.push(...this._collectEnabledIds(child));
+        }
+        const ids = [];
+        for (const child of resolved.children) {
+            if (child.disabled)
+                continue;
+            const resolvedChild = this._resolveNode(child);
+            const childLeaves = this._collectLeafIds(resolvedChild);
+            if (childLeaves.length === 0) {
+                // This child is a leaf
+                ids.push(resolvedChild.id);
+            }
+            else {
+                ids.push(...childLeaves);
             }
         }
         return ids;
     }
-    _collectEnabledDescendantIds(node) {
+    /**
+     * Collect ALL descendant IDs (both parents and leaves) for thorough cleanup on deselect.
+     */
+    _collectAllDescendantIds(node) {
+        const resolved = this._resolveNode(node);
         const ids = [];
-        if (!node.children)
+        if (!resolved.children)
             return ids;
-        for (const child of node.children) {
-            if (!child.disabled) {
-                ids.push(child.id);
-                ids.push(...this._collectEnabledDescendantIds(child));
-            }
+        for (const child of resolved.children) {
+            const resolvedChild = this._resolveNode(child);
+            ids.push(resolvedChild.id);
+            ids.push(...this._collectAllDescendantIds(resolvedChild));
         }
         return ids;
     }
     allSelectedIds = computed(() => new Set(this.selectedIds()), ...(ngDevMode ? [{ debugName: "allSelectedIds" }] : /* istanbul ignore next */ []));
+    _resolveNode(node) {
+        return this.stateService.findNode(node.id) ?? node;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TreeSelectionService });
 }
@@ -11826,7 +11907,7 @@ class MozTreeNodeComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: MozTreeNodeComponent, isStandalone: true, selector: "moz-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, ancestors: { classPropertyName: "ancestors", publicName: "ancestors", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange", selectionChange: "selectionChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "<li\n  class=\"tree-node\"\n  [class.tree-node--selected]=\"isSelected()\"\n  [class.tree-node--disabled]=\"isDisabled()\"\n  [class.tree-node--focused]=\"isFocused()\"\n  role=\"treeitem\"\n  [id]=\"'tree-node-' + node().id\"\n  [attr.aria-level]=\"depth() + 1\"\n  [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n  [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  [attr.data-tree-node-id]=\"node().id\"\n  [tabindex]=\"isFocused() ? 0 : -1\"\n>\n  <div\n    class=\"tree-node__header\"\n    [class.tree-node__header--expandable]=\"hasChildren()\"\n    (click)=\"onHeaderClick()\"\n  >\n    <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n    <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n      @if (hasChildren()) { @if (isExpanded()) {\n      <ChevronDown20 />\n      } @else {\n      <ChevronRight20 />\n      } }\n    </span>\n\n    <div class=\"tree-node__content\">\n      @if (resolvedTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"resolvedTemplate()!\"\n        [ngTemplateOutletContext]=\"templateContext()\"\n      />\n      } @else {\n      <span class=\"tree-node__label\">{{ node().id }}</span>\n      }\n    </div>\n\n    @if (selectionMode() === 'checkbox') {\n    <moz-checkbox\n      class=\"tree-node__selection\"\n      [id]=\"'tree-checkbox-' + node().id\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [ngModel]=\"isSelected()\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @else if (selectionMode() === 'radio') {\n    <moz-radio\n      class=\"tree-node__selection\"\n      [id]=\"'tree-radio-' + node().id\"\n      [name]=\"radioName\"\n      [disabled]=\"isDisabled()\"\n      [ngModel]=\"isSelected()\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"onRadioChange($event)\"\n    />\n    }\n  </div>\n\n  @if (isExpanded() && !flat()) {\n  <ul class=\"tree-node__children\" role=\"group\">\n    @if (isLoading()) {\n    <li class=\"tree-node__loading\" role=\"presentation\">\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n    </li>\n    } @else { @if (resolvedChildren().length === 0) {\n    <li class=\"tree-node__empty\" role=\"presentation\">\n      <span>{{ noResultText() }}</span>\n    </li>\n    } @for (child of resolvedChildren(); track child.id) {\n    <moz-tree-node\n      [node]=\"child\"\n      [depth]=\"depth() + 1\"\n      [selectionMode]=\"selectionMode()\"\n      [indentSize]=\"indentSize()\"\n      [nodeTemplate]=\"nodeTemplate()\"\n      [nodeTemplates]=\"nodeTemplates()\"\n      [loadChildren]=\"loadChildren()\"\n      [ancestors]=\"ancestorsWithSelf()\"\n      (expandChange)=\"expandChange.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n    />\n    } }\n  </ul>\n  }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header,.tree-node:focus-visible>.tree-node__header{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;padding:4px 0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__header:hover{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:28px;visibility:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"], dependencies: [{ kind: "component", type: MozTreeNodeComponent, selector: "moz-tree-node", inputs: ["node", "depth", "selectionMode", "indentSize", "nodeTemplate", "nodeTemplates", "loadChildren", "ancestors", "flat", "noResultText"], outputs: ["expandChange", "selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozRadioComponent, selector: "moz-radio", inputs: ["id", "name", "label", "isInvalid", "disabled"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: MozTreeNodeComponent, isStandalone: true, selector: "moz-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, ancestors: { classPropertyName: "ancestors", publicName: "ancestors", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange", selectionChange: "selectionChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "<li\n  class=\"tree-node\"\n  [class.tree-node--selected]=\"isSelected()\"\n  [class.tree-node--disabled]=\"isDisabled()\"\n  [class.tree-node--focused]=\"isFocused()\"\n  role=\"treeitem\"\n  [id]=\"'tree-node-' + node().id\"\n  [attr.aria-level]=\"depth() + 1\"\n  [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n  [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  [attr.data-tree-node-id]=\"node().id\"\n  [tabindex]=\"isFocused() ? 0 : -1\"\n>\n  <div\n    class=\"tree-node__header\"\n    [class.tree-node__header--expandable]=\"hasChildren()\"\n    (click)=\"onHeaderClick()\"\n  >\n    <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n    <div class=\"tree-node__row\">\n      <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n        @if (hasChildren()) { @if (isExpanded()) {\n        <ChevronDown20 />\n        } @else {\n        <ChevronRight20 />\n        } }\n      </span>\n\n      <div class=\"tree-node__content\">\n        @if (resolvedTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"resolvedTemplate()!\"\n          [ngTemplateOutletContext]=\"templateContext()\"\n        />\n        } @else {\n        <span class=\"tree-node__label\">{{ node().id }}</span>\n        }\n      </div>\n\n      @if (selectionMode() === 'checkbox') {\n      <moz-checkbox\n        class=\"tree-node__selection\"\n        [id]=\"'tree-checkbox-' + node().id\"\n        [indeterminate]=\"isIndeterminate()\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"isSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onCheckboxChange($event)\"\n      />\n      } @else if (selectionMode() === 'radio') {\n      <moz-radio\n        class=\"tree-node__selection\"\n        [id]=\"'tree-radio-' + node().id\"\n        [name]=\"radioName\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"isSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onRadioChange($event)\"\n      />\n      }\n    </div>\n  </div>\n\n  @if (isExpanded() && !flat()) {\n  <ul class=\"tree-node__children\" role=\"group\">\n    @if (isLoading()) {\n    <li class=\"tree-node__loading\" role=\"presentation\">\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n    </li>\n    } @else { @if (resolvedChildren().length === 0) {\n    <li class=\"tree-node__empty\" role=\"presentation\">\n      <span>{{ noResultText() }}</span>\n    </li>\n    } @for (child of resolvedChildren(); track child.id) {\n    <moz-tree-node\n      [node]=\"child\"\n      [depth]=\"depth() + 1\"\n      [selectionMode]=\"selectionMode()\"\n      [indentSize]=\"indentSize()\"\n      [nodeTemplate]=\"nodeTemplate()\"\n      [nodeTemplates]=\"nodeTemplates()\"\n      [loadChildren]=\"loadChildren()\"\n      [ancestors]=\"ancestorsWithSelf()\"\n      (expandChange)=\"expandChange.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n    />\n    } }\n  </ul>\n  }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header>.tree-node__row,.tree-node:focus-visible>.tree-node__header>.tree-node__row{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__row{display:flex;align-items:center;height:57px;flex:1;min-width:0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease}.tree-node__header:hover>.tree-node__row{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover>.tree-node__row{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:0;padding-left:0;overflow:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"], dependencies: [{ kind: "component", type: MozTreeNodeComponent, selector: "moz-tree-node", inputs: ["node", "depth", "selectionMode", "indentSize", "nodeTemplate", "nodeTemplates", "loadChildren", "ancestors", "flat", "noResultText"], outputs: ["expandChange", "selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozRadioComponent, selector: "moz-radio", inputs: ["id", "name", "label", "isInvalid", "disabled"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozTreeNodeComponent, decorators: [{
             type: Component,
@@ -11838,7 +11919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         MozLoaderComponent,
                         ChevronDown20,
                         ChevronRight20,
-                    ], template: "<li\n  class=\"tree-node\"\n  [class.tree-node--selected]=\"isSelected()\"\n  [class.tree-node--disabled]=\"isDisabled()\"\n  [class.tree-node--focused]=\"isFocused()\"\n  role=\"treeitem\"\n  [id]=\"'tree-node-' + node().id\"\n  [attr.aria-level]=\"depth() + 1\"\n  [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n  [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  [attr.data-tree-node-id]=\"node().id\"\n  [tabindex]=\"isFocused() ? 0 : -1\"\n>\n  <div\n    class=\"tree-node__header\"\n    [class.tree-node__header--expandable]=\"hasChildren()\"\n    (click)=\"onHeaderClick()\"\n  >\n    <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n    <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n      @if (hasChildren()) { @if (isExpanded()) {\n      <ChevronDown20 />\n      } @else {\n      <ChevronRight20 />\n      } }\n    </span>\n\n    <div class=\"tree-node__content\">\n      @if (resolvedTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"resolvedTemplate()!\"\n        [ngTemplateOutletContext]=\"templateContext()\"\n      />\n      } @else {\n      <span class=\"tree-node__label\">{{ node().id }}</span>\n      }\n    </div>\n\n    @if (selectionMode() === 'checkbox') {\n    <moz-checkbox\n      class=\"tree-node__selection\"\n      [id]=\"'tree-checkbox-' + node().id\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [ngModel]=\"isSelected()\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @else if (selectionMode() === 'radio') {\n    <moz-radio\n      class=\"tree-node__selection\"\n      [id]=\"'tree-radio-' + node().id\"\n      [name]=\"radioName\"\n      [disabled]=\"isDisabled()\"\n      [ngModel]=\"isSelected()\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"onRadioChange($event)\"\n    />\n    }\n  </div>\n\n  @if (isExpanded() && !flat()) {\n  <ul class=\"tree-node__children\" role=\"group\">\n    @if (isLoading()) {\n    <li class=\"tree-node__loading\" role=\"presentation\">\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n    </li>\n    } @else { @if (resolvedChildren().length === 0) {\n    <li class=\"tree-node__empty\" role=\"presentation\">\n      <span>{{ noResultText() }}</span>\n    </li>\n    } @for (child of resolvedChildren(); track child.id) {\n    <moz-tree-node\n      [node]=\"child\"\n      [depth]=\"depth() + 1\"\n      [selectionMode]=\"selectionMode()\"\n      [indentSize]=\"indentSize()\"\n      [nodeTemplate]=\"nodeTemplate()\"\n      [nodeTemplates]=\"nodeTemplates()\"\n      [loadChildren]=\"loadChildren()\"\n      [ancestors]=\"ancestorsWithSelf()\"\n      (expandChange)=\"expandChange.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n    />\n    } }\n  </ul>\n  }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header,.tree-node:focus-visible>.tree-node__header{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;padding:4px 0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__header:hover{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:28px;visibility:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"] }]
+                    ], template: "<li\n  class=\"tree-node\"\n  [class.tree-node--selected]=\"isSelected()\"\n  [class.tree-node--disabled]=\"isDisabled()\"\n  [class.tree-node--focused]=\"isFocused()\"\n  role=\"treeitem\"\n  [id]=\"'tree-node-' + node().id\"\n  [attr.aria-level]=\"depth() + 1\"\n  [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n  [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  [attr.data-tree-node-id]=\"node().id\"\n  [tabindex]=\"isFocused() ? 0 : -1\"\n>\n  <div\n    class=\"tree-node__header\"\n    [class.tree-node__header--expandable]=\"hasChildren()\"\n    (click)=\"onHeaderClick()\"\n  >\n    <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n    <div class=\"tree-node__row\">\n      <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n        @if (hasChildren()) { @if (isExpanded()) {\n        <ChevronDown20 />\n        } @else {\n        <ChevronRight20 />\n        } }\n      </span>\n\n      <div class=\"tree-node__content\">\n        @if (resolvedTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"resolvedTemplate()!\"\n          [ngTemplateOutletContext]=\"templateContext()\"\n        />\n        } @else {\n        <span class=\"tree-node__label\">{{ node().id }}</span>\n        }\n      </div>\n\n      @if (selectionMode() === 'checkbox') {\n      <moz-checkbox\n        class=\"tree-node__selection\"\n        [id]=\"'tree-checkbox-' + node().id\"\n        [indeterminate]=\"isIndeterminate()\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"isSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onCheckboxChange($event)\"\n      />\n      } @else if (selectionMode() === 'radio') {\n      <moz-radio\n        class=\"tree-node__selection\"\n        [id]=\"'tree-radio-' + node().id\"\n        [name]=\"radioName\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"isSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onRadioChange($event)\"\n      />\n      }\n    </div>\n  </div>\n\n  @if (isExpanded() && !flat()) {\n  <ul class=\"tree-node__children\" role=\"group\">\n    @if (isLoading()) {\n    <li class=\"tree-node__loading\" role=\"presentation\">\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n    </li>\n    } @else { @if (resolvedChildren().length === 0) {\n    <li class=\"tree-node__empty\" role=\"presentation\">\n      <span>{{ noResultText() }}</span>\n    </li>\n    } @for (child of resolvedChildren(); track child.id) {\n    <moz-tree-node\n      [node]=\"child\"\n      [depth]=\"depth() + 1\"\n      [selectionMode]=\"selectionMode()\"\n      [indentSize]=\"indentSize()\"\n      [nodeTemplate]=\"nodeTemplate()\"\n      [nodeTemplates]=\"nodeTemplates()\"\n      [loadChildren]=\"loadChildren()\"\n      [ancestors]=\"ancestorsWithSelf()\"\n      (expandChange)=\"expandChange.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n    />\n    } }\n  </ul>\n  }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header>.tree-node__row,.tree-node:focus-visible>.tree-node__header>.tree-node__row{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__row{display:flex;align-items:center;height:57px;flex:1;min-width:0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease}.tree-node__header:hover>.tree-node__row{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover>.tree-node__row{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:0;padding-left:0;overflow:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], nodeTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplates", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], ancestors: [{ type: i0.Input, args: [{ isSignal: true, alias: "ancestors", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], expandChange: [{ type: i0.Output, args: ["expandChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class MozTreeNodeTemplateDirective {
@@ -11907,9 +11988,44 @@ class MozTreeComponent {
         effect(() => {
             this.stateService.loadChildrenFn.set(this.loadChildren());
         });
+        // When children load for a node whose ID is in selectedIds,
+        // replace the parent ID with its children's leaf IDs.
+        let prevChildMap = new Map();
+        effect(() => {
+            const nodes = this.stateService.internalNodes();
+            if (this.selectionService.selectionMode() !== 'checkbox')
+                return;
+            const newChildMap = new Map();
+            const newlyLoadedParentIds = [];
+            const visit = (list) => {
+                for (const n of list) {
+                    const hadChildren = prevChildMap.get(n.id) ?? false;
+                    const hasChildrenNow = !!(n.children && n.children.length > 0);
+                    newChildMap.set(n.id, hasChildrenNow);
+                    if (!hadChildren && hasChildrenNow) {
+                        newlyLoadedParentIds.push(n.id);
+                    }
+                    if (n.children)
+                        visit(n.children);
+                }
+            };
+            visit(nodes);
+            prevChildMap = newChildMap;
+            for (const parentId of newlyLoadedParentIds) {
+                this.selectionService.propagateOnChildrenLoaded(parentId);
+            }
+            if (newlyLoadedParentIds.length > 0) {
+                this.selectionChange.emit(this.selectionService.allSelectedIds());
+            }
+        });
     }
     onTreeKeydown(event) {
+        const prevSelection = this.selectionService.allSelectedIds();
         this.keyboardService.handleKeydown(event);
+        const newSelection = this.selectionService.allSelectedIds();
+        if (prevSelection !== newSelection) {
+            this.selectionChange.emit(newSelection);
+        }
     }
     onTreeFocus() {
         this.keyboardService.initFocus();