@mozaic-ds/angular 2.0.32 → 2.0.34

package/fesm2022/mozaic-ds-angular.mjs

@@ -7,7 +7,7 @@ import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/fo
 import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, CheckCircle24 } from '@mozaic-ds/icons-angular';
 import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import { Subject, take } from 'rxjs';
+import { Subject, take, tap, of, firstValueFrom } from 'rxjs';
 import parsePhoneNumberFromString, { getCountries, getExampleNumber, isValidPhoneNumber, getCountryCallingCode } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
 import * as i1$1 from '@angular/cdk/scrolling';
@@ -11392,6 +11392,7 @@ class TreeStateService {
     expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
     loadingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
     internalNodes = signal([], ...(ngDevMode ? [{ debugName: "internalNodes" }] : /* istanbul ignore next */ []));
+    loadChildrenFn = signal(null, ...(ngDevMode ? [{ debugName: "loadChildrenFn" }] : /* istanbul ignore next */ []));
     flatVisibleNodes = computed(() => {
         const result = [];
         this._flatten(this.internalNodes(), result, 0, null);
@@ -11427,6 +11428,22 @@ class TreeStateService {
             return next;
         });
     }
+    expandAndLoad(node) {
+        const wasExpanded = this.expandedIds().has(node.id);
+        this.toggleExpanded(node.id);
+        if (!wasExpanded) {
+            const loadFn = this.loadChildrenFn();
+            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);
+                    this.removeLoading(node.id);
+                }), tap(() => void 0));
+            }
+        }
+        return of(undefined);
+    }
     addLoading(id) {
         this.loadingIds.update((s) => new Set([...s, id]));
     }
@@ -11451,6 +11468,21 @@ class TreeStateService {
             return n;
         });
     }
+    findNode(nodeId) {
+        return this._findNodeRecursive(this.internalNodes(), nodeId);
+    }
+    _findNodeRecursive(nodes, id) {
+        for (const node of nodes) {
+            if (node.id === id)
+                return node;
+            if (node.children) {
+                const found = this._findNodeRecursive(node.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
     findParentId(nodeId) {
         const flat = this.flatVisibleNodes();
         const entry = flat.find((f) => f.node.id === nodeId);
@@ -11464,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 */ []));
@@ -11484,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)
-            return false;
-        if (node.children.length === 0)
+        const resolved = this._resolveNode(node);
+        const leaves = this._collectLeafIds(resolved);
+        if (leaves.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) => {
@@ -11527,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;
         });
     }
@@ -11541,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 });
 }
@@ -11614,7 +11726,7 @@ class TreeKeyboardService {
                     break;
                 const isExpanded = this.state.expandedIds().has(current.node.id);
                 if (this._hasChildren(current.node) && !isExpanded && !current.node.disabled) {
-                    this.state.toggleExpanded(current.node.id);
+                    this.state.expandAndLoad(current.node).subscribe();
                 }
                 else if (isExpanded) {
                     const firstChild = flat[currentIndex + 1];
@@ -11642,7 +11754,7 @@ class TreeKeyboardService {
                 if (!current)
                     break;
                 if (this._hasChildren(current.node) && !current.node.disabled) {
-                    this.state.toggleExpanded(current.node.id);
+                    this.state.expandAndLoad(current.node).subscribe();
                 }
                 break;
             }
@@ -11690,7 +11802,7 @@ class TreeKeyboardService {
         const siblings = flat.filter((f) => f.depth === current.depth && f.parentId === current.parentId);
         for (const sibling of siblings) {
             if (this._hasChildren(sibling.node) && !this.state.expandedIds().has(sibling.node.id)) {
-                this.state.toggleExpanded(sibling.node.id);
+                this.state.expandAndLoad(sibling.node).subscribe();
             }
         }
     }
@@ -11760,24 +11872,8 @@ class MozTreeNodeComponent {
         }
     }
     onToggleExpand() {
-        const node = this.node();
-        if (this.isExpanded()) {
-            this.stateService.toggleExpanded(node.id);
-            this.expandChange.emit(node.id);
-            return;
-        }
-        this.stateService.toggleExpanded(node.id);
-        this.expandChange.emit(node.id);
-        const loadFn = this.loadChildren();
-        if (loadFn && node.children === undefined) {
-            this.stateService.addLoading(node.id);
-            loadFn(node)
-                .pipe(take(1))
-                .subscribe((children) => {
-                this.stateService.patchChildren(node.id, children);
-                this.stateService.removeLoading(node.id);
-            });
-        }
+        this.stateService.expandAndLoad(this.node()).subscribe();
+        this.expandChange.emit(this.node().id);
     }
     onCheckboxChange(event) {
         if (this.isDisabled())
@@ -11811,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,
@@ -11823,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 {
@@ -11889,9 +11985,47 @@ class MozTreeComponent {
         effect(() => {
             this.selectionService.setRootNodes(this.nodes());
         });
+        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();
@@ -11902,6 +12036,41 @@ class MozTreeComponent {
     onSelectionChange(ids) {
         this.selectionChange.emit(ids);
     }
+    async expandPath(path) {
+        const loadFn = this.stateService.loadChildrenFn();
+        for (let i = 0; i < path.length - 1; i++) {
+            const nodeId = path[i];
+            const node = this.stateService.findNode(nodeId);
+            if (!node)
+                break;
+            // Expand first so the children area is visible
+            if (!this.stateService.expandedIds().has(nodeId)) {
+                this.stateService.toggleExpanded(nodeId);
+                this.expandedIdsChange.emit(new Set(this.stateService.expandedIds()));
+                // Yield to let Angular render the expansion
+                await new Promise((resolve) => setTimeout(resolve));
+            }
+            // Load children if needed
+            if (loadFn && node.children === undefined) {
+                this.stateService.addLoading(nodeId);
+                this.expandedIdsChange.emit(new Set(this.stateService.expandedIds()));
+                // Yield to let Angular render the loader
+                await new Promise((resolve) => setTimeout(resolve));
+                const children = await firstValueFrom(loadFn(node).pipe(take(1)));
+                this.stateService.patchChildren(nodeId, children);
+                this.stateService.removeLoading(nodeId);
+                // Yield to let Angular render the new children
+                await new Promise((resolve) => setTimeout(resolve));
+            }
+        }
+        this.expandedIdsChange.emit(new Set(this.stateService.expandedIds()));
+    }
+    scrollToNode(nodeId) {
+        setTimeout(() => {
+            const el = document.querySelector(`[data-tree-node-id="${nodeId}"]`);
+            el?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        });
+    }
     expandAll() {
         const flat = this.stateService.flatVisibleNodes();
         const allIds = new Set(flat.map((f) => f.node.id));