@truenas/ui-components 0.3.23 → 0.3.24

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, merge, animationFrameScheduler, asapScheduler, Subject, take } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, Subject, merge, animationFrameScheduler, asapScheduler, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -23,9 +23,9 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/tree';
-import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode, CdkTreeNodeOutletContext } 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, auditTime } from 'rxjs/operators';
+import { map, filter, debounceTime, distinctUntilChanged, takeUntil, auditTime } from 'rxjs/operators';
 import { CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 
@@ -11676,23 +11676,42 @@ class TnTreeFlattener {
 }
 /**
  * Data source for flat tree.
+ *
+ * Optionally supports client-side filtering and sorting: set `filterPredicate`
+ * (and call `filter(query)`) and/or `sortComparer`. Both are opt-in; when unset
+ * the datasource behaves exactly as before.
  */
 class TnTreeFlatDataSource extends DataSource {
     _treeControl;
     _treeFlattener;
+    /** When set, `filter(query)` re-renders the tree from `filterPredicate(data, query)`. */
+    filterPredicate;
+    /** When set, incoming `data` is sorted (top level) before flattening. */
+    sortComparer;
     _flattenedData = new BehaviorSubject([]);
     _expandedData = new BehaviorSubject([]);
     _data = new BehaviorSubject([]);
+    _filteredData = new BehaviorSubject([]);
+    filterValue = '';
+    filterChanged$ = new BehaviorSubject('');
+    disconnect$ = new Subject();
     constructor(_treeControl, _treeFlattener) {
         super();
         this._treeControl = _treeControl;
         this._treeFlattener = _treeFlattener;
+        this.detectFilterChanges();
     }
     get data() { return this._data.value; }
     set data(value) {
-        this._data.next(value);
-        this._flattenedData.next(this._treeFlattener.flattenNodes(this.data));
-        this._treeControl.dataNodes = this._flattenedData.value;
+        this._data.next(this.sortComparer ? [...value].sort(this.sortComparer) : value);
+        if (this.filterValue && this.filterPredicate) {
+            this._filteredData.next(this.filterPredicate(this.data, this.filterValue));
+        }
+        this.flattenData();
+    }
+    /** The currently filtered (unflattened) data; equals `data` until `filter()` is used. */
+    get filteredData() {
+        return this._filteredData.value;
     }
     connect() {
         return merge(this._treeControl.expansionModel.changed, this._flattenedData).pipe(map(() => {
@@ -11700,7 +11719,28 @@ class TnTreeFlatDataSource extends DataSource {
             return this._expandedData.value;
         }));
     }
-    disconnect() { }
+    disconnect() {
+        this.disconnect$.next();
+        this.disconnect$.complete();
+    }
+    /** Filters the tree using `filterPredicate` (debounced). No-op until `filterPredicate` is set. */
+    filter(query) {
+        this.filterChanged$.next(query);
+    }
+    flattenData() {
+        this._flattenedData.next(this._treeFlattener.flattenNodes(this.filterValue ? this._filteredData.value : this.data));
+        this._treeControl.dataNodes = this._flattenedData.value;
+    }
+    detectFilterChanges() {
+        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged(), takeUntil(this.disconnect$)).subscribe((changedValue) => {
+            if (this.filterValue === changedValue || !this.filterPredicate) {
+                return;
+            }
+            this.filterValue = changedValue;
+            this._filteredData.next(this.filterPredicate(this.data, changedValue));
+            this.flattenData();
+        });
+    }
     _getExpandedNodesWithLevel() {
         const expandedNodes = [];
         const flatNodes = this._flattenedData.value;
@@ -11772,26 +11812,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The `role=\"treeitem\"` (plus aria-level/aria-expanded) lives on the host\n     `.tn-tree-node-wrapper`, so this inner div is a presentational container \u2014\n     no role or aria-* here, to avoid exposing a second, nested treeitem to AT. -->\n<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"] }]
         }], ctorParameters: () => [] });
 
-class TnTreeNodeOutletDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeNodeOutletDirective, isStandalone: true, selector: "[tnTreeNodeOutlet]", hostDirectives: [{ directive: i2.CdkTreeNodeOutlet }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tnTreeNodeOutlet]',
-                    standalone: true,
-                    hostDirectives: [{
-                            directive: CdkTreeNodeOutlet,
-                            inputs: [],
-                            outputs: []
-                        }]
-                }]
-        }] });
-
 class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
