@truenas/ui-components 0.4.8 → 0.4.10

package/fesm2022/truenas-ui-components.mjs

@@ -5522,6 +5522,11 @@ class TnMenuTriggerDirective {
     tnMenuPosition = input('below', ...(ngDevMode ? [{ debugName: "tnMenuPosition" }] : []));
     overlayRef;
     isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : []));
+    /**
+     * Whether the menu is currently open. Exposed (with `exportAs: 'tnMenuTrigger'`) so a template
+     * can reflect the state — e.g. keeping a row's action button visible while its menu is open.
+     */
+    isOpen = this.isMenuOpen.asReadonly();
     itemClickSub;
     /**
      * RxJS subscriptions for the current overlay's `backdropClick()` and
@@ -5686,7 +5691,7 @@ class TnMenuTriggerDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TnMenuTriggerDirective, isStandalone: true, selector: "[tnMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "tnMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, tnMenuPosition: { classPropertyName: "tnMenuPosition", publicName: "tnMenuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.arrowDown": "onArrowDown($event)" } }, exportAs: ["tnMenuTrigger"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TnMenuTriggerDirective, isStandalone: true, selector: "[tnMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "tnMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, tnMenuPosition: { classPropertyName: "tnMenuPosition", publicName: "tnMenuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick()", "keydown.arrowDown": "onArrowDown($event)" }, properties: { "attr.aria-expanded": "isOpen()" } }, exportAs: ["tnMenuTrigger"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMenuTriggerDirective, decorators: [{
             type: Directive,
@@ -5697,6 +5702,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     host: {
                         '(click)': 'onClick()',
                         '(keydown.arrowDown)': 'onArrowDown($event)',
+                        // A trigger has to announce that it opens a menu, and whether that menu is currently open —
+                        // without these a screen reader reads it as a plain button and never reports the open state.
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'isOpen()',
                     },
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnMenuTriggerFor", required: true }] }], tnMenuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnMenuPosition", required: false }] }] } });
@@ -9575,21 +9584,20 @@ class TnSelectComponent {
             return;
         }
         this.isOpen.set(true);
-        // Seed keyboard focus at the current selection when there is one;
-        // otherwise leave it unset so the next ArrowDown lands on the first item.
+        // Seed keyboard focus at the current selection when there is one, else at
+        // the first navigable row. Something is ALWAYS highlighted while the panel
+        // is open (matching mat-select): a freshly-opened select must be operable
+        // with Enter/Space straight away, without an ArrowDown first.
         const selected = this.selectedValue();
-        if (selected !== null && selected !== undefined) {
-            const idx = this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
-            this.focusedIndex.set(idx);
-        }
-        else if (this.emptyOption()) {
-            // A cleared value means the empty option (always first) is the current
-            // selection — seed keyboard focus there.
-            this.focusedIndex.set(0);
-        }
-        else {
-            this.focusedIndex.set(-1);
-        }
+        const idx = selected === null || selected === undefined
+            ? -1
+            : this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
+        // findIndex can also miss (e.g. the selected option is disabled, so it
+        // isn't navigable) — fall back to the first row there too. `-1` would
+        // leave the panel with nothing highlighted, which is the state we're
+        // avoiding. When `allowEmpty` is set the first row IS the empty option,
+        // so a cleared value lands on it for free.
+        this.focusedIndex.set(idx >= 0 ? idx : 0);
         this.attachOverlay();
     }
     /**
@@ -9922,10 +9930,9 @@ class TnSelectComponent {
             case 'ArrowDown':
                 event.preventDefault();
                 if (!this.isOpen()) {
+                    // openDropdown() already seeds the highlight (selection, else first),
+                    // so opening must not also advance a row.
                     this.openDropdown();
-                    if (this.focusedIndex() < 0) {
-                        this.moveFocus('first');
-                    }
                 }
                 else {
                     this.moveFocus(1);
@@ -11198,6 +11205,12 @@ class TnTableComponent {
     displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
     trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
     emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /**
+     * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
+     * explanation (e.g. "No search results" plus what to try instead). Omitted when empty, so tables
+     * with a single-line empty state are unaffected.
+     */
+    emptyDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : []));
     emptyIcon = input('', ...(ngDevMode ? [{ debugName: "emptyIcon" }] : []));
     // --- Feature inputs (all opt-in) ---
     selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
