@truenas/ui-components 0.3.24 → 0.3.26

package/fesm2022/truenas-ui-components.mjs

@@ -13,7 +13,7 @@ import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew,
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, BehaviorSubject, Subject, merge, animationFrameScheduler, asapScheduler, take } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, merge, animationFrameScheduler, asapScheduler, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -25,7 +25,7 @@ import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkNestedTreeNode, CdkTreeNodeOutlet, FlatTreeControl, NestedTreeControl, CdkTreeNodeOutletContext } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
-import { map, filter, debounceTime, distinctUntilChanged, takeUntil, auditTime } from 'rxjs/operators';
+import { map, filter, debounceTime, distinctUntilChanged, auditTime } from 'rxjs/operators';
 import { CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 
@@ -11694,7 +11694,6 @@ class TnTreeFlatDataSource extends DataSource {
     _filteredData = new BehaviorSubject([]);
     filterValue = '';
     filterChanged$ = new BehaviorSubject('');
-    disconnect$ = new Subject();
     constructor(_treeControl, _treeFlattener) {
         super();
         this._treeControl = _treeControl;
@@ -11709,9 +11708,9 @@ class TnTreeFlatDataSource extends DataSource {
         }
         this.flattenData();
     }
-    /** The currently filtered (unflattened) data; equals `data` until `filter()` is used. */
+    /** The currently filtered (unflattened) data; equals `data` while no filter query is active. */
     get filteredData() {
-        return this._filteredData.value;
+        return this.filterValue ? this._filteredData.value : this.data;
     }
     connect() {
         return merge(this._treeControl.expansionModel.changed, this._flattenedData).pipe(map(() => {
@@ -11719,10 +11718,7 @@ class TnTreeFlatDataSource extends DataSource {
             return this._expandedData.value;
         }));
     }
-    disconnect() {
-        this.disconnect$.next();
-        this.disconnect$.complete();
-    }
+    disconnect() { }
     /** Filters the tree using `filterPredicate` (debounced). No-op until `filterPredicate` is set. */
     filter(query) {
         this.filterChanged$.next(query);
@@ -11731,8 +11727,15 @@ class TnTreeFlatDataSource extends DataSource {
         this._flattenedData.next(this._treeFlattener.flattenNodes(this.filterValue ? this._filteredData.value : this.data));
         this._treeControl.dataNodes = this._flattenedData.value;
     }
+    /**
+     * Deliberately NOT torn down in `disconnect()`: CdkTree disconnects the
+     * datasource when the tree is destroyed, but the same instance may be
+     * reconnected (e.g. a tree behind an `@if`), and filtering must survive that.
+     * The pipeline only references the datasource's own subjects, so it holds no
+     * external resources and is collected with the instance.
+     */
     detectFilterChanges() {
-        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged(), takeUntil(this.disconnect$)).subscribe((changedValue) => {
+        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged()).subscribe((changedValue) => {
             if (this.filterValue === changedValue || !this.filterPredicate) {
                 return;
             }
@@ -11767,7 +11770,7 @@ class TnTreeComponent extends CdkTree {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeComponent, isStandalone: true, selector: "tn-tree", host: { attributes: { "role": "tree" }, classAttribute: "tn-tree" }, providers: [
             { provide: CdkTree, useExisting: TnTreeComponent }
-        ], exportAs: ["tnTree"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<ng-container cdkTreeNodeOutlet />", styles: [":host{display:block;width:100%}.tn-tree{width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["tnTree"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<ng-container cdkTreeNodeOutlet />", styles: [".tn-tree{display:block;width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}tn-tree .tn-tree-node-wrapper>.tn-tree-node,tn-tree .tn-nested-tree-node-wrapper>.tn-nested-tree-node__content{border-bottom:none;border-top:1px solid var(--tn-lines)}tn-tree>.tn-tree-node-wrapper:first-child>.tn-tree-node,tn-tree>.tn-nested-tree-node-wrapper:first-child>.tn-nested-tree-node__content{border-top:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeComponent, decorators: [{
             type: Component,
@@ -11776,7 +11779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], host: {
                         'class': 'tn-tree',
                         'role': 'tree'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container cdkTreeNodeOutlet />", styles: [":host{display:block;width:100%}.tn-tree{width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container cdkTreeNodeOutlet />", styles: [".tn-tree{display:block;width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}tn-tree .tn-tree-node-wrapper>.tn-tree-node,tn-tree .tn-nested-tree-node-wrapper>.tn-nested-tree-node__content{border-bottom:none;border-top:1px solid var(--tn-lines)}tn-tree>.tn-tree-node-wrapper:first-child>.tn-tree-node,tn-tree>.tn-nested-tree-node-wrapper:first-child>.tn-nested-tree-node__content{border-top:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class TnTreeNodeComponent extends CdkTreeNode {
@@ -11818,15 +11821,39 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
      * defaults to the previous hardcoded value.
      */
     toggleAriaLabel = input('Toggle node', ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : []));
-    /** Semantic test-id base applied to the built-in toggle button (`button-` prefixed). */
+    /**
+     * Semantic test-id base applied to the built-in toggle button (`button-`
+     * prefixed). When unset, derives from the node's own `testId` — a row with
+     * `[testId]="['vdev', guid]"` gets `button-toggle-vdev-<guid>` — so every
+     * identified row has an addressable expand control without repeating the id.
+     */
     toggleTestId = input(...(ngDevMode ? [undefined, { debugName: "toggleTestId" }] : []));
     /**
      * Suppresses the built-in toggle button (and its alignment spacer) so the
      * consumer can render a fully custom toggle in the projected content.
+     *
+     * The built-in button is the only keyboard/AT-operable expand control this
+     * component guarantees — when hiding it, the projected replacement must be
+     * an accessible control (a real button with an aria-label, not a bare icon).
      */
     hideToggle = input(false, { ...(ngDevMode ? { debugName: "hideToggle" } : {}), transform: booleanAttribute });
     changeDetectorRef = inject(ChangeDetectorRef);
+    hostTestId = inject(TnTestIdDirective, { self: true });
     destroyed = false;
+    /** Explicit `toggleTestId` wins; otherwise `toggle`-scoped from the node's `testId`. */
+    resolvedToggleTestId = computed(() => {
+        const explicit = this.toggleTestId();
+        if (explicit !== undefined && explicit !== null) {
+            return explicit;
+        }
+        const nodeTestId = this.hostTestId.testId();
+        if (nodeTestId === undefined || nodeTestId === null || nodeTestId === '') {
+            return undefined;
+        }
+        // Role leads (button-toggle-<node id>), mirroring tn-dialog-shell's
+        // button-close-<base> convention for fixed chrome.
+        return scopeTestId('toggle', ...(Array.isArray(nodeTestId) ? nodeTestId : [nodeTestId]));
+    }, ...(ngDevMode ? [{ debugName: "resolvedToggleTestId" }] : []));
     constructor() {
         super(inject((ElementRef)), inject(CdkTree, { optional: true }), inject(CDK_TREE_NODE_OUTLET_NODE, { optional: true }), inject(ChangeDetectorRef, { optional: true }));
         inject(DestroyRef).onDestroy(() => this.destroyed = true);
@@ -11911,13 +11938,16 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
         else {
             this._tree.toggle(this.data);
         }
+        // Mirrors CdkTreeNodeToggle's focus handling. `_keyManager` is a CDK
+        // underscore member, so a CDK upgrade may rename it — the optional call
+        // degrades to "focus not moved" rather than breaking the toggle.
         this._tree._keyManager?.focusItem(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnNestedTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnNestedTreeNodeComponent, isStandalone: true, selector: "tn-nested-tree-node", inputs: { toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleTestId: { classPropertyName: "toggleTestId", publicName: "toggleTestId", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-nested-tree-node-wrapper" }, providers: [
             { provide: CdkNestedTreeNode, useExisting: TnNestedTreeNodeComponent },
             { provide: CdkTreeNode, useExisting: TnNestedTreeNodeComponent }
-        ], exportAs: ["tnNestedTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  @if (!hideToggle()) {\n    <!-- Toggle button for expandable nodes (provided by component).\n         Alt+click / Alt+Enter toggles the node together with all descendants.\n         tabindex=\"-1\" keeps it out of the tab order \u2014 the tree's key manager\n         drives focus at the treeitem level, matching cdkTreeNodeToggle. -->\n    @if (isExpandable) {\n      <button\n        class=\"tn-nested-tree-node__toggle\"\n        type=\"button\"\n        tabindex=\"-1\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"toggleTestId()\"\n        [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n        [attr.aria-label]=\"toggleAriaLabel()\"\n        (click)=\"toggleNode($event); $event.stopPropagation()\"\n        (keydown.enter)=\"toggleNode($event); $event.preventDefault()\"\n        (keydown.space)=\"toggleNode($event); $event.preventDefault()\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </button>\n    }\n\n    <!-- Spacer for non-expandable nodes to maintain alignment -->\n    @if (!isExpandable) {\n      <div class=\"tn-nested-tree-node__spacer\"></div>\n    }\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}\n", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnNestedTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  @if (!hideToggle()) {\n    <!-- Toggle button for expandable nodes (provided by component).\n         Alt+click / Alt+Enter toggles the node together with all descendants.\n         tabindex=\"-1\" keeps it out of the tab order \u2014 the tree's key manager\n         drives focus at the treeitem level, matching cdkTreeNodeToggle. -->\n    @if (isExpandable) {\n      <button\n        class=\"tn-nested-tree-node__toggle\"\n        type=\"button\"\n        tabindex=\"-1\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"resolvedToggleTestId()\"\n        [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n        [attr.aria-label]=\"toggleAriaLabel()\"\n        (click)=\"toggleNode($event); $event.stopPropagation()\"\n        (keydown.enter)=\"toggleNode($event); $event.preventDefault()\"\n        (keydown.space)=\"toggleNode($event); $event.preventDefault()\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </button>\n    }\n\n    <!-- Spacer for non-expandable nodes to maintain alignment -->\n    @if (!isExpandable) {\n      <div class=\"tn-nested-tree-node__spacer\"></div>\n    }\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}\n", styles: [":host{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 8px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnNestedTreeNodeComponent, decorators: [{
             type: Component,
@@ -11929,7 +11959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.aria-level]': 'level + 1',
                         '[attr.aria-expanded]': 'isExpandable ? isExpanded : null',
                         'role': 'treeitem'
-                    }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-nested-tree-node__content\">\n  @if (!hideToggle()) {\n    <!-- Toggle button for expandable nodes (provided by component).\n         Alt+click / Alt+Enter toggles the node together with all descendants.\n         tabindex=\"-1\" keeps it out of the tab order \u2014 the tree's key manager\n         drives focus at the treeitem level, matching cdkTreeNodeToggle. -->\n    @if (isExpandable) {\n      <button\n        class=\"tn-nested-tree-node__toggle\"\n        type=\"button\"\n        tabindex=\"-1\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"toggleTestId()\"\n        [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n        [attr.aria-label]=\"toggleAriaLabel()\"\n        (click)=\"toggleNode($event); $event.stopPropagation()\"\n        (keydown.enter)=\"toggleNode($event); $event.preventDefault()\"\n        (keydown.space)=\"toggleNode($event); $event.preventDefault()\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </button>\n    }\n\n    <!-- Spacer for non-expandable nodes to maintain alignment -->\n    @if (!isExpandable) {\n      <div class=\"tn-nested-tree-node__spacer\"></div>\n    }\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}\n", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"] }]
+                    }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-nested-tree-node__content\">\n  @if (!hideToggle()) {\n    <!-- Toggle button for expandable nodes (provided by component).\n         Alt+click / Alt+Enter toggles the node together with all descendants.\n         tabindex=\"-1\" keeps it out of the tab order \u2014 the tree's key manager\n         drives focus at the treeitem level, matching cdkTreeNodeToggle. -->\n    @if (isExpandable) {\n      <button\n        class=\"tn-nested-tree-node__toggle\"\n        type=\"button\"\n        tabindex=\"-1\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"resolvedToggleTestId()\"\n        [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n        [attr.aria-label]=\"toggleAriaLabel()\"\n        (click)=\"toggleNode($event); $event.stopPropagation()\"\n        (keydown.enter)=\"toggleNode($event); $event.preventDefault()\"\n        (keydown.space)=\"toggleNode($event); $event.preventDefault()\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </button>\n    }\n\n    <!-- Spacer for non-expandable nodes to maintain alignment -->\n    @if (!isExpandable) {\n      <div class=\"tn-nested-tree-node__spacer\"></div>\n    }\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}\n", styles: [":host{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 8px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAriaLabel", required: false }] }], toggleTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleTestId", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }] } });
 
 class TnTreeNodeOutletDirective {
@@ -11959,13 +11989,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class TnNestedTreeDataSource extends DataSource {
     /** When set, `filter(query)` re-renders the tree from `filterPredicate(data, query)`. */
     filterPredicate;
-    /** When set, incoming `data` is sorted recursively before rendering. */
+    /**
+     * When set, incoming `data` is sorted recursively before rendering.
+     *
+     * Note: sorting REWRITES `children` arrays on the caller's node objects
+     * (a new sorted array is assigned per node). Node object identity is
+     * preserved — deliberately, since tree controls track expansion state by
+     * node identity — but don't pass an object graph that is shared with code
+     * relying on the original child order.
+     */
     sortComparer;
     filterValue = '';
     filterChanged$ = new BehaviorSubject('');
     _data = new BehaviorSubject([]);
     _filteredData = new BehaviorSubject([]);
-    disconnect$ = new Subject();
     get data() {
         return this._data.value;
     }
@@ -11982,16 +12019,20 @@ class TnNestedTreeDataSource extends DataSource {
     connect(collectionViewer) {
         return merge(collectionViewer.viewChange, this._data, this._filteredData).pipe(map(() => (this.filterValue ? this._filteredData.value : this.data)));
     }
-    disconnect() {
-        this.disconnect$.next();
-        this.disconnect$.complete();
-    }
+    disconnect() { }
     /** Filters the tree using `filterPredicate` (debounced). No-op until `filterPredicate` is set. */
     filter(query) {
         this.filterChanged$.next(query);
     }
+    /**
+     * Deliberately NOT torn down in `disconnect()`: CdkTree disconnects the
+     * datasource when the tree is destroyed, but the same instance may be
+     * reconnected (e.g. a tree behind an `@if`), and filtering must survive that.
+     * The pipeline only references the datasource's own subjects, so it holds no
+     * external resources and is collected with the instance.
+     */
     detectFilterChanges() {
-        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged(), takeUntil(this.disconnect$)).subscribe((changedValue) => {
+        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged()).subscribe((changedValue) => {
             if (this.filterValue === changedValue || !this.filterPredicate) {
                 return;
             }
@@ -12128,6 +12169,10 @@ class TnTreeNodeHarness extends ComponentHarness {
     /**
      * Toggles the node together with all of its descendants (Alt+click on the
      * built-in nested-node toggle).
+     *
+     * Only nested nodes honor the Alt modifier — on a flat node the row's
+     * `cdkTreeNodeToggle` is not Alt-aware, so this degrades to a plain
+     * single-level toggle.
      */
     async toggleWithDescendants() {
         await (await this.getToggle()).click({ alt: true });
@@ -12156,6 +12201,7 @@ class TnTreeNodeHarness extends ComponentHarness {
         return toggle;
     }
 }
+
 /**
  * Harness for interacting with `tn-tree` in tests.
  *