+    /**
+     * Accessible label for the built-in toggle button. Pass a translated string;
+     * 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). */
+    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.
+     */
+    hideToggle = input(false, { ...(ngDevMode ? { debugName: "hideToggle" } : {}), transform: booleanAttribute });
+    changeDetectorRef = inject(ChangeDetectorRef);
+    destroyed = false;
     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);
     }
     /** The tree node's level in the tree */
     get level() {
@@ -11799,11 +11837,10 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
             // Legacy treeControl approach
             return this._tree.treeControl.getLevel(this.data);
         }
-        else if (this._tree && 'getLevel' in this._tree && typeof this._tree.getLevel === 'function') {
-            // Modern childrenAccessor approach - use tree's getLevel method
-            return this._tree.getLevel(this.data);
-        }
-        return 0;
+        // CdkTreeNode's own getter: levelAccessor when available, else the parent
+        // node's aria-level from the DOM — which is what makes nested trees (whose
+        // NestedTreeControl has no getLevel) report correct levels.
+        return this._tree ? super.level : 0;
     }
     /** Whether the tree node is expandable */
     get isExpandable() {
@@ -11811,6 +11848,12 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
             // Legacy treeControl approach
             return this._tree.treeControl.isExpandable(this.data);
         }
+        else if (this._tree?.treeControl) {
+            // NestedTreeControl leaves `isExpandable` undefined unless configured —
+            // fall back to its getChildren (synchronous arrays only).
+            const children = this._tree.treeControl.getChildren?.(this.data);
+            return Array.isArray(children) && children.length > 0;
+        }
         else if (this._tree && 'childrenAccessor' in this._tree && this._tree.childrenAccessor) {
             // Modern childrenAccessor approach
             const childrenAccessor = this._tree.childrenAccessor;
@@ -11835,24 +11878,330 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
         }
         return false;
     }