@@ -11264,6 +11277,56 @@ class TnTableComponent {
      * details" patterns. Independent of `selectable` (checkbox) and `expandable`.
      */
     clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    /**
+     * When true, activating a row (click or Enter/Space) toggles its expansion, in addition to the
+     * chevron. Requires `clickable` — that is what makes rows activatable at all — and `expandable`;
+     * rows the `isRowExpandable` predicate rejects are unaffected, since `toggleRowExpansion` gates
+     * on it. `rowClick` still emits, so a consumer can both expand and react to the click.
+     */
+    expandOnRowClick = input(false, ...(ngDevMode ? [{ debugName: "expandOnRowClick" }] : []));
+    /**
+     * When true, expanding a row collapses whichever row was expanded before, so at most one detail
+     * row is open at a time. Default (false) allows any number.
+     */
+    singleExpand = input(false, ...(ngDevMode ? [{ debugName: "singleExpand" }] : []));
+    /**
+     * Lays the table out `fixed` at full width, so every column without an explicit `[width]` gets
+     * an equal share and none can grow to dominate the row.
+     *
+     * Cells wrap regardless of this (that is the table's default), so reach for it only when equal
+     * columns are actually wanted: it gives up the `auto` layout's content-proportional sizing,
+     * which a table with one long text column among short ones usually wants to keep.
+     */
+    fixedLayout = input(false, ...(ngDevMode ? [{ debugName: "fixedLayout" }] : []));
+    /**
+     * Smallest width a column is allowed to shrink to before the host scrolls horizontally instead.
+     * Any CSS length.
+     *
+     * `fixedLayout` makes the table fit its container exactly — so without a floor a narrow viewport
+     * just keeps shrinking the columns, wrapping every cell to a couple of characters per line:
+     * technically visible, unreadable, and never scrollable. The floor is derived as this times the
+     * column count, so it scales with the table rather than needing a hand-picked number per page.
+     *
+     * Only applies with `fixedLayout`. Without it the table lays out `auto`, sizing to its content
+     * and overflowing the host — which scrolls on its own.
+     */
+    minColumnWidth = input('120px', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : []));
+    /**
+     * Explicit width floor, overriding the {@link minColumnWidth} derivation. Any CSS length. Reach
+     * for this only when a specific table needs a floor its column count doesn't imply.
+     */
+    minWidth = input('', ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
+    /** The floor actually applied to the table — explicit if given, else derived. */
+    resolvedMinWidth = computed(() => {
+        const explicit = this.minWidth();
+        if (explicit) {
+            return explicit;
+        }
+        if (!this.fixedLayout()) {
+            return null;
+        }
+        return `calc(${this.minColumnWidth()} * ${this.effectiveDisplayedColumns().length})`;
+    }, ...(ngDevMode ? [{ debugName: "resolvedMinWidth" }] : []));
     // --- Outputs ---
     sortChange = output();
     selectionChange = output();
@@ -11280,8 +11343,13 @@ class TnTableComponent {
     columnDefs = contentChildren(TnTableColumnDirective, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
     detailRowDef = contentChild(TnDetailRowDefDirective, ...(ngDevMode ? [{ debugName: "detailRowDef" }] : []));
     // --- Sort state ---
-    sortColumn = signal('', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
-    sortDirection = signal('', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+    /**
+     * Sorted column and direction. Two-way bindable (`[(sortColumn)]`), so a consumer that owns the
+     * sort — a data provider, a table destroyed and rebuilt when its list empties out — can restore
+     * the header's arrow instead of reaching in and setting the signal from an effect.
+     */
+    sortColumn = model('', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
+    sortDirection = model('', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
     /**
      * Set of currently expanded row references.
      * Note: uses object identity. If the consumer replaces the data array
@@ -11443,6 +11511,9 @@ class TnTableComponent {
             expanded.delete(row);
         }
         else {
+            if (this.singleExpand()) {
+                expanded.clear();
+            }
             expanded.add(row);
         }
         this.expandedRows.set(expanded);
@@ -11450,6 +11521,16 @@ class TnTableComponent {
     isRowExpanded(row) {
         return this.expandedRows().has(row);
     }
+    /**
+     * Whether the row element itself acts as the expand/collapse control, which is what makes an
+     * `aria-expanded` on it meaningful: a screen-reader user who focuses the row and presses Enter
+     * otherwise gets no announcement that anything expanded, since only the chevron carries the
+     * state. Also requires `clickable` — without it the row isn't activatable and
+     * {@link onRowClick} returns before toggling anything.
+     */
+    isRowExpandTrigger(row) {
+        return this.expandOnRowClick() && this.clickable() && this.canExpandRow(row);
+    }
     // --- Active row ---
     isRowActive(row) {
         if (this.activeWhen()?.(row)) {
@@ -11463,6 +11544,9 @@ class TnTableComponent {
         if (!this.clickable()) {
             return;
         }
+        if (this.expandOnRowClick()) {
+            this.toggleRowExpansion(row);
+        }
         this.rowClick.emit(row);
     }
     onRowDoubleClick(row) {
@@ -11477,6 +11561,9 @@ class TnTableComponent {
         }
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
+            if (this.expandOnRowClick()) {
+                this.toggleRowExpansion(row);
+            }
             this.rowClick.emit(row);
         }
     }
@@ -11507,7 +11594,7 @@ class TnTableComponent {
         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 }, 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 }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: true, isRequired: false, transformFunction: null }, activeWhen: { classPropertyName: "activeWhen", publicName: "activeWhen", isSignal: true, isRequired: false, transformFunction: null }, activeBg: { classPropertyName: "activeBg", publicName: "activeBg", isSignal: true, isRequired: false, transformFunction: null }, activeIndicator: { classPropertyName: "activeIndicator", publicName: "activeIndicator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick" }, host: { properties: { "class.tn-table--bordered": "bordered()", "class.tn-table--loading": "loading()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], 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            [style.width]=\"getColumnDef(column)?.width()\"\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]=\"\n                    isSorted(column)\n                      ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                      : 'mat-unfold_more'\n                  \" />\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]=\"canExpandRow(row)\"\n        [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n        [class.tn-table__row--active]=\"isRowActive(row)\"\n        [class.tn-table__row--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n        (click)=\"onRowClick(row)\"\n        (dblclick)=\"onRowDoubleClick(row)\"\n        (keydown)=\"onRowKeydown($event, 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              @if (canExpandRow(row)) {\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]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                </button>\n              }\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              <div class=\"tn-table__cell-content\">\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              </div>\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (detailRowDef() && canExpandRow(row) && 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 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.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:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.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__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.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__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;z-index:1;border-radius:4px}.tn-table--loading .tn-table__table{pointer-events:none;-webkit-user-select:none;user-select:none}.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", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }], animations: [
+    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 }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", 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 }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: true, isRequired: false, transformFunction: null }, activeWhen: { classPropertyName: "activeWhen", publicName: "activeWhen", isSignal: true, isRequired: false, transformFunction: null }, activeBg: { classPropertyName: "activeBg", publicName: "activeBg", isSignal: true, isRequired: false, transformFunction: null }, activeIndicator: { classPropertyName: "activeIndicator", publicName: "activeIndicator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandOnRowClick: { classPropertyName: "expandOnRowClick", publicName: "expandOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()", "class.tn-table--fixed-layout": "fixedLayout()", "class.tn-table--loading": "loading()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<table class=\"tn-table__table\" [style.min-width]=\"resolvedMinWidth()\">\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            [style.width]=\"getColumnDef(column)?.width()\"\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]=\"\n                    isSorted(column)\n                      ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                      : 'mat-unfold_more'\n                  \" />\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]=\"canExpandRow(row)\"\n        [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n        [class.tn-table__row--active]=\"isRowActive(row)\"\n        [class.tn-table__row--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n        [attr.aria-expanded]=\"isRowExpandTrigger(row) ? isRowExpanded(row) : null\"\n        (click)=\"onRowClick(row)\"\n        (dblclick)=\"onRowDoubleClick(row)\"\n        (keydown)=\"onRowKeydown($event, 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              @if (canExpandRow(row)) {\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]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                </button>\n              }\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              <div class=\"tn-table__cell-content\">\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              </div>\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (detailRowDef() && canExpandRow(row) && 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 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [description]=\"emptyDescription()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative;width:100%;overflow-x:auto}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.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:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.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__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.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__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;z-index:1;border-radius:4px}.tn-table--loading .tn-table__table{pointer-events:none;-webkit-user-select:none;user-select:none}.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", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
                 state('expanded', style({ height: '*' })),
@@ -11526,11 +11613,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], host: {
                         class: 'tn-table',
                         '[class.tn-table--bordered]': 'bordered()',
+                        '[class.tn-table--fixed-layout]': 'fixedLayout()',
                         '[class.tn-table--loading]': 'loading()',
                         '[style.--tn-table-active-bg]': 'activeBg()',
                         '[style.--tn-table-active-indicator]': 'activeIndicator()',
-                    }, 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            [style.width]=\"getColumnDef(column)?.width()\"\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]=\"\n                    isSorted(column)\n                      ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                      : 'mat-unfold_more'\n                  \" />\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]=\"canExpandRow(row)\"\n        [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n        [class.tn-table__row--active]=\"isRowActive(row)\"\n        [class.tn-table__row--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n        (click)=\"onRowClick(row)\"\n        (dblclick)=\"onRowDoubleClick(row)\"\n        (keydown)=\"onRowKeydown($event, 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              @if (canExpandRow(row)) {\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]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                </button>\n              }\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              <div class=\"tn-table__cell-content\">\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              </div>\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (detailRowDef() && canExpandRow(row) && 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 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.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:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.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__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.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__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;z-index:1;border-radius:4px}.tn-table--loading .tn-table__table{pointer-events:none;-webkit-user-select:none;user-select:none}.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 }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], activeRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRow", required: false }] }], activeWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeWhen", required: false }] }], activeBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBg", required: false }] }], activeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndicator", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }] } });
+                    }, template: "<table class=\"tn-table__table\" [style.min-width]=\"resolvedMinWidth()\">\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            [style.width]=\"getColumnDef(column)?.width()\"\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]=\"\n                    isSorted(column)\n                      ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                      : 'mat-unfold_more'\n                  \" />\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]=\"canExpandRow(row)\"\n        [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n        [class.tn-table__row--active]=\"isRowActive(row)\"\n        [class.tn-table__row--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n        [attr.aria-expanded]=\"isRowExpandTrigger(row) ? isRowExpanded(row) : null\"\n        (click)=\"onRowClick(row)\"\n        (dblclick)=\"onRowDoubleClick(row)\"\n        (keydown)=\"onRowKeydown($event, 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              @if (canExpandRow(row)) {\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]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                </button>\n              }\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              <div class=\"tn-table__cell-content\">\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              </div>\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (detailRowDef() && canExpandRow(row) && 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 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [description]=\"emptyDescription()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative;width:100%;overflow-x:auto}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.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:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.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__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.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__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;z-index:1;border-radius:4px}.tn-table--loading .tn-table__table{pointer-events:none;-webkit-user-select:none;user-select:none}.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 }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", 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 }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], activeRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRow", required: false }] }], activeWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeWhen", required: false }] }], activeBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBg", required: false }] }], activeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndicator", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], expandOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnRowClick", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }] } });
 
 /**
  * Harness for interacting with `tn-table` in tests.
@@ -18308,6 +18396,12 @@ class TnSidePanelComponent {
      * Test-id applied to the panel's close (×) button.
      */
     closeButtonTestId = input(undefined, ...(ngDevMode ? [{ debugName: "closeButtonTestId" }] : []));
