@truenas/ui-components 0.1.41 → 0.1.42

package/fesm2022/truenas-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, viewChild, signal, computed, effect, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, ViewEncapsulation, Directive, contentChildren, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, DestroyRef } from '@angular/core';
+import { inject, ElementRef, input, output, viewChild, signal, computed, effect, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, ViewEncapsulation, Directive, contentChildren, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, DestroyRef, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
@@ -18,7 +18,7 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { DataSource } from '@angular/cdk/collections';
+import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i1$3 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
@@ -6022,6 +6022,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<ng-content />", styles: [".tn-selection-list{display:block;padding:8px 0;margin:0;background-color:var(--tn-bg2);border-radius:4px}.tn-selection-list--dense{padding:4px 0}.tn-selection-list--disabled{opacity:.6;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnListOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
+class TnEmptyComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    iconLibrary = input('mdi', ...(ngDevMode ? [{ debugName: "iconLibrary" }] : []));
+    actionText = input(...(ngDevMode ? [undefined, { debugName: "actionText" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    onAction = output();
+    hasAction = computed(() => !!this.actionText(), ...(ngDevMode ? [{ debugName: "hasAction" }] : []));
+    iconSize = computed(() => {
+        return this.size() === 'compact' ? 'lg' : 'xl';
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnEmptyComponent, isStandalone: true, selector: "tn-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLibrary: { classPropertyName: "iconLibrary", publicName: "iconLibrary", isSignal: true, isRequired: false, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, host: { attributes: { "role": "status" }, properties: { "class.tn-empty--compact": "size() === \"compact\"" }, classAttribute: "tn-empty" }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnEmptyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-empty', standalone: true, imports: [TnIconComponent, TnButtonComponent], host: {
+                        'class': 'tn-empty',
+                        '[class.tn-empty--compact]': 'size() === "compact"',
+                        'role': 'status',
+                    }, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLibrary", required: false }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
+
 class TnHeaderCellDefDirective {
     template = inject((TemplateRef));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnHeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6031,7 +6055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[tnHeaderCellDef]',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 class TnCellDefDirective {
@@ -6043,73 +6067,491 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[tnCellDef]',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 class TnTableColumnDirective {
     name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), alias: 'tnColumnDef' });
+    sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
     headerTemplate = contentChild(TnHeaderCellDefDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : {}), read: TemplateRef });
     cellTemplate = contentChild(TnCellDefDirective, { ...(ngDevMode ? { debugName: "cellTemplate" } : {}), read: TemplateRef });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: TnTableColumnDirective, isStandalone: true, selector: "[tnColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "tnColumnDef", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TnHeaderCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cellTemplate", first: true, predicate: TnCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["tnColumnDef"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: TnTableColumnDirective, isStandalone: true, selector: "[tnColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "tnColumnDef", isSignal: true, isRequired: true, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TnHeaderCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cellTemplate", first: true, predicate: TnCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["tnColumnDef"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tnColumnDef]',
                     standalone: true,
-                    exportAs: 'tnColumnDef'
+                    exportAs: 'tnColumnDef',
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnColumnDef", required: true }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnHeaderCellDefDirective), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }], cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCellDefDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+/**
+ * Directive to define the expandable detail row template.
+ * Place inside `tn-table` to provide expanded content for each row.
+ *
+ * @example
+ * ```html
+ * <tn-table [dataSource]="data" [displayedColumns]="columns" [expandable]="true">
+ *   ...column defs...
+ *   <ng-template tnDetailRowDef let-row>
+ *     <p>Details for {{ row.name }}</p>
+ *   </ng-template>
+ * </tn-table>
+ * ```
+ */
+class TnDetailRowDefDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDetailRowDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnDetailRowDefDirective, isStandalone: true, selector: "[tnDetailRowDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDetailRowDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnDetailRowDef]',
+                    standalone: true,
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnColumnDef", required: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnHeaderCellDefDirective), { ...{ read: TemplateRef }, isSignal: true }] }], cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCellDefDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+        }] });
 
+const SORT_ICON_ASC = tnIconMarker('arrow_upward', 'material');
+const SORT_ICON_DESC = tnIconMarker('arrow_downward', 'material');
+const SORT_ICON_NONE = tnIconMarker('unfold_more', 'material');
+const EXPAND_ICON_DOWN = tnIconMarker('keyboard_arrow_down', 'material');
+const EXPAND_ICON_UP = tnIconMarker('keyboard_arrow_up', 'material');
+/**
+ * Determines the animation duration for detail row expand/collapse.
+ * Respects prefers-reduced-motion by using 0ms when the user prefers reduced motion.
+ */
+function getExpandDuration() {
+    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+        return '0ms';
+    }
+    return '225ms cubic-bezier(0.4, 0.0, 0.2, 1)';
+}
 class TnTableComponent {
+    destroyRef = inject(DestroyRef);
+    // --- Core inputs ---
     dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
+    trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
+    emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    emptyIcon = input('', ...(ngDevMode ? [{ debugName: "emptyIcon" }] : []));
+    // --- Feature inputs (all opt-in) ---
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+    // --- Outputs ---
+    sortChange = output();
+    selectionChange = output();
+    // --- Content queries ---
     columnDefs = contentChildren(TnTableColumnDirective, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
-    columnDefMap = new Map();
-    cdr = inject(ChangeDetectorRef);
+    detailRowDef = contentChild(TnDetailRowDefDirective, ...(ngDevMode ? [{ debugName: "detailRowDef" }] : []));
+    // --- Sort state ---
+    sortColumn = signal('', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
+    sortDirection = signal('', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+    /**
+     * Set of currently expanded row references.
+     * Note: uses object identity. If the consumer replaces the data array
+     * (e.g. after sorting), expanded state is lost. A future key-based
+     * approach could address this.
+     */
+    expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
+    // --- Selection state ---
+    selection = new SelectionModel(true, []);
+    selectionCount = signal(0, ...(ngDevMode ? [{ debugName: "selectionCount" }] : []));
+    initialized = false;
+    // Column def map as a computed signal
+    columnDefMap = computed(() => {
+        const map = new Map();
+        for (const colDef of this.columnDefs()) {
+            const name = colDef.name();
+            if (name) {
+                map.set(name, colDef);
+            }
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "columnDefMap" }] : []));
     constructor() {
-        // Effect to process column defs whenever they change
+        // Clear selection and expansion when data reference changes
+        effect(() => {
+            this.data();
+            if (this.initialized) {
+                this.selection.clear();
+                this.selectionCount.set(0);
+                this.expandedRows.set(new Set());
+                this.selectionChange.emit([]);
+            }
+        });
+        // Clear expanded rows when expandable is toggled off
         effect(() => {
-            const columns = this.columnDefs();
-            this.processColumnDefs(columns);
+            if (!this.expandable()) {
+                this.expandedRows.set(new Set());
+            }
         });
     }
-    processColumnDefs(columns) {
-        this.columnDefMap.clear();
-        columns.forEach(columnDef => {
-            const name = columnDef.name();
-            if (name) {
-                this.columnDefMap.set(name, columnDef);
-            }
+    ngOnInit() {
+        this.initialized = true;
+        // Clean up SelectionModel on destroy
+        this.destroyRef.onDestroy(() => {
+            this.selection.clear();
         });
-        this.cdr.detectChanges();
     }
+    // --- Computed ---
     data = computed(() => {
         const source = this.dataSource();
         if (Array.isArray(source)) {
             return source;
         }
-        return source?.data || source?.connect?.() || [];
+        return source?.data ?? source?.connect?.() ?? [];
     }, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    getColumnDef(columnName) {
-        return this.columnDefMap.get(columnName);
+    effectiveDisplayedColumns = computed(() => {
+        const cols = [...this.displayedColumns()];
+        if (this.selectable()) {
+            cols.unshift('__select');
+        }
+        if (this.expandable() && this.detailRowDef()) {
+            cols.push('__expand');
+        }
+        return cols;
+    }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedColumns" }] : []));
+    isAllSelected = computed(() => {
+        const numSelected = this.selectionCount();
+        const numRows = this.data().length;
+        return numRows > 0 && numSelected === numRows;
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    isIndeterminate = computed(() => {
+        const count = this.selectionCount();
+        return count > 0 && !this.isAllSelected();
+    }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
+    trackByFn = computed(() => {
+        const custom = this.trackBy();
+        if (custom) {
+            return custom;
+        }
+        return (index) => index;
+    }, ...(ngDevMode ? [{ debugName: "trackByFn" }] : []));
+    // --- Sort methods ---
+    onSortClick(column) {
+        const colDef = this.getColumnDef(column);
+        if (!colDef?.sortable()) {
+            return;
+        }
+        if (this.sortColumn() === column) {
+            const current = this.sortDirection();
+            if (current === 'asc') {
+                this.sortDirection.set('desc');
+            }
+            else if (current === 'desc') {
+                this.sortDirection.set('');
+                this.sortColumn.set('');
+            }
+        }
+        else {
+            this.sortColumn.set(column);
+            this.sortDirection.set('asc');
+        }
+        this.sortChange.emit({
+            column: this.sortColumn() || column,
+            direction: this.sortDirection(),
+        });
     }
-    trackByIndex(index) {
-        return index;
+    getSortIcon(column) {
+        if (this.sortColumn() !== column || this.sortDirection() === '') {
+            return SORT_ICON_NONE;
+        }
+        return this.sortDirection() === 'asc' ? SORT_ICON_ASC : SORT_ICON_DESC;
+    }
+    getExpandIcon(row) {
+        return this.isRowExpanded(row) ? EXPAND_ICON_UP : EXPAND_ICON_DOWN;
+    }
+    isSorted(column) {
+        return this.sortColumn() === column && this.sortDirection() !== '';
+    }
+    // --- Expansion methods ---
+    toggleRowExpansion(row) {
+        if (!this.expandable()) {
+            return;
+        }
+        const expanded = new Set(this.expandedRows());
+        if (expanded.has(row)) {
+            expanded.delete(row);
+        }
+        else {
+            expanded.add(row);
+        }
+        this.expandedRows.set(expanded);
+    }
+    isRowExpanded(row) {
+        return this.expandedRows().has(row);
+    }
+    // --- Selection methods ---
+    toggleSelectAll() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        }
+        else {
+            this.selection.select(...this.data());
+        }
+        this.selectionCount.set(this.selection.selected.length);
+        this.selectionChange.emit(this.selection.selected);
+    }
+    toggleRowSelection(row) {
+        this.selection.toggle(row);
+        this.selectionCount.set(this.selection.selected.length);
+        this.selectionChange.emit(this.selection.selected);
+    }
+    isRowSelected(row) {
+        return this.selection.isSelected(row);
+    }
+    // --- Column helpers ---
+    getColumnDef(columnName) {
+        return this.columnDefMap().get(columnName);
     }
     getCellValue(row, column) {
         return row[column];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }], ngImport: i0, template: "<table class=\"tn-table__table\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of displayedColumns(); track $index) {\n        <th\n          class=\"tn-table__header-cell\"\n          [attr.data-column]=\"column\">\n          @if (getColumnDef(column)?.headerTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"getColumnDef(column)?.headerTemplate() || null\" />\n          }\n          @if (!getColumnDef(column)?.headerTemplate()) {\n            <span>{{ column }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track $index) {\n      <tr class=\"tn-table__row\">\n        @for (column of displayedColumns(); track $index) {\n          <td\n            class=\"tn-table__cell\"\n            [attr.data-column]=\"column\">\n            @if (getColumnDef(column)?.cellTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"getColumnDef(column)?.cellTemplate() || null\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n            }\n            @if (!getColumnDef(column)?.cellTemplate()) {\n              <span>{{ getCellValue(row, column) }}</span>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>", styles: [".tn-table{display:block;width:100%;overflow-x:auto}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange" }, host: { classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<table class=\"tn-table__table\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of effectiveDisplayedColumns(); track $index) {\n        @if (column === '__select') {\n          <th class=\"tn-table__header-cell tn-table__select-cell\"\n            role=\"checkbox\"\n            tabindex=\"0\"\n            [attr.aria-checked]=\"isAllSelected()\"\n            (click)=\"toggleSelectAll()\"\n            (keydown.enter)=\"toggleSelectAll()\"\n            (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n            <tn-checkbox\n              class=\"tn-table__checkbox\"\n              label=\"Select all rows\"\n              [hideLabel]=\"true\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\" />\n          </th>\n        } @else if (column === '__expand') {\n          <th class=\"tn-table__header-cell tn-table__expand-cell\">\n            <span class=\"cdk-visually-hidden\">Expand</span>\n          </th>\n        } @else {\n          <th\n            class=\"tn-table__header-cell\"\n            [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n            [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n            [attr.aria-sort]=\"\n              isSorted(column)\n                ? sortDirection() === 'asc' ? 'ascending' : 'descending'\n                : null\n            \"\n            [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n            [attr.data-column]=\"column\"\n            (click)=\"getColumnDef(column)?.sortable() && onSortClick(column)\"\n            (keydown.enter)=\"onSortClick(column)\"\n            (keydown.space)=\"onSortClick(column); $event.preventDefault()\">\n            <span class=\"tn-table__sort-container\">\n              <span class=\"tn-table__header-text\">\n                @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                  <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                } @else {\n                  {{ column }}\n                }\n              </span>\n              @if (getColumnDef(column)?.sortable()) {\n                <tn-icon\n                  class=\"tn-table__sort-icon\"\n                  size=\"sm\"\n                  [name]=\"getSortIcon(column)\" />\n              }\n            </span>\n          </th>\n        }\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <tr\n        class=\"tn-table__row\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__row--expandable]=\"expandable()\"\n        [class.tn-table__row--expanded]=\"isRowExpanded(row)\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <td class=\"tn-table__cell tn-table__select-cell\"\n              (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"'Select row ' + (rowIdx + 1)\"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </td>\n          } @else if (column === '__expand') {\n            <td class=\"tn-table__cell tn-table__expand-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <button\n                type=\"button\"\n                class=\"tn-table__expand-button\"\n                [attr.aria-expanded]=\"isRowExpanded(row)\"\n                [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                (click)=\"toggleRowExpansion(row)\">\n                <tn-icon\n                  class=\"tn-table__expand-icon\"\n                  [name]=\"getExpandIcon(row)\" />\n              </button>\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [attr.data-column]=\"column\">\n              @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n              } @else {\n                <span>{{ getCellValue(row, column) }}</span>\n              }\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (expandable() && detailRowDef() && isRowExpanded(row)) {\n        <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n          <td\n            class=\"tn-table__detail-cell\"\n            [attr.colspan]=\"effectiveDisplayedColumns().length\">\n            <ng-container\n              [ngTemplateOutlet]=\"detailRowDef()!.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n\n@if (data().length === 0) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [icon]=\"emptyIcon()\" />\n}\n", styles: [".tn-table{display:block;width:100%;overflow-x:auto}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-alt-bg1)}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-table__select-cell{width:48px;padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{width:48px;padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "actionText", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], animations: [
+            trigger('detailExpand', [
+                state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate(getExpandDuration())),
+            ]),
+        ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-table', standalone: true, imports: [CommonModule], host: {
-                        'class': 'tn-table'
-                    }, template: "<table class=\"tn-table__table\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of displayedColumns(); track $index) {\n        <th\n          class=\"tn-table__header-cell\"\n          [attr.data-column]=\"column\">\n          @if (getColumnDef(column)?.headerTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"getColumnDef(column)?.headerTemplate() || null\" />\n          }\n          @if (!getColumnDef(column)?.headerTemplate()) {\n            <span>{{ column }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track $index) {\n      <tr class=\"tn-table__row\">\n        @for (column of displayedColumns(); track $index) {\n          <td\n            class=\"tn-table__cell\"\n            [attr.data-column]=\"column\">\n            @if (getColumnDef(column)?.cellTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"getColumnDef(column)?.cellTemplate() || null\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n            }\n            @if (!getColumnDef(column)?.cellTemplate()) {\n              <span>{{ getCellValue(row, column) }}</span>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>", styles: [".tn-table{display:block;width:100%;overflow-x:auto}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }] } });
+            args: [{ selector: 'tn-table', standalone: true, imports: [CommonModule, TnCheckboxComponent, TnEmptyComponent, TnIconComponent], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate(getExpandDuration())),
+                        ]),
+                    ], host: {
+                        class: 'tn-table',
+                    }, template: "<table class=\"tn-table__table\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of effectiveDisplayedColumns(); track $index) {\n        @if (column === '__select') {\n          <th class=\"tn-table__header-cell tn-table__select-cell\"\n            role=\"checkbox\"\n            tabindex=\"0\"\n            [attr.aria-checked]=\"isAllSelected()\"\n            (click)=\"toggleSelectAll()\"\n            (keydown.enter)=\"toggleSelectAll()\"\n            (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n            <tn-checkbox\n              class=\"tn-table__checkbox\"\n              label=\"Select all rows\"\n              [hideLabel]=\"true\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\" />\n          </th>\n        } @else if (column === '__expand') {\n          <th class=\"tn-table__header-cell tn-table__expand-cell\">\n            <span class=\"cdk-visually-hidden\">Expand</span>\n          </th>\n        } @else {\n          <th\n            class=\"tn-table__header-cell\"\n            [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n            [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n            [attr.aria-sort]=\"\n              isSorted(column)\n                ? sortDirection() === 'asc' ? 'ascending' : 'descending'\n                : null\n            \"\n            [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n            [attr.data-column]=\"column\"\n            (click)=\"getColumnDef(column)?.sortable() && onSortClick(column)\"\n            (keydown.enter)=\"onSortClick(column)\"\n            (keydown.space)=\"onSortClick(column); $event.preventDefault()\">\n            <span class=\"tn-table__sort-container\">\n              <span class=\"tn-table__header-text\">\n                @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                  <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                } @else {\n                  {{ column }}\n                }\n              </span>\n              @if (getColumnDef(column)?.sortable()) {\n                <tn-icon\n                  class=\"tn-table__sort-icon\"\n                  size=\"sm\"\n                  [name]=\"getSortIcon(column)\" />\n              }\n            </span>\n          </th>\n        }\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <tr\n        class=\"tn-table__row\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__row--expandable]=\"expandable()\"\n        [class.tn-table__row--expanded]=\"isRowExpanded(row)\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <td class=\"tn-table__cell tn-table__select-cell\"\n              (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"'Select row ' + (rowIdx + 1)\"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </td>\n          } @else if (column === '__expand') {\n            <td class=\"tn-table__cell tn-table__expand-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <button\n                type=\"button\"\n                class=\"tn-table__expand-button\"\n                [attr.aria-expanded]=\"isRowExpanded(row)\"\n                [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                (click)=\"toggleRowExpansion(row)\">\n                <tn-icon\n                  class=\"tn-table__expand-icon\"\n                  [name]=\"getExpandIcon(row)\" />\n              </button>\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [attr.data-column]=\"column\">\n              @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n              } @else {\n                <span>{{ getCellValue(row, column) }}</span>\n              }\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (expandable() && detailRowDef() && isRowExpanded(row)) {\n        <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n          <td\n            class=\"tn-table__detail-cell\"\n            [attr.colspan]=\"effectiveDisplayedColumns().length\">\n            <ng-container\n              [ngTemplateOutlet]=\"detailRowDef()!.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n\n@if (data().length === 0) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [icon]=\"emptyIcon()\" />\n}\n", styles: [".tn-table{display:block;width:100%;overflow-x:auto}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-alt-bg1)}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn-table__select-cell{width:48px;padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{width:48px;padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }] } });
+
+/**
+ * Harness for interacting with `tn-table` in tests.
+ * Provides methods for querying rows/cells, sorting, selecting, and expanding.
+ *
+ * @example
+ * ```typescript
+ * const table = await loader.getHarness(TnTableHarness);
+ * expect(await table.getRowCount()).toBe(5);
+ *
+ * await table.clickSortHeader('name');
+ * expect(await table.getSortDirection('name')).toBe('ascending');
+ *
+ * await table.toggleRowExpansion(0);
+ * expect(await table.isRowExpanded(0)).toBe(true);
+ * ```
+ */
+class TnTableHarness extends ComponentHarness {
+    static hostSelector = 'tn-table';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a table
+     * 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(TnTableHarness, options);
+    }
+    // --- Row and cell queries ---
+    /**
+     * Gets the number of data rows (excludes header and detail rows).
+     *
+     * @returns Promise resolving to the row count.
+     */
+    async getRowCount() {
+        const rows = await this.locatorForAll('.tn-table__row')();
+        return rows.length;
+    }
+    /**
+     * Gets the text content of header cells (excludes sort icons).
+     *
+     * @returns Promise resolving to an array of header text strings.
+     */
+    async getHeaderTexts() {
+        const textEls = await this.locatorForAll('.tn-table__header-text')();
+        const texts = [];
+        for (const el of textEls) {
+            texts.push((await el.text()).trim());
+        }
+        return texts;
+    }
+    /**
+     * Gets the text of all data-column cells in a specific row.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to an array of cell text strings.
+     */
+    async getRowTexts(rowIndex) {
+        await this.assertRowExists(rowIndex);
+        const cells = await this.locatorForAll(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__cell[data-column]`)();
+        const texts = [];
+        for (const cell of cells) {
+            texts.push((await cell.text()).trim());
+        }
+        return texts;
+    }
+    /**
+     * Gets the text of a specific cell by row and column.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to the cell text.
+     */
+    async getCellText(rowIndex, columnName) {
+        await this.assertRowExists(rowIndex);
+        const cell = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"] [data-column="${columnName}"]`)();
+        return (await cell.text()).trim();
+    }
+    /**
+     * Gets all row texts as a 2D string array (data-column cells only).
+     *
+     * @returns Promise resolving to an array of row text arrays.
+     */
+    async getAllRowTexts() {
+        const count = await this.getRowCount();
+        const result = [];
+        for (let i = 0; i < count; i++) {
+            result.push(await this.getRowTexts(i));
+        }
+        return result;
+    }
+    // --- Sorting ---
+    /**
+     * Clicks a sortable column header to cycle sort direction.
+     *
+     * @param columnName The column's data-column attribute value.
+     */
+    async clickSortHeader(columnName) {
+        const header = await this.locatorFor(`th[data-column="${columnName}"]`)();
+        await header.click();
+    }
+    /**
+     * Checks whether a column header has the sortable class.
+     *
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to true if the column is sortable.
+     */
+    async isSortable(columnName) {
+        const header = await this.locatorFor(`th[data-column="${columnName}"]`)();
+        return header.hasClass('tn-table__header-cell--sortable');
+    }
+    /**
+     * Gets the current sort direction for a column via aria-sort.
+     *
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to 'ascending', 'descending', or null.
+     */
+    async getSortDirection(columnName) {
+        const header = await this.locatorFor(`th[data-column="${columnName}"]`)();
+        return header.getAttribute('aria-sort');
+    }
+    // --- Selection ---
+    /**
+     * Clicks the select-all checkbox in the header.
+     */
+    async toggleSelectAll() {
+        const cell = await this.locatorFor('.tn-table__header-row .tn-table__select-cell')();
+        await cell.click();
+    }
+    /**
+     * Toggles selection for a specific row by clicking its checkbox cell.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     */
+    async toggleRowSelection(rowIndex) {
+        await this.assertRowExists(rowIndex);
+        const cell = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__select-cell`)();
+        await cell.click();
+    }
+    /**
+     * Checks if a specific row's checkbox is checked.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to true if the row's checkbox is checked.
+     */
+    async isRowSelected(rowIndex) {
+        await this.assertRowExists(rowIndex);
+        const checkbox = await this.locatorFor(TnCheckboxHarness.with({
+            ancestor: `.tn-table__row[data-row-index="${rowIndex}"]`,
+        }))();
+        return checkbox.isChecked();
+    }
+    /**
+     * Gets the count of currently selected rows.
+     *
+     * @returns Promise resolving to the number of checked row checkboxes.
+     */
+    async getSelectedRowCount() {
+        const checkboxes = await this.locatorForAll(TnCheckboxHarness.with({ ancestor: '.tn-table__row' }))();
+        let count = 0;
+        for (const cb of checkboxes) {
+            if (await cb.isChecked()) {
+                count++;
+            }
+        }
+        return count;
+    }
+    // --- Expansion ---
+    /**
+     * Clicks the expand button for a specific row.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     */
+    async toggleRowExpansion(rowIndex) {
+        await this.assertRowExists(rowIndex);
+        const button = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__expand-button`)();
+        await button.click();
+    }
+    /**
+     * Checks if a data row is currently expanded.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to true if the row has the expanded class.
+     */
+    async isRowExpanded(rowIndex) {
+        await this.assertRowExists(rowIndex);
+        const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
+        return row.hasClass('tn-table__row--expanded');
+    }
+    /**
+     * Gets the text content of an expanded detail row.
+     *
+     * @param detailIndex Zero-based index among currently visible detail rows.
+     * @returns Promise resolving to the detail row text.
+     */
+    async getDetailRowContent(detailIndex) {
+        const detailRows = await this.locatorForAll('.tn-table__detail-row')();
+        if (detailIndex >= detailRows.length) {
+            throw new Error(`Detail row index ${detailIndex} out of bounds (${detailRows.length} detail rows)`);
+        }
+        return (await detailRows[detailIndex].text()).trim();
+    }
+    /**
+     * Gets the count of currently expanded detail rows.
+     *
+     * @returns Promise resolving to the number of visible detail rows.
+     */
+    async getExpandedRowCount() {
+        const detailRows = await this.locatorForAll('.tn-table__detail-row')();
+        return detailRows.length;
+    }
+    // --- Internal helpers ---
+    async assertRowExists(rowIndex) {
+        const count = await this.getRowCount();
+        if (rowIndex >= count) {
+            throw new Error(`Row index ${rowIndex} out of bounds (${count} rows)`);
+        }
+    }
+}
 
 /**
  * Tree flattener to convert normal type of node to node with children & level information.
@@ -10966,7 +11408,7 @@ class TnFilePickerPopupComponent {
         return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()} ${timePart}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, allowDatasetCreate: { classPropertyName: "allowDatasetCreate", publicName: "allowDatasetCreate", isSignal: true, isRequired: false, transformFunction: null }, allowZvolCreate: { classPropertyName: "allowZvolCreate", publicName: "allowZvolCreate", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, creationLoading: { classPropertyName: "creationLoading", publicName: "creationLoading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createFolder: "createFolder", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel", submitFolderName: "submitFolderName", cancelFolderCreation: "cancelFolderCreation" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath; track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        [class.current]=\"last\"\n        [class.parent-nav]=\"segment.name === '..'\"\n        [disabled]=\"last\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n\n  <div class=\"tn-file-picker-actions\">\n    @if (allowCreate()) {\n      <tn-button\n        variant=\"outline\"\n        label=\"New Folder\"\n        [disabled]=\"isCreateDisabled()\"\n        (onClick)=\"onCreateFolder()\" />\n    }\n  </div>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\">\n\n    <!-- Selection column -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        <input \n          type=\"checkbox\" \n          [checked]=\"isSelected(item)\"\n          [disabled]=\"!!item.disabled\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onItemClick(item)\">\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- NORMAL MODE: Display name -->\n        @if (!item.isCreating) {\n          <div\n               class=\"file-name-cell\"\n               [class.disabled]=\"!!item.disabled\"\n               [class.zfs-object]=\"isZfsObject(item)\"\n               [attr.tabindex]=\"item.disabled ? null : 0\"\n               [attr.role]=\"'button'\"\n               (click)=\"onItemClick(item)\"\n               (dblclick)=\"onItemDoubleClick(item)\"\n               (keydown.enter)=\"onItemDoubleClick(item)\"\n               (keydown.space)=\"onItemClick(item)\">\n            <tn-icon\n              [name]=\"getItemIcon(item)\"\n              [library]=\"getItemIconLibrary(item)\"\n              [class]=\"'file-icon file-icon-' + item.type\" />\n            <span class=\"file-name\">{{ item.name }}</span>\n\n            <!-- ZFS badge -->\n            @if (isZfsObject(item)) {\n              <span\n                [class]=\"'zfs-badge zfs-badge-' + item.type\">\n                {{ getZfsBadge(item) }}\n              </span>\n            }\n\n            <!-- Permission indicator -->\n            @if (item.permissions === 'none') {\n              <tn-icon\n                name=\"lock\"\n                library=\"mdi\"\n                class=\"permission-icon\" />\n            }\n          </div>\n        }\n\n        <!-- EDIT MODE: Inline name input with error display -->\n        @if (item.isCreating) {\n          <div class=\"file-name-cell-wrapper\">\n            <div class=\"file-name-cell editing\" [class.has-error]=\"!!item.creationError\">\n              <tn-icon\n                name=\"folder\"\n                library=\"mdi\"\n                class=\"file-icon file-icon-folder\" />\n              <input\n                #folderNameInput\n                type=\"text\"\n                role=\"textbox\"\n                aria-label=\"Folder name\"\n                class=\"folder-name-input\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                [class.error]=\"!!item.creationError\"\n                [value]=\"item.name\"\n                [disabled]=\"creationLoading()\"\n                [attr.data-autofocus]=\"true\"\n                (keydown)=\"onFolderNameKeyDown($event, item)\"\n                (blur)=\"onFolderNameInputBlur($event, item)\">\n\n              <!-- Loading indicator during submission -->\n              @if (creationLoading()) {\n                <tn-icon\n                  name=\"loading\"\n                  library=\"mdi\"\n                  class=\"creation-loading-icon\" />\n              }\n            </div>\n\n            <!-- Inline error message -->\n            @if (item.creationError) {\n              <div class=\"folder-creation-error\">\n                <tn-icon name=\"alert-circle\" library=\"mdi\" class=\"error-icon\" />\n                <span class=\"error-text\">{{ item.creationError }}</span>\n              </div>\n            }\n          </div>\n        }\n\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    @if (selectedItems().length > 0) {\n      <span class=\"selection-count\">\n        {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n      </span>\n    }\n    @if (selectedItems().length === 0) {\n      <span class=\"selection-count\">\n        No items selected\n      </span>\n    }\n    <div class=\"footer-actions\">\n      <tn-button\n        label=\"Select\"\n        [disabled]=\"selectedItems().length === 0\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);min-width:400px;max-width:600px;min-height:500px;max-height:600px;font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 8px;border-radius:4px;font-size:.875rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:8px;color:var(--tn-alt-fg1)}.tn-file-picker-actions{display:flex;align-items:center;gap:8px}.tn-file-picker-actions tn-button{font-size:.875rem}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;color:var(--tn-fg1);padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-checkbox{display:flex;align-items:center}.file-checkbox input[type=checkbox]{margin:0;width:16px;height:16px}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-name-cell.editing{display:flex;align-items:center;gap:8px;padding:2px;cursor:default}.file-name-cell.editing .folder-name-input{flex:1;border:2px solid var(--tn-primary, #0066cc);padding:4px 8px;font-size:inherit;font-family:inherit;background:var(--tn-bg1, white);color:var(--tn-fg1, black);outline:none;border-radius:3px;min-width:200px}.file-name-cell.editing .folder-name-input:focus{border-color:var(--tn-primary, #0066cc);box-shadow:0 0 0 3px #0066cc1a}.file-name-cell.editing .folder-name-input.error{border-color:var(--tn-error, #d32f2f)}.file-name-cell.editing .folder-name-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2, #f5f5f5)}.file-name-cell.editing .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary, #0066cc);flex-shrink:0}.file-name-cell-wrapper{display:flex;flex-direction:column;gap:4px}.folder-creation-error{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 36px;margin-bottom:12px;background:#d32f2f1a;border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:.875rem;color:var(--tn-error, #d32f2f)}.folder-creation-error .error-icon{flex-shrink:0;width:20px;height:20px}.folder-creation-error .error-text{flex:1}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.file-type{font-size:.875rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:.875rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.selection-count{font-size:.875rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:.875rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled"], outputs: ["onClick"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, allowDatasetCreate: { classPropertyName: "allowDatasetCreate", publicName: "allowDatasetCreate", isSignal: true, isRequired: false, transformFunction: null }, allowZvolCreate: { classPropertyName: "allowZvolCreate", publicName: "allowZvolCreate", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, creationLoading: { classPropertyName: "creationLoading", publicName: "creationLoading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createFolder: "createFolder", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel", submitFolderName: "submitFolderName", cancelFolderCreation: "cancelFolderCreation" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath; track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        [class.current]=\"last\"\n        [class.parent-nav]=\"segment.name === '..'\"\n        [disabled]=\"last\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n\n  <div class=\"tn-file-picker-actions\">\n    @if (allowCreate()) {\n      <tn-button\n        variant=\"outline\"\n        label=\"New Folder\"\n        [disabled]=\"isCreateDisabled()\"\n        (onClick)=\"onCreateFolder()\" />\n    }\n  </div>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\">\n\n    <!-- Selection column -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        <input \n          type=\"checkbox\" \n          [checked]=\"isSelected(item)\"\n          [disabled]=\"!!item.disabled\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onItemClick(item)\">\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- NORMAL MODE: Display name -->\n        @if (!item.isCreating) {\n          <div\n               class=\"file-name-cell\"\n               [class.disabled]=\"!!item.disabled\"\n               [class.zfs-object]=\"isZfsObject(item)\"\n               [attr.tabindex]=\"item.disabled ? null : 0\"\n               [attr.role]=\"'button'\"\n               (click)=\"onItemClick(item)\"\n               (dblclick)=\"onItemDoubleClick(item)\"\n               (keydown.enter)=\"onItemDoubleClick(item)\"\n               (keydown.space)=\"onItemClick(item)\">\n            <tn-icon\n              [name]=\"getItemIcon(item)\"\n              [library]=\"getItemIconLibrary(item)\"\n              [class]=\"'file-icon file-icon-' + item.type\" />\n            <span class=\"file-name\">{{ item.name }}</span>\n\n            <!-- ZFS badge -->\n            @if (isZfsObject(item)) {\n              <span\n                [class]=\"'zfs-badge zfs-badge-' + item.type\">\n                {{ getZfsBadge(item) }}\n              </span>\n            }\n\n            <!-- Permission indicator -->\n            @if (item.permissions === 'none') {\n              <tn-icon\n                name=\"lock\"\n                library=\"mdi\"\n                class=\"permission-icon\" />\n            }\n          </div>\n        }\n\n        <!-- EDIT MODE: Inline name input with error display -->\n        @if (item.isCreating) {\n          <div class=\"file-name-cell-wrapper\">\n            <div class=\"file-name-cell editing\" [class.has-error]=\"!!item.creationError\">\n              <tn-icon\n                name=\"folder\"\n                library=\"mdi\"\n                class=\"file-icon file-icon-folder\" />\n              <input\n                #folderNameInput\n                type=\"text\"\n                role=\"textbox\"\n                aria-label=\"Folder name\"\n                class=\"folder-name-input\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                [class.error]=\"!!item.creationError\"\n                [value]=\"item.name\"\n                [disabled]=\"creationLoading()\"\n                [attr.data-autofocus]=\"true\"\n                (keydown)=\"onFolderNameKeyDown($event, item)\"\n                (blur)=\"onFolderNameInputBlur($event, item)\">\n\n              <!-- Loading indicator during submission -->\n              @if (creationLoading()) {\n                <tn-icon\n                  name=\"loading\"\n                  library=\"mdi\"\n                  class=\"creation-loading-icon\" />\n              }\n            </div>\n\n            <!-- Inline error message -->\n            @if (item.creationError) {\n              <div class=\"folder-creation-error\">\n                <tn-icon name=\"alert-circle\" library=\"mdi\" class=\"error-icon\" />\n                <span class=\"error-text\">{{ item.creationError }}</span>\n              </div>\n            }\n          </div>\n        }\n\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    @if (selectedItems().length > 0) {\n      <span class=\"selection-count\">\n        {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n      </span>\n    }\n    @if (selectedItems().length === 0) {\n      <span class=\"selection-count\">\n        No items selected\n      </span>\n    }\n    <div class=\"footer-actions\">\n      <tn-button\n        label=\"Select\"\n        [disabled]=\"selectedItems().length === 0\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);min-width:400px;max-width:600px;min-height:500px;max-height:600px;font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 8px;border-radius:4px;font-size:.875rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:8px;color:var(--tn-alt-fg1)}.tn-file-picker-actions{display:flex;align-items:center;gap:8px}.tn-file-picker-actions tn-button{font-size:.875rem}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;color:var(--tn-fg1);padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-checkbox{display:flex;align-items:center}.file-checkbox input[type=checkbox]{margin:0;width:16px;height:16px}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-name-cell.editing{display:flex;align-items:center;gap:8px;padding:2px;cursor:default}.file-name-cell.editing .folder-name-input{flex:1;border:2px solid var(--tn-primary, #0066cc);padding:4px 8px;font-size:inherit;font-family:inherit;background:var(--tn-bg1, white);color:var(--tn-fg1, black);outline:none;border-radius:3px;min-width:200px}.file-name-cell.editing .folder-name-input:focus{border-color:var(--tn-primary, #0066cc);box-shadow:0 0 0 3px #0066cc1a}.file-name-cell.editing .folder-name-input.error{border-color:var(--tn-error, #d32f2f)}.file-name-cell.editing .folder-name-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2, #f5f5f5)}.file-name-cell.editing .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary, #0066cc);flex-shrink:0}.file-name-cell-wrapper{display:flex;flex-direction:column;gap:4px}.folder-creation-error{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 36px;margin-bottom:12px;background:#d32f2f1a;border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:.875rem;color:var(--tn-error, #d32f2f)}.folder-creation-error .error-icon{flex-shrink:0;width:20px;height:20px}.folder-creation-error .error-text{flex:1}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.file-type{font-size:.875rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:.875rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.selection-count{font-size:.875rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:.875rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled"], outputs: ["onClick"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyIcon", "selectable", "expandable"], outputs: ["sortChange", "selectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, decorators: [{
             type: Component,
@@ -11462,30 +11904,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<div class=\"tn-file-picker-container\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath() | tnStripMntPrefix\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onPathInput($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [allowCreate]=\"allowCreate()\"\n      [allowDatasetCreate]=\"allowDatasetCreate()\"\n      [allowZvolCreate]=\"allowZvolCreate()\"\n      [currentPath]=\"currentPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [creationLoading]=\"creationLoading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createFolder)=\"onCreateFolder()\"\n      (submitFolderName)=\"onSubmitFolderName($event.name, $event.tempId)\"\n      (cancelFolderCreation)=\"onCancelFolderCreation($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>", styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, #dc3545)}.tn-file-picker-input.error:focus{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, #dc3545)}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:.875rem}}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], allowDatasetCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDatasetCreate", required: false }] }], allowZvolCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowZvolCreate", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPath", required: false }] }], rootPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootPath", required: false }] }], fileExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileExtensions", required: false }] }], callbacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "callbacks", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pathChange: [{ type: i0.Output, args: ["pathChange"] }], createFolder: [{ type: i0.Output, args: ["createFolder"] }], error: [{ type: i0.Output, args: ["error"] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], filePickerTemplate: [{ type: i0.ViewChild, args: ['filePickerTemplate', { isSignal: true }] }] } });
 
-class TnEmptyComponent {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
-    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-    iconLibrary = input('mdi', ...(ngDevMode ? [{ debugName: "iconLibrary" }] : []));
-    actionText = input(...(ngDevMode ? [undefined, { debugName: "actionText" }] : []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    onAction = output();
-    hasAction = computed(() => !!this.actionText(), ...(ngDevMode ? [{ debugName: "hasAction" }] : []));
-    iconSize = computed(() => {
-        return this.size() === 'compact' ? 'lg' : 'xl';
-    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnEmptyComponent, isStandalone: true, selector: "tn-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLibrary: { classPropertyName: "iconLibrary", publicName: "iconLibrary", isSignal: true, isRequired: false, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, host: { attributes: { "role": "status" }, properties: { "class.tn-empty--compact": "size() === \"compact\"" }, classAttribute: "tn-empty" }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled"], outputs: ["onClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnEmptyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tn-empty', standalone: true, imports: [TnIconComponent, TnButtonComponent], host: {
-                        'class': 'tn-empty',
-                        '[class.tn-empty--compact]': 'size() === "compact"',
-                        'role': 'status',
-                    }, template: "@if (icon()) {\n  <div class=\"tn-empty__icon\">\n    <tn-icon\n      aria-hidden=\"true\"\n      [name]=\"icon()!\"\n      [library]=\"iconLibrary()\"\n      [size]=\"iconSize()\"\n    />\n  </div>\n}\n\n<div class=\"tn-empty__title\">\n  {{ title() }}\n</div>\n\n@if (description()) {\n  <div class=\"tn-empty__description\">\n    {{ description() }}\n  </div>\n}\n\n@if (hasAction()) {\n  <div class=\"tn-empty__action\">\n    <tn-button\n      color=\"primary\"\n      variant=\"outline\"\n      [label]=\"actionText()!\"\n      (onClick)=\"onAction.emit()\"\n    />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px}:host(.tn-empty--compact){padding:24px 16px}:host(.tn-empty--compact) .tn-empty__title{font-size:1rem}:host(.tn-empty--compact) .tn-empty__description{font-size:.8125rem}:host(.tn-empty--compact) .tn-empty__icon{margin-bottom:4px}:host(.tn-empty--compact) .tn-empty__action{margin-top:4px}.tn-empty__icon{color:var(--tn-fg2, #6b7280);margin-bottom:8px}.tn-empty__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #e5e7eb);line-height:1.4}.tn-empty__description{font-size:.875rem;color:var(--tn-fg2, #6b7280);line-height:1.5;max-width:420px}.tn-empty__action{margin-top:8px}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLibrary", required: false }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
-
 /**
  * Harness for interacting with tn-empty in tests.
  * Provides text-based querying for verifying empty state content.
@@ -12444,5 +12862,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, 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, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, 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, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map