+    /**
+     * CDK inserts child node views synchronously from `ngAfterContentInit`, i.e.
+     * mid-change-detection. Because the outlet here lives in PROJECTED content
+     * whose view container has already been traversed for the current pass, the
+     * new views would miss their first check and trip dev-mode NG0100. Defer the
+     * insertion to a microtask so the views are created outside change detection
+     * and get a normal first check on the pass that `markForCheck` schedules.
+     */
+    updateChildrenNodes(children) {
+        queueMicrotask(() => {
+            if (this.destroyed) {
+                return;
+            }
+            super.updateChildrenNodes(children);
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * Toggles the node; with the Alt key held, toggles the node together with all
+     * of its descendants. Replaces `cdkTreeNodeToggle` on the built-in button so
+     * the Alt behavior is deterministic (a stacked template listener would run in
+     * an unspecified order relative to the CDK toggle's own click handler).
+     */
+    toggleNode(event) {
+        if (!this._tree) {
+            return;
+        }
+        if ('altKey' in event && event.altKey) {
+            this._tree.toggleDescendants(this.data);
+        }
+        else {
+            this._tree.toggle(this.data);
+        }
+        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", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-nested-tree-node-wrapper" }, providers: [
+    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, ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\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  <!-- 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}", 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: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], 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]=\"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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnNestedTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-nested-tree-node', standalone: true, imports: [CdkTreeModule, TnIconComponent, TnTreeNodeOutletDirective], exportAs: 'tnNestedTreeNode', providers: [
+            args: [{ selector: 'tn-nested-tree-node', standalone: true, imports: [TnIconComponent, TnTestIdDirective], exportAs: 'tnNestedTreeNode', providers: [
                         { provide: CdkNestedTreeNode, useExisting: TnNestedTreeNodeComponent },
                         { provide: CdkTreeNode, useExisting: TnNestedTreeNodeComponent }
-                    ], host: {
+                    ], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], host: {
                         'class': 'tn-nested-tree-node-wrapper',
                         '[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  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\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  <!-- 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}", 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"] }]
-        }], ctorParameters: () => [] });
+                    }, 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"] }]
+        }], 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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeNodeOutletDirective, isStandalone: true, selector: "[tnTreeNodeOutlet]", hostDirectives: [{ directive: i2.CdkTreeNodeOutlet }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnTreeNodeOutlet]',
+                    standalone: true,
+                    hostDirectives: [{
+                            directive: CdkTreeNodeOutlet,
+                            inputs: [],
+                            outputs: []
+                        }]
+                }]
+        }] });
+
+/**
+ * Data source for nested trees (`tn-nested-tree-node`).
+ *
+ * Optionally supports client-side filtering and sorting: set `filterPredicate`
+ * (and call `filter(query)`) and/or `sortComparer` (applied recursively through
+ * `children`). Both are opt-in.
+ */
+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. */
+    sortComparer;
+    filterValue = '';
+    filterChanged$ = new BehaviorSubject('');
+    _data = new BehaviorSubject([]);
+    _filteredData = new BehaviorSubject([]);
+    disconnect$ = new Subject();
+    get data() {
+        return this._data.value;
+    }
+    set data(value) {
+        this._data.next(this.sortComparer ? this.sort(value) : value);
+    }
+    constructor(initialData) {
+        super();
+        if (initialData) {
+            this.data = initialData;
+        }
+        this.detectFilterChanges();
+    }
+    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();
+    }
+    /** Filters the tree using `filterPredicate` (debounced). No-op until `filterPredicate` is set. */
+    filter(query) {
+        this.filterChanged$.next(query);
+    }
+    detectFilterChanges() {
+        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged(), takeUntil(this.disconnect$)).subscribe((changedValue) => {
+            if (this.filterValue === changedValue || !this.filterPredicate) {
+                return;
+            }
+            this.filterValue = changedValue;
+            this._filteredData.next(this.filterPredicate(this.data, changedValue));
+        });
+    }
+    sort(value) {
+        return [...value].sort(this.sortComparer).map((item) => {
+            if (item.children?.length) {
+                item.children = this.sort(item.children);
+            }
+            return item;
+        });
+    }
+}
+
+/**
+ * Creates a flat tree control for managing expansion state of flat tree structures.
+ *
+ * @param getLevel - Function that returns the level/depth of a node
+ * @param isExpandable - Function that returns whether a node can be expanded
+ * @param options - Optional configuration including trackBy function
+ * @returns TnTreeExpansion instance for managing tree state
+ *
+ * @example
+ * ```ts
+ * const treeControl = createFlatTreeControl<DatasetDetails, string>(
+ *   (dataset) => (dataset?.name?.split('/')?.length || 0) - 1,
+ *   (dataset) => Number(dataset?.children?.length) > 0,
+ *   { trackBy: (dataset) => dataset.id }
+ * );
+ * ```
+ */
+function createFlatTreeControl(getLevel, isExpandable, options) {
+    return new FlatTreeControl(getLevel, isExpandable, options);
+}
+/**
+ * Creates a nested tree control for managing expansion state of nested tree structures.
+ *
+ * @param getChildren - Function that returns the children of a node
+ * @param options - Optional configuration including isExpandable and trackBy functions
+ * @returns TnTreeExpansion instance for managing tree state
+ *
+ * @example
+ * ```ts
+ * const treeControl = createNestedTreeControl<VDevNode, string>(
+ *   (vdev) => vdev.children,
+ *   { trackBy: (vdev) => vdev.guid }
+ * );
+ * ```
+ */
+function createNestedTreeControl(getChildren, options) {
+    // NestedTreeControl leaves `isExpandable` undefined unless provided, which
+    // reads as "every node is a leaf" — default it from getChildren (sync arrays).
+    const isExpandable = options?.isExpandable
+        ?? ((dataNode) => {
+            const children = getChildren(dataNode);
+            return Array.isArray(children) && children.length > 0;
+        });
+    return new NestedTreeControl(getChildren, { ...options, isExpandable });
+}
+
+/**
+ * Harness for interacting with a single `tn-tree-node` or `tn-nested-tree-node`.
+ *
+ * Levels are 0-based (root nodes are level 0), matching the values consumers pass
+ * to tree controls — the DOM's 1-based `aria-level` is converted internally.
+ */
+class TnTreeNodeHarness extends ComponentHarness {
+    static hostSelector = '.tn-tree-node-wrapper, .tn-nested-tree-node-wrapper';
+    /** The built-in nested-node toggle button (absent on flat nodes, leaves, and `hideToggle` nodes). */
+    nestedToggle = this.locatorForOptional('.tn-nested-tree-node__toggle');
+    /** The flat node's row, which acts as its toggle surface. */
+    flatRow = this.locatorForOptional('.tn-tree-node');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tree node with
+     * specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTreeNodeHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('expanded', options.expanded, async (harness, expanded) => (await harness.isExpanded()) === expanded)
+            .addOption('level', options.level, async (harness, level) => (await harness.getLevel()) === level);
+    }
+    /**
+     * Gets the node's own text, excluding any descendant tree nodes and the
+     * built-in toggle button.
+     *
+     * @returns Promise resolving to the node's text.
+     */
+    async getText() {
+        return (await this.host()).text({
+            exclude: '.tn-tree-node-wrapper, .tn-nested-tree-node-wrapper, button',
+        });
+    }
+    /**
+     * Gets the node's 0-based level (root nodes are 0).
+     *
+     * @returns Promise resolving to the level.
+     */
+    async getLevel() {
+        const ariaLevel = await (await this.host()).getAttribute('aria-level');
+        return Number(ariaLevel) - 1;
+    }
+    /**
+     * Whether the node is expandable (advertises `aria-expanded`).
+     *
+     * @returns Promise resolving to true if the node is expandable.
+     */
+    async isExpandable() {
+        return (await (await this.host()).getAttribute('aria-expanded')) !== null;
+    }
+    /**
+     * Whether an expandable node is currently expanded.
+     *
+     * @returns Promise resolving to true if `aria-expanded="true"`.
+     */
+    async isExpanded() {
+        return (await (await this.host()).getAttribute('aria-expanded')) === 'true';
+    }
+    /**
+     * Toggles the node's expansion by clicking its toggle surface — the built-in
+     * toggle button on a nested node, or the row itself on a flat node. Throws for
+     * nested nodes rendered with `hideToggle` (interact with the custom toggle
+     * directly in that case).
+     */
+    async toggle() {
+        await (await this.getToggle()).click();
+    }
+    /**
+     * Toggles the node together with all of its descendants (Alt+click on the
+     * built-in nested-node toggle).
+     */
+    async toggleWithDescendants() {
+        await (await this.getToggle()).click({ alt: true });
+    }
+    /**
+     * Expands the node if it is expandable and currently collapsed.
+     */
+    async expand() {
+        if ((await this.isExpandable()) && !(await this.isExpanded())) {
+            await this.toggle();
+        }
+    }
+    /**
+     * Collapses the node if it is currently expanded.
+     */
+    async collapse() {
+        if (await this.isExpanded()) {
+            await this.toggle();
+        }
+    }
+    async getToggle() {
+        const toggle = (await this.nestedToggle()) ?? (await this.flatRow());
+        if (!toggle) {
+            throw new Error('Node has no toggle surface (nested node with hideToggle?)');
+        }
+        return toggle;
+    }
+}
+/**
+ * Harness for interacting with `tn-tree` in tests.
+ *
+ * @example
+ * ```typescript
+ * const tree = await loader.getHarness(TnTreeHarness);
+ * const roots = await tree.getNodes({ level: 0 });
+ * await roots[0].expand();
+ * expect(await tree.getNodeTexts()).toContain('child');
+ * ```
+ */
+class TnTreeHarness extends ComponentHarness {
+    static hostSelector = 'tn-tree';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tree with
+     * specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTreeHarness, options);
+    }
+    /**
+     * Gets the harnesses for the tree's nodes (all levels, in document order).
+     *
+     * Note: nested trees render collapsed subtrees into the DOM (hidden via CSS),
+     * so nodes under a collapsed parent are still returned — filter by `level` or
+     * check the parent's `isExpanded()` when visibility matters.
+     *
+     * @param filter Optional filter to narrow the nodes.
+     * @returns Promise resolving to the matching node harnesses.
+     */
+    async getNodes(filter = {}) {
+        return this.locatorForAll(TnTreeNodeHarness.with(filter))();
+    }
+    /**
+     * Gets the text of every node currently rendered, in document order.
+     *
+     * @returns Promise resolving to an array of node texts.
+     */
+    async getNodeTexts() {
+        const nodes = await this.getNodes();
+        return Promise.all(nodes.map((node) => node.getText()));
+    }
+}
 
 /**
  * Renders a single virtual tree row.
@@ -18857,5 +19206,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, injectTnFormFieldAria, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, injectTnFormFieldAria, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map