+    /**
+     * Accessible name for the close button. Defaults to "Dismiss"; override to translate it, or to
+     * name what is being closed ("Close Add Dataset form") — a screen-reader user tabbing to it out
+     * of context otherwise hears only "Dismiss".
+     */
+    closeButtonAriaLabel = input('Dismiss', ...(ngDevMode ? [{ debugName: "closeButtonAriaLabel" }] : []));
     // Outputs
     opened = output();
     closed = output();
@@ -18393,15 +18487,15 @@ class TnSidePanelComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Overlay wrapper: portaled to document.body -->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? titleId : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!-- Panel -->\n  <div\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    [cdkTrapFocusAutoCapture]=\"open()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          ariaLabel=\"Dismiss\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!-- Content -->\n    <section class=\"tn-side-panel__content\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonAriaLabel: { classPropertyName: "closeButtonAriaLabel", publicName: "closeButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Overlay wrapper: portaled to document.body -->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? titleId : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!-- Panel -->\n  <div\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    [cdkTrapFocusAutoCapture]=\"open()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!-- Content -->\n    <section class=\"tn-side-panel__content\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-side-panel', standalone: true, imports: [CommonModule, A11yModule, TnIconButtonComponent, TnTestIdDirective], host: {
                         'class': 'tn-side-panel',
                         '[attr.data-tn-panel]': 'panelId',
-                    }, template: "<!-- Overlay wrapper: portaled to document.body -->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? titleId : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!-- Panel -->\n  <div\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    [cdkTrapFocusAutoCapture]=\"open()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          ariaLabel=\"Dismiss\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!-- Content -->\n    <section class=\"tn-side-panel__content\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { overlayRef: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeGuard", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], closeButtonTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonTestId", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }] }] } });
+                    }, template: "<!-- Overlay wrapper: portaled to document.body -->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? titleId : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!-- Panel -->\n  <div\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    [cdkTrapFocusAutoCapture]=\"open()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!-- Content -->\n    <section class=\"tn-side-panel__content\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { overlayRef: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeGuard", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], closeButtonTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonTestId", required: false }] }], closeButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonAriaLabel", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with `TnSidePanelComponent` in tests.
@@ -19246,7 +19340,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 }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", 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 }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, testIdBase: { classPropertyName: "testIdBase", publicName: "testIdBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createAction: "createAction", created: "created", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel" }, 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 : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '\u2026' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\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\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\" width=\"20px\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\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        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(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\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\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    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\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);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);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;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;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:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.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}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, #d32f2f)}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, #d32f2f) 10%,transparent);border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:1rem;color:var(--tn-error, #d32f2f)}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.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-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-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}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;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:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;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}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;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:1rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyIcon", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { 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 }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", 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 }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, testIdBase: { classPropertyName: "testIdBase", publicName: "testIdBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createAction: "createAction", created: "created", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel" }, 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 : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '\u2026' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\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\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\" width=\"20px\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\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        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(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\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\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    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\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);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);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;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;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:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.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}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, #d32f2f)}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, #d32f2f) 10%,transparent);border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:1rem;color:var(--tn-error, #d32f2f)}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.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-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-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}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;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:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;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}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;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:1rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyDescription", "emptyIcon", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { 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,