@truenas/ui-components 0.7.5 → 0.7.6

package/fesm2022/truenas-ui-components.mjs

@@ -17596,6 +17596,22 @@ function getExpandDuration() {
     }
     return '225ms cubic-bezier(0.4, 0.0, 0.2, 1)';
 }
+/**
+ * Same members, order-independent. Used to keep the expansion reconcile idempotent: it re-runs
+ * whenever `expansionKey`'s identity changes, and writing a fresh `Set` every time would churn
+ * the signal for a consumer that binds an inline arrow rather than a stable member.
+ */
+function isSameSet(a, b) {
+    if (a.size !== b.size) {
+        return false;
+    }
+    for (const value of a) {
+        if (!b.has(value)) {
+            return false;
+        }
+    }
+    return true;
+}
 /** English defaults used when no `TN_TABLE_LABELS` provider is registered. */
 const TN_TABLE_DEFAULT_LABELS = {
     sortBy: 'Sort by',
@@ -17694,6 +17710,33 @@ class TnTableComponent {
      * full list it holds, and call {@link clearSelection} once a batch action is done.
      */
     selectionKey = input(undefined, ...(ngDevMode ? [{ debugName: "selectionKey" }] : []));
+    /**
+     * Identifies a row for EXPANSION, so an open detail row survives a `dataSource` change.
+     *
+     * Detail rows are held by object identity, and a consumer that re-fetches hands back new
+     * objects for the same rows — so without a key a background reload closes the row the
+     * user opened, which is usually the moment its contents are worth watching (a running
+     * job's logs, say). With a key set, the table re-points the open rows at the new objects
+     * instead of collapsing them.
+     *
+     * A row the new `data()` does not carry — another page, another tab, filtered out — is
+     * kept, not dropped, and re-opens on its own once that row is listed again. Retention is
+     * unconditional for the same reason it is for {@link selectionKey}: the table sees one
+     * page and cannot tell a row that moved off-screen from one that is gone for good. Call
+     * {@link clearExpansion} when the consumer knows it is gone.
+     *
+     * Without it the table keeps its historical behaviour — any `dataSource` reference change
+     * collapses every open row.
+     *
+     * With a key set, drive expansion through {@link toggleRowExpansion}, {@link expandRow}
+     * and {@link clearExpansion} rather than writing {@link expandedRows} directly, or the
+     * retained set and the visible set drift apart.
+     *
+     * Pass a key that identifies the ROW, not its position, and bind a stable member rather
+     * than writing the function in the template: `[expansionKey]="rowKey"` for a
+     * `rowKey = (row: Job) => row.id` on the host.
+     */
+    expansionKey = input(undefined, ...(ngDevMode ? [{ debugName: "expansionKey" }] : []));
     emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
     /**
      * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
@@ -17937,12 +17980,25 @@ class TnTableComponent {
     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
-     * (e.g. after sorting), expanded state is lost. A future key-based
-     * approach could address this.
+     * The rows of the CURRENT `data()` whose detail row is open, by object identity.
+     *
+     * Replacing the data array collapses everything unless {@link expansionKey} is set, in
+     * which case this is the visible slice of {@link expandedByKey} and survives the swap.
+     *
+     * Writable for consumers that predate {@link expansionKey}. **Adding a key to a consumer
+     * that writes this signal directly is a migration, not a drop-in**: a write here closes
+     * what is on screen but never touches the retained map, so every row whose key is still in
+     * it re-opens on the next reconcile — the one it just closed included. Move those writes to
+     * {@link expandRow}, {@link toggleRowExpansion} and {@link clearExpansion}, which keep the
+     * two in step.
      */
     expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
+    /**
+     * Every open detail row keyed by {@link expansionKey}, including rows no longer in
+     * `data()`. Empty (and unused) when no key is set. Holds the row objects so a row that
+     * comes back can be re-pointed at the object the new data carries.
+     */
+    expandedByKey = new Map();
     // Per-instance prefix for generated DOM ids, so two tables on a page can't collide.
     static instanceCount = 0;
     instanceId = `tn-table-${TnTableComponent.instanceCount++}`;
@@ -17983,17 +18039,48 @@ class TnTableComponent {
         return map;
     }, ...(ngDevMode ? [{ debugName: "columnDefMap" }] : []));
     constructor() {
-        // Collapse every open detail row when the data reference changes: the rows the
-        // expanded set holds belong to the array that is going away. This reads `data()`
-        // and nothing else, so an unrelated input — `selectionKey` above all, which a
-        // consumer may swap or re-create on any change-detection pass — cannot close what
-        // the user opened as a side effect of a selection concern.
+        // Reconcile open detail rows against the rows now on screen.
+        //
+        // Without `expansionKey` this collapses everything: the set holds rows from the array
+        // that is going away, and reference-keyed rows cannot be recognised in a new one.
+        //
+        // With a key it re-points them instead. It therefore has to read `expansionKey()` as
+        // well as `data()` — a key being taken away must be noticed promptly — which means an
+        // unrelated re-creation of that input (an inline arrow in a template, which the type
+        // permits) re-runs this. That must not churn the signal or, worse, close what the user
+        // opened, so the keyed branch derives `visible` from the retained map and writes only
+        // when the result actually differs. `selectionKey` is still never read here: a
+        // selection concern must not touch expansion.
         effect(() => {
-            this.data();
+            const rows = this.data();
+            const expansionKey = this.expansionKey();
             if (!this.initialized) {
                 return;
             }
-            this.expandedRows.set(new Set());
+            if (!expansionKey) {
+                // Also drop anything retained under a key, so a table whose `expansionKey` is taken
+                // away cannot re-open those rows if it is given one again.
+                this.expandedByKey.clear();
+                this.expandedRows.set(new Set());
+                return;
+            }
+            // Re-point each retained row at the object the new data carries and show the ones this
+            // page actually has. Rows it does not have stay in the map and re-open when they return.
+            const visible = new Set();
+            for (const row of rows) {
+                const key = expansionKey(row);
+                if (this.expandedByKey.has(key)) {
+                    this.expandedByKey.set(key, row);
+                    visible.add(row);
+                }
+            }
+            // `untracked`: the guard needs the current value, not a subscription. Reading it
+            // tracked would make every write to `expandedRows` re-run this effect and rewrite it
+            // from the map — so a consumer closing a visible row with `expandedRows.set(new Set())`
+            // would have it put straight back, and the signal would be read-only in all but name.
+            if (!isSameSet(visible, untracked(this.expandedRows))) {
+                this.expandedRows.set(visible);
+            }
         });
         // Reconcile the retained selection against the rows now on screen. This has to
         // react to `selectionKey` as well as to `data()` — a key being taken away must be
@@ -18024,10 +18111,12 @@ class TnTableComponent {
             this.syncSelectionToData(rows, selectionKey);
             this.emitSelectionIfChanged();
         });
-        // Clear expanded rows when expandable is toggled off
+        // Clear expanded rows when expandable is toggled off. Through `clearExpansion()`, so the
+        // rows retained under `expansionKey` go as well: clearing only the visible set would let
+        // the next `dataSource` change re-open rows the table itself had just closed.
         effect(() => {
             if (!this.expandable()) {
-                this.expandedRows.set(new Set());
+                this.clearExpansion();
             }
         });
         // Prune rows the predicate no longer allows from the expanded set, so a row
@@ -18038,7 +18127,8 @@ class TnTableComponent {
         // before the predicate runs — there is nothing to prune, and the next toggle
         // re-runs this effect and re-tracks the predicate's signals. The
         // next.size !== expanded.size guard makes the self-write converge after one
-        // extra run, so there is no infinite loop.
+        // extra run, so there is no infinite loop. A rejected row leaves the retained
+        // `expansionKey` map as well — see below.
         effect(() => {
             const predicate = this.isRowExpandable();
             if (!predicate) {
@@ -18048,11 +18138,17 @@ class TnTableComponent {
             if (expanded.size === 0) {
                 return;
             }
+            const expansionKey = this.expansionKey();
             const next = new Set();
             for (const row of expanded) {
                 if (predicate(row)) {
                     next.add(row);
                 }
+                else if (expansionKey) {
+                    // Drop it from the retained map too, or the guarantee above holds only until the
+                    // next `dataSource` change re-points the row and opens it again.
+                    this.expandedByKey.delete(expansionKey(row));
+                }
             }
             if (next.size !== expanded.size) {
                 this.expandedRows.set(next);
@@ -18323,17 +18419,62 @@ class TnTableComponent {
             return;
         }
         const expanded = new Set(this.expandedRows());
-        if (expanded.has(row)) {
+        const expansionKey = this.expansionKey();
+        if (this.isExpansionOpen(row)) {
+            // `delete` is a no-op for a row that has paged away — it is not in the visible set —
+            // and dropping the key is what actually closes it. Resolving through the key is why
+            // toggling a retained row closes it instead of re-adding it, matching
+            // `toggleRowSelection`.
             expanded.delete(row);
+            if (expansionKey) {
+                this.expandedByKey.delete(expansionKey(row));
+            }
         }
         else {
             if (this.singleExpand()) {
                 expanded.clear();
+                if (expansionKey) {
+                    this.expandedByKey.clear();
+                }
             }
             expanded.add(row);
+            if (expansionKey) {
+                this.expandedByKey.set(expansionKey(row), row);
+            }
         }
         this.expandedRows.set(expanded);
     }
+    /**
+     * Whether `row`'s detail row counts as open for a toggle. With {@link expansionKey} that is
+     * the retained map, which includes rows this page is not showing; without one it is object
+     * identity against the visible set. Distinct from {@link isRowExpanded}, which drives
+     * rendering and must therefore stay about the row in front of the user.
+     */
+    isExpansionOpen(row) {
+        const expansionKey = this.expansionKey();
+        return expansionKey ? this.expandedByKey.has(expansionKey(row)) : this.expandedRows().has(row);
+    }
+    /**
+     * Opens `row`'s detail row programmatically — the same thing a chevron click does, for a
+     * consumer restoring expansion from somewhere else (a `?jobId=` query parameter, say).
+     * Honours `singleExpand` and keeps {@link expansionKey}'s retained set in step, which
+     * writing {@link expandedRows} directly does not.
+     */
+    expandRow(row) {
+        if (this.isExpansionOpen(row)) {
+            return;
+        }
+        this.toggleRowExpansion(row);
+    }
+    /**
+     * Collapses every detail row, including rows retained under {@link expansionKey} that are
+     * not on screen. `expandedRows.set(new Set())` only closes what is visible, so with a key
+     * set the off-screen rows would re-open on the next reconcile.
+     */
+    clearExpansion() {
+        this.expandedByKey.clear();
+        this.expandedRows.set(new Set());
+    }
     isRowExpanded(row) {
         return this.expandedRows().has(row);
     }
@@ -18862,7 +19003,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 }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", 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 }, scrollRegionAriaLabel: { classPropertyName: "scrollRegionAriaLabel", publicName: "scrollRegionAriaLabel", 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 }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, cardBreakpoint: { classPropertyName: "cardBreakpoint", publicName: "cardBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, cardPrimaryCount: { classPropertyName: "cardPrimaryCount", publicName: "cardPrimaryCount", 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()", "class.tn-table--cards": "isCardMode()", "class.tn-table--scroll": "isScrollMode()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()", "attr.tabindex": "scrollKeyboardReachable() ? \"0\" : null", "attr.role": "scrollKeyboardReachable() ? \"group\" : null", "attr.aria-label": "scrollKeyboardReachable() ? resolvedScrollRegionLabel() : null" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsDef", first: true, predicate: TnRowActionsDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox \u2014 see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action \u2014 which is how the label\n          activates the input.\n\n          The click/key and focusable lint rules are suppressed rather than satisfied:\n          this wrapper is a pointer hit area around a control that is already\n          focusable and already handles Space. Giving it `tabindex` and a key handler\n          would add a second tab stop and a second activation path for the same\n          checkbox, which is worse than the rule it silences.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div\n          class=\"tn-table__cards-selectall\"\n          (click)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\n        </div>\n      }\n      @if (sortableColumns().length > 0) {\n        <div class=\"tn-table__cards-sort\">\n          <tn-icon name=\"mat-sort\" size=\"sm\" aria-hidden=\"true\" />\n          <select\n            class=\"tn-table__cards-sort-select\"\n            [attr.aria-label]=\"labels().sortBy\"\n            [value]=\"sortColumn()\"\n            (change)=\"onSortSelectChange($event)\">\n            <!--\n              `[selected]` on the options, not just `[value]` on the <select>:\n              the select's value is bound before the @for options exist, so the\n              browser discards it and the binding is never dirty again \u2014 a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().unsorted }}</option>\n            @for (column of sortableColumns(); track column) {\n              <option [value]=\"column\" [selected]=\"column === sortColumn()\">\n                {{ getCardLabel(column) }}\n              </option>\n            }\n          </select>\n          @if (canSortActiveColumn()) {\n            <!--\n              Gated on the column being genuinely sortable, not merely active:\n              `sortableColumns` keeps a non-sortable active column listed so the sort stays\n              clearable, and this toggle must not ride along \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is `sortAscending` both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\n              [attr.data-sort-direction]=\"sortDirection()\"\n              (click)=\"toggleSortDirection()\">\n              @if (sortDirection() === 'asc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_upward\" aria-hidden=\"true\" />\n              } @else if (sortDirection() === 'desc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_downward\" aria-hidden=\"true\" />\n              } @else {\n                <tn-icon size=\"sm\" name=\"mat-unfold_more\" aria-hidden=\"true\" />\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!--\n    Decorative `tn-icon`s carry `aria-hidden=\"true\"`. tn-icon renders `role=\"img\"` and\n    falls back to its `name` for the accessible name, so without this the raw token\n    leaks: a standalone \"mat-sort\" image beside Select all, and disclosures announced\n    as \"More fields mat-keyboard_arrow_down\". The repo convention is the same \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"onRowSelectHitAreaClick($event, row)\">\n              <!--\n                Named from the card's title, not \"Select row N\": with `hideLabel` this is the\n                checkbox's entire accessible name, and a card list has no visible row numbers\n                to match it against. Falls back to the index when the title column renders\n                derived data through a `tnCellDef` and `getCellValue` has nothing to return \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRowSelection(row)\" />\n            </div>\n          }\n          <span class=\"tn-table__card-title\">\n            @if (getColumnDef(cardTitleColumn())?.cellTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: cardTitleColumn() }\" />\n            } @else {\n              {{ getCellValue(row, cardTitleColumn()) }}\n            }\n          </span>\n          @if (rowActionsDef()) {\n            <div class=\"tn-table__card-actions\">\n              <ng-container\n                [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        </div>\n\n        <dl class=\"tn-table__card-fields\">\n          @for (column of cardPrimaryColumns(); track column) {\n            <ng-container\n              [ngTemplateOutlet]=\"cardField\"\n              [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n          }\n        </dl>\n\n        <!--\n          The disclosure sits outside the primary <dl> and wraps its fields in a\n          <dl> of its own: <details> is not a permitted child of <dl>, so nesting\n          it there detached the folded dt/dd pairs from any description list.\n        -->\n        @if (cardSecondaryColumns().length > 0) {\n          <details class=\"tn-table__card-more\">\n            <summary class=\"tn-table__card-more-summary\">\n              <span>{{ labels().moreFields }}</span>\n              <tn-icon size=\"sm\" name=\"mat-keyboard_arrow_down\" aria-hidden=\"true\" />\n            </summary>\n            <dl class=\"tn-table__card-fields\">\n              @for (column of cardSecondaryColumns(); track column) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardField\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n              }\n            </dl>\n          </details>\n        }\n\n        @if (canExpandRow(row) && detailRowDef()) {\n          <!--\n            The button always carries the state, even when the card is also a trigger.\n            An earlier revision suppressed it here to avoid announcing the same panel\n            twice, but that muted the primary control: this button is what a\n            screen-reader user reaches by tabbing through controls, and it was\n            announced as a bare \"Details, button\" with no expanded state, before or\n            after activation. The state sat on the `role=\"listitem\"` card, heard only\n            if the user happened to focus the card itself.\n\n            Two controls that each toggle the same region and each report its state is\n            the disclosure pattern applied twice \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ labels().details }}</span>\n            <tn-icon\n              size=\"sm\"\n              aria-hidden=\"true\"\n              [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n          </button>\n          @if (isRowExpanded(row)) {\n            <div class=\"tn-table__card-detail\" [attr.id]=\"detailPanelId(rowIdx)\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <table\n    class=\"tn-table__table\"\n    [style.min-width]=\"resolvedMinWidth()\"\n    [attr.inert]=\"loading() ? '' : null\">\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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area \u2014 the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration \u2014 see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                  : (getColumnDef(column)?.sortable() ? 'none' : null)\n              \"\n              [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n              [attr.data-column]=\"column\"\n              (click)=\"onSortHeaderClick(column, $event)\"\n              (keydown.enter)=\"onSortHeaderKeydown(column, $event)\"\n              (keydown.space)=\"onSortHeaderKeydown(column, $event)\">\n              <span class=\"tn-table__sort-container\">\n                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet \u2014 projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\n                  <span class=\"tn-table__header-text\">\n                    @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                    } @else {\n                      {{ getColumnDef(column)?.label() ?? column }}\n                    }\n                  </span>\n                }\n                @if (getColumnDef(column)?.sortable()) {\n                  <!--\n                    aria-hidden: the <th> has no aria-label, so its accessible name is\n                    computed from its contents \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\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        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it \u2014 a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : null\"\n          (click)=\"onRowClick(row, $event)\"\n          (dblclick)=\"onRowDoubleClick(row, $event)\"\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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\n                    (click)=\"toggleRowExpansion(row)\">\n                    <tn-icon\n                      class=\"tn-table__expand-icon\"\n                      aria-hidden=\"true\"\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          @if (rowActionsDef()) {\n            <td class=\"tn-table__cell tn-table__actions-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tn-table__actions-content\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n              </div>\n            </td>\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.id]=\"detailPanelId(rowIdx)\"\n              [attr.colspan]=\"totalColumnCount()\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n}\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;border-radius:4px}:host{--tn-table-select-width: 72px;--tn-table-actions-width: 128px;--tn-table-expand-width: 56px}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--fixed-layout) .tn-table__actions-cell{box-sizing:border-box;width:var(--tn-table-actions-width)}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}:host(.tn-table--loading) .tn-table__table,:host(.tn-table--loading) .tn-table__cards,:host(.tn-table--loading) .tn-table__cards-toolbar{pointer-events:none;-webkit-user-select:none;user-select:none}:host(.tn-table--scroll) .tn-table__select-cell{position:sticky;left:0}:host(.tn-table--scroll) .tn-table__header-cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{position:sticky;left:0;z-index:1}:host(.tn-table--scroll) .tn-table__actions-cell{position:sticky;right:0;z-index:3}:host(.tn-table--scroll) .tn-table__header-row>.tn-table__header-cell.tn-table__select-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell.tn-table__select-cell{z-index:2}:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{left:var(--tn-table-select-width)}:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{background-color:inherit}:host(.tn-table--scroll) .tn-table__header-row .tn-table__header-cell:first-child:not(.tn-table__header-cell--sortable:hover),:host(.tn-table--scroll) .tn-table__header-row .tn-table__select-cell+.tn-table__header-cell:not(.tn-table__header-cell--sortable:hover){background-color:var(--tn-topbar)}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2)}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-topbar-hover)}.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,.tn-table__header-cell--sortable:focus-visible .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;background-color:var(--tn-bg2)}.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{box-sizing:border-box;width:var(--tn-table-select-width);padding:0 8px 0 16px;cursor:pointer}.tn-table__expand-cell{box-sizing:border-box;width:var(--tn-table-expand-width);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__actions-cell{width:1%;white-space:nowrap;text-align:right;background-color:inherit;border-left:1px solid var(--tn-lines)}.tn-table__header .tn-table__actions-cell{background-color:var(--tn-topbar)}.tn-table__actions-content{display:inline-flex;align-items:center;gap:4px}.tn-table__loading-overlay{position:absolute;inset:0;z-index:4;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;border-radius:4px}.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}.tn-table__cards-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 12px}.tn-table__cards-selectall{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tn-fg1);cursor:pointer}.tn-table__cards-sort{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--tn-fg2)}.tn-table__cards-sort-select{height:32px;padding:0 8px;border:1px solid var(--tn-lines);border-radius:4px;background-color:var(--tn-bg2);color:var(--tn-fg1);font-size:14px}.tn-table__cards-sort-select:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards-sort-dir{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--tn-lines);border-radius:4px;background:none;color:var(--tn-fg2);cursor:pointer}.tn-table__cards-sort-dir:hover{background-color:var(--tn-alt-bg1)}.tn-table__cards-sort-dir:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards{display:flex;flex-direction:column;gap:8px}.tn-table__card{background-color:var(--tn-bg2);border:1px solid var(--tn-lines);border-radius:6px;padding:12px}.tn-table__card--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333));box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__card--clickable{cursor:pointer}.tn-table__card--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tn-primary)}.tn-table__card--active.tn-table__card--clickable:focus-visible{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__card-header{display:flex;align-items:center;gap:10px}.tn-table__card-select{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}.tn-table__card-title{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--tn-fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-table__card-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.tn-table__card-fields{margin:0;padding:10px 0 0}.tn-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}.tn-table__card-field-label{flex-shrink:0;color:var(--tn-fg2)}.tn-table__card-field-value{margin:0;min-width:0;text-align:right;color:var(--tn-fg1);overflow-wrap:anywhere}.tn-table__card-more[open]>.tn-table__card-more-summary tn-icon{transform:rotate(180deg)}.tn-table__card-more{margin-top:2px}.tn-table__card-more-summary{display:inline-flex;align-items:center;gap:4px;padding:4px 0;font-size:13px;color:var(--tn-fg1);cursor:pointer;list-style:none}.tn-table__card-more-summary::-webkit-details-marker{display:none}.tn-table__card-more-summary tn-icon{transition:transform .2s ease}.tn-table__card-more-summary:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 0;background:none;border:none;color:var(--tn-fg1);font-size:13px;cursor:pointer}.tn-table__card-detail-toggle:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail{margin-top:8px;padding-top:8px;border-top:1px solid var(--tn-lines)}@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__card-more-summary tn-icon,.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 }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, expansionKey: { classPropertyName: "expansionKey", publicName: "expansionKey", 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 }, scrollRegionAriaLabel: { classPropertyName: "scrollRegionAriaLabel", publicName: "scrollRegionAriaLabel", 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 }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, cardBreakpoint: { classPropertyName: "cardBreakpoint", publicName: "cardBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, cardPrimaryCount: { classPropertyName: "cardPrimaryCount", publicName: "cardPrimaryCount", 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()", "class.tn-table--cards": "isCardMode()", "class.tn-table--scroll": "isScrollMode()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()", "attr.tabindex": "scrollKeyboardReachable() ? \"0\" : null", "attr.role": "scrollKeyboardReachable() ? \"group\" : null", "attr.aria-label": "scrollKeyboardReachable() ? resolvedScrollRegionLabel() : null" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsDef", first: true, predicate: TnRowActionsDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox \u2014 see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action \u2014 which is how the label\n          activates the input.\n\n          The click/key and focusable lint rules are suppressed rather than satisfied:\n          this wrapper is a pointer hit area around a control that is already\n          focusable and already handles Space. Giving it `tabindex` and a key handler\n          would add a second tab stop and a second activation path for the same\n          checkbox, which is worse than the rule it silences.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div\n          class=\"tn-table__cards-selectall\"\n          (click)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\n        </div>\n      }\n      @if (sortableColumns().length > 0) {\n        <div class=\"tn-table__cards-sort\">\n          <tn-icon name=\"mat-sort\" size=\"sm\" aria-hidden=\"true\" />\n          <select\n            class=\"tn-table__cards-sort-select\"\n            [attr.aria-label]=\"labels().sortBy\"\n            [value]=\"sortColumn()\"\n            (change)=\"onSortSelectChange($event)\">\n            <!--\n              `[selected]` on the options, not just `[value]` on the <select>:\n              the select's value is bound before the @for options exist, so the\n              browser discards it and the binding is never dirty again \u2014 a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().unsorted }}</option>\n            @for (column of sortableColumns(); track column) {\n              <option [value]=\"column\" [selected]=\"column === sortColumn()\">\n                {{ getCardLabel(column) }}\n              </option>\n            }\n          </select>\n          @if (canSortActiveColumn()) {\n            <!--\n              Gated on the column being genuinely sortable, not merely active:\n              `sortableColumns` keeps a non-sortable active column listed so the sort stays\n              clearable, and this toggle must not ride along \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is `sortAscending` both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\n              [attr.data-sort-direction]=\"sortDirection()\"\n              (click)=\"toggleSortDirection()\">\n              @if (sortDirection() === 'asc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_upward\" aria-hidden=\"true\" />\n              } @else if (sortDirection() === 'desc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_downward\" aria-hidden=\"true\" />\n              } @else {\n                <tn-icon size=\"sm\" name=\"mat-unfold_more\" aria-hidden=\"true\" />\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!--\n    Decorative `tn-icon`s carry `aria-hidden=\"true\"`. tn-icon renders `role=\"img\"` and\n    falls back to its `name` for the accessible name, so without this the raw token\n    leaks: a standalone \"mat-sort\" image beside Select all, and disclosures announced\n    as \"More fields mat-keyboard_arrow_down\". The repo convention is the same \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"onRowSelectHitAreaClick($event, row)\">\n              <!--\n                Named from the card's title, not \"Select row N\": with `hideLabel` this is the\n                checkbox's entire accessible name, and a card list has no visible row numbers\n                to match it against. Falls back to the index when the title column renders\n                derived data through a `tnCellDef` and `getCellValue` has nothing to return \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRowSelection(row)\" />\n            </div>\n          }\n          <span class=\"tn-table__card-title\">\n            @if (getColumnDef(cardTitleColumn())?.cellTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: cardTitleColumn() }\" />\n            } @else {\n              {{ getCellValue(row, cardTitleColumn()) }}\n            }\n          </span>\n          @if (rowActionsDef()) {\n            <div class=\"tn-table__card-actions\">\n              <ng-container\n                [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        </div>\n\n        <dl class=\"tn-table__card-fields\">\n          @for (column of cardPrimaryColumns(); track column) {\n            <ng-container\n              [ngTemplateOutlet]=\"cardField\"\n              [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n          }\n        </dl>\n\n        <!--\n          The disclosure sits outside the primary <dl> and wraps its fields in a\n          <dl> of its own: <details> is not a permitted child of <dl>, so nesting\n          it there detached the folded dt/dd pairs from any description list.\n        -->\n        @if (cardSecondaryColumns().length > 0) {\n          <details class=\"tn-table__card-more\">\n            <summary class=\"tn-table__card-more-summary\">\n              <span>{{ labels().moreFields }}</span>\n              <tn-icon size=\"sm\" name=\"mat-keyboard_arrow_down\" aria-hidden=\"true\" />\n            </summary>\n            <dl class=\"tn-table__card-fields\">\n              @for (column of cardSecondaryColumns(); track column) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardField\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n              }\n            </dl>\n          </details>\n        }\n\n        @if (canExpandRow(row) && detailRowDef()) {\n          <!--\n            The button always carries the state, even when the card is also a trigger.\n            An earlier revision suppressed it here to avoid announcing the same panel\n            twice, but that muted the primary control: this button is what a\n            screen-reader user reaches by tabbing through controls, and it was\n            announced as a bare \"Details, button\" with no expanded state, before or\n            after activation. The state sat on the `role=\"listitem\"` card, heard only\n            if the user happened to focus the card itself.\n\n            Two controls that each toggle the same region and each report its state is\n            the disclosure pattern applied twice \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ labels().details }}</span>\n            <tn-icon\n              size=\"sm\"\n              aria-hidden=\"true\"\n              [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n          </button>\n          @if (isRowExpanded(row)) {\n            <div class=\"tn-table__card-detail\" [attr.id]=\"detailPanelId(rowIdx)\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <table\n    class=\"tn-table__table\"\n    [style.min-width]=\"resolvedMinWidth()\"\n    [attr.inert]=\"loading() ? '' : null\">\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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area \u2014 the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration \u2014 see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                  : (getColumnDef(column)?.sortable() ? 'none' : null)\n              \"\n              [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n              [attr.data-column]=\"column\"\n              (click)=\"onSortHeaderClick(column, $event)\"\n              (keydown.enter)=\"onSortHeaderKeydown(column, $event)\"\n              (keydown.space)=\"onSortHeaderKeydown(column, $event)\">\n              <span class=\"tn-table__sort-container\">\n                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet \u2014 projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\n                  <span class=\"tn-table__header-text\">\n                    @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                    } @else {\n                      {{ getColumnDef(column)?.label() ?? column }}\n                    }\n                  </span>\n                }\n                @if (getColumnDef(column)?.sortable()) {\n                  <!--\n                    aria-hidden: the <th> has no aria-label, so its accessible name is\n                    computed from its contents \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\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        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it \u2014 a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : null\"\n          (click)=\"onRowClick(row, $event)\"\n          (dblclick)=\"onRowDoubleClick(row, $event)\"\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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\n                    (click)=\"toggleRowExpansion(row)\">\n                    <tn-icon\n                      class=\"tn-table__expand-icon\"\n                      aria-hidden=\"true\"\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          @if (rowActionsDef()) {\n            <td class=\"tn-table__cell tn-table__actions-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tn-table__actions-content\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n              </div>\n            </td>\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.id]=\"detailPanelId(rowIdx)\"\n              [attr.colspan]=\"totalColumnCount()\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n}\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;border-radius:4px}:host{--tn-table-select-width: 72px;--tn-table-actions-width: 128px;--tn-table-expand-width: 56px}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--fixed-layout) .tn-table__actions-cell{box-sizing:border-box;width:var(--tn-table-actions-width)}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}:host(.tn-table--loading) .tn-table__table,:host(.tn-table--loading) .tn-table__cards,:host(.tn-table--loading) .tn-table__cards-toolbar{pointer-events:none;-webkit-user-select:none;user-select:none}:host(.tn-table--scroll) .tn-table__select-cell{position:sticky;left:0}:host(.tn-table--scroll) .tn-table__header-cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{position:sticky;left:0;z-index:1}:host(.tn-table--scroll) .tn-table__actions-cell{position:sticky;right:0;z-index:3}:host(.tn-table--scroll) .tn-table__header-row>.tn-table__header-cell.tn-table__select-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell.tn-table__select-cell{z-index:2}:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{left:var(--tn-table-select-width)}:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{background-color:inherit}:host(.tn-table--scroll) .tn-table__header-row .tn-table__header-cell:first-child:not(.tn-table__header-cell--sortable:hover),:host(.tn-table--scroll) .tn-table__header-row .tn-table__select-cell+.tn-table__header-cell:not(.tn-table__header-cell--sortable:hover){background-color:var(--tn-topbar)}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2)}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-topbar-hover)}.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,.tn-table__header-cell--sortable:focus-visible .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;background-color:var(--tn-bg2)}.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{box-sizing:border-box;width:var(--tn-table-select-width);padding:0 8px 0 16px;cursor:pointer}.tn-table__expand-cell{box-sizing:border-box;width:var(--tn-table-expand-width);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__actions-cell{width:1%;white-space:nowrap;text-align:right;background-color:inherit;border-left:1px solid var(--tn-lines)}.tn-table__header .tn-table__actions-cell{background-color:var(--tn-topbar)}.tn-table__actions-content{display:inline-flex;align-items:center;gap:4px}.tn-table__loading-overlay{position:absolute;inset:0;z-index:4;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;border-radius:4px}.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}.tn-table__cards-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 12px}.tn-table__cards-selectall{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tn-fg1);cursor:pointer}.tn-table__cards-sort{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--tn-fg2)}.tn-table__cards-sort-select{height:32px;padding:0 8px;border:1px solid var(--tn-lines);border-radius:4px;background-color:var(--tn-bg2);color:var(--tn-fg1);font-size:14px}.tn-table__cards-sort-select:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards-sort-dir{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--tn-lines);border-radius:4px;background:none;color:var(--tn-fg2);cursor:pointer}.tn-table__cards-sort-dir:hover{background-color:var(--tn-alt-bg1)}.tn-table__cards-sort-dir:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards{display:flex;flex-direction:column;gap:8px}.tn-table__card{background-color:var(--tn-bg2);border:1px solid var(--tn-lines);border-radius:6px;padding:12px}.tn-table__card--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333));box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__card--clickable{cursor:pointer}.tn-table__card--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tn-primary)}.tn-table__card--active.tn-table__card--clickable:focus-visible{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__card-header{display:flex;align-items:center;gap:10px}.tn-table__card-select{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}.tn-table__card-title{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--tn-fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-table__card-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.tn-table__card-fields{margin:0;padding:10px 0 0}.tn-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}.tn-table__card-field-label{flex-shrink:0;color:var(--tn-fg2)}.tn-table__card-field-value{margin:0;min-width:0;text-align:right;color:var(--tn-fg1);overflow-wrap:anywhere}.tn-table__card-more[open]>.tn-table__card-more-summary tn-icon{transform:rotate(180deg)}.tn-table__card-more{margin-top:2px}.tn-table__card-more-summary{display:inline-flex;align-items:center;gap:4px;padding:4px 0;font-size:13px;color:var(--tn-fg1);cursor:pointer;list-style:none}.tn-table__card-more-summary::-webkit-details-marker{display:none}.tn-table__card-more-summary tn-icon{transition:transform .2s ease}.tn-table__card-more-summary:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 0;background:none;border:none;color:var(--tn-fg1);font-size:13px;cursor:pointer}.tn-table__card-detail-toggle:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail{margin-top:8px;padding-top:8px;border-top:1px solid var(--tn-lines)}@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__card-more-summary tn-icon,.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: '*' })),
@@ -18899,7 +19040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.role]': 'scrollKeyboardReachable() ? "group" : null',
                         '[attr.aria-label]': 'scrollKeyboardReachable() ? resolvedScrollRegionLabel() : null',
                     }, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox \u2014 see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action \u2014 which is how the label\n          activates the input.\n\n          The click/key and focusable lint rules are suppressed rather than satisfied:\n          this wrapper is a pointer hit area around a control that is already\n          focusable and already handles Space. Giving it `tabindex` and a key handler\n          would add a second tab stop and a second activation path for the same\n          checkbox, which is worse than the rule it silences.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div\n          class=\"tn-table__cards-selectall\"\n          (click)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\n        </div>\n      }\n      @if (sortableColumns().length > 0) {\n        <div class=\"tn-table__cards-sort\">\n          <tn-icon name=\"mat-sort\" size=\"sm\" aria-hidden=\"true\" />\n          <select\n            class=\"tn-table__cards-sort-select\"\n            [attr.aria-label]=\"labels().sortBy\"\n            [value]=\"sortColumn()\"\n            (change)=\"onSortSelectChange($event)\">\n            <!--\n              `[selected]` on the options, not just `[value]` on the <select>:\n              the select's value is bound before the @for options exist, so the\n              browser discards it and the binding is never dirty again \u2014 a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().unsorted }}</option>\n            @for (column of sortableColumns(); track column) {\n              <option [value]=\"column\" [selected]=\"column === sortColumn()\">\n                {{ getCardLabel(column) }}\n              </option>\n            }\n          </select>\n          @if (canSortActiveColumn()) {\n            <!--\n              Gated on the column being genuinely sortable, not merely active:\n              `sortableColumns` keeps a non-sortable active column listed so the sort stays\n              clearable, and this toggle must not ride along \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is `sortAscending` both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\n              [attr.data-sort-direction]=\"sortDirection()\"\n              (click)=\"toggleSortDirection()\">\n              @if (sortDirection() === 'asc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_upward\" aria-hidden=\"true\" />\n              } @else if (sortDirection() === 'desc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_downward\" aria-hidden=\"true\" />\n              } @else {\n                <tn-icon size=\"sm\" name=\"mat-unfold_more\" aria-hidden=\"true\" />\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!--\n    Decorative `tn-icon`s carry `aria-hidden=\"true\"`. tn-icon renders `role=\"img\"` and\n    falls back to its `name` for the accessible name, so without this the raw token\n    leaks: a standalone \"mat-sort\" image beside Select all, and disclosures announced\n    as \"More fields mat-keyboard_arrow_down\". The repo convention is the same \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"onRowSelectHitAreaClick($event, row)\">\n              <!--\n                Named from the card's title, not \"Select row N\": with `hideLabel` this is the\n                checkbox's entire accessible name, and a card list has no visible row numbers\n                to match it against. Falls back to the index when the title column renders\n                derived data through a `tnCellDef` and `getCellValue` has nothing to return \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRowSelection(row)\" />\n            </div>\n          }\n          <span class=\"tn-table__card-title\">\n            @if (getColumnDef(cardTitleColumn())?.cellTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: cardTitleColumn() }\" />\n            } @else {\n              {{ getCellValue(row, cardTitleColumn()) }}\n            }\n          </span>\n          @if (rowActionsDef()) {\n            <div class=\"tn-table__card-actions\">\n              <ng-container\n                [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        </div>\n\n        <dl class=\"tn-table__card-fields\">\n          @for (column of cardPrimaryColumns(); track column) {\n            <ng-container\n              [ngTemplateOutlet]=\"cardField\"\n              [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n          }\n        </dl>\n\n        <!--\n          The disclosure sits outside the primary <dl> and wraps its fields in a\n          <dl> of its own: <details> is not a permitted child of <dl>, so nesting\n          it there detached the folded dt/dd pairs from any description list.\n        -->\n        @if (cardSecondaryColumns().length > 0) {\n          <details class=\"tn-table__card-more\">\n            <summary class=\"tn-table__card-more-summary\">\n              <span>{{ labels().moreFields }}</span>\n              <tn-icon size=\"sm\" name=\"mat-keyboard_arrow_down\" aria-hidden=\"true\" />\n            </summary>\n            <dl class=\"tn-table__card-fields\">\n              @for (column of cardSecondaryColumns(); track column) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardField\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n              }\n            </dl>\n          </details>\n        }\n\n        @if (canExpandRow(row) && detailRowDef()) {\n          <!--\n            The button always carries the state, even when the card is also a trigger.\n            An earlier revision suppressed it here to avoid announcing the same panel\n            twice, but that muted the primary control: this button is what a\n            screen-reader user reaches by tabbing through controls, and it was\n            announced as a bare \"Details, button\" with no expanded state, before or\n            after activation. The state sat on the `role=\"listitem\"` card, heard only\n            if the user happened to focus the card itself.\n\n            Two controls that each toggle the same region and each report its state is\n            the disclosure pattern applied twice \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ labels().details }}</span>\n            <tn-icon\n              size=\"sm\"\n              aria-hidden=\"true\"\n              [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n          </button>\n          @if (isRowExpanded(row)) {\n            <div class=\"tn-table__card-detail\" [attr.id]=\"detailPanelId(rowIdx)\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <table\n    class=\"tn-table__table\"\n    [style.min-width]=\"resolvedMinWidth()\"\n    [attr.inert]=\"loading() ? '' : null\">\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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area \u2014 the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration \u2014 see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                  : (getColumnDef(column)?.sortable() ? 'none' : null)\n              \"\n              [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n              [attr.data-column]=\"column\"\n              (click)=\"onSortHeaderClick(column, $event)\"\n              (keydown.enter)=\"onSortHeaderKeydown(column, $event)\"\n              (keydown.space)=\"onSortHeaderKeydown(column, $event)\">\n              <span class=\"tn-table__sort-container\">\n                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet \u2014 projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\n                  <span class=\"tn-table__header-text\">\n                    @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                    } @else {\n                      {{ getColumnDef(column)?.label() ?? column }}\n                    }\n                  </span>\n                }\n                @if (getColumnDef(column)?.sortable()) {\n                  <!--\n                    aria-hidden: the <th> has no aria-label, so its accessible name is\n                    computed from its contents \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\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        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it \u2014 a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : null\"\n          (click)=\"onRowClick(row, $event)\"\n          (dblclick)=\"onRowDoubleClick(row, $event)\"\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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\n                    (click)=\"toggleRowExpansion(row)\">\n                    <tn-icon\n                      class=\"tn-table__expand-icon\"\n                      aria-hidden=\"true\"\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          @if (rowActionsDef()) {\n            <td class=\"tn-table__cell tn-table__actions-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tn-table__actions-content\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n              </div>\n            </td>\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.id]=\"detailPanelId(rowIdx)\"\n              [attr.colspan]=\"totalColumnCount()\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n}\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;border-radius:4px}:host{--tn-table-select-width: 72px;--tn-table-actions-width: 128px;--tn-table-expand-width: 56px}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--fixed-layout) .tn-table__actions-cell{box-sizing:border-box;width:var(--tn-table-actions-width)}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}:host(.tn-table--loading) .tn-table__table,:host(.tn-table--loading) .tn-table__cards,:host(.tn-table--loading) .tn-table__cards-toolbar{pointer-events:none;-webkit-user-select:none;user-select:none}:host(.tn-table--scroll) .tn-table__select-cell{position:sticky;left:0}:host(.tn-table--scroll) .tn-table__header-cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{position:sticky;left:0;z-index:1}:host(.tn-table--scroll) .tn-table__actions-cell{position:sticky;right:0;z-index:3}:host(.tn-table--scroll) .tn-table__header-row>.tn-table__header-cell.tn-table__select-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell.tn-table__select-cell{z-index:2}:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{left:var(--tn-table-select-width)}:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{background-color:inherit}:host(.tn-table--scroll) .tn-table__header-row .tn-table__header-cell:first-child:not(.tn-table__header-cell--sortable:hover),:host(.tn-table--scroll) .tn-table__header-row .tn-table__select-cell+.tn-table__header-cell:not(.tn-table__header-cell--sortable:hover){background-color:var(--tn-topbar)}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2)}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:var(--tn-topbar-hover)}.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,.tn-table__header-cell--sortable:focus-visible .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;background-color:var(--tn-bg2)}.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{box-sizing:border-box;width:var(--tn-table-select-width);padding:0 8px 0 16px;cursor:pointer}.tn-table__expand-cell{box-sizing:border-box;width:var(--tn-table-expand-width);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__actions-cell{width:1%;white-space:nowrap;text-align:right;background-color:inherit;border-left:1px solid var(--tn-lines)}.tn-table__header .tn-table__actions-cell{background-color:var(--tn-topbar)}.tn-table__actions-content{display:inline-flex;align-items:center;gap:4px}.tn-table__loading-overlay{position:absolute;inset:0;z-index:4;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;border-radius:4px}.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}.tn-table__cards-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 12px}.tn-table__cards-selectall{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tn-fg1);cursor:pointer}.tn-table__cards-sort{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--tn-fg2)}.tn-table__cards-sort-select{height:32px;padding:0 8px;border:1px solid var(--tn-lines);border-radius:4px;background-color:var(--tn-bg2);color:var(--tn-fg1);font-size:14px}.tn-table__cards-sort-select:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards-sort-dir{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--tn-lines);border-radius:4px;background:none;color:var(--tn-fg2);cursor:pointer}.tn-table__cards-sort-dir:hover{background-color:var(--tn-alt-bg1)}.tn-table__cards-sort-dir:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards{display:flex;flex-direction:column;gap:8px}.tn-table__card{background-color:var(--tn-bg2);border:1px solid var(--tn-lines);border-radius:6px;padding:12px}.tn-table__card--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333));box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__card--clickable{cursor:pointer}.tn-table__card--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tn-primary)}.tn-table__card--active.tn-table__card--clickable:focus-visible{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__card-header{display:flex;align-items:center;gap:10px}.tn-table__card-select{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}.tn-table__card-title{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--tn-fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-table__card-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.tn-table__card-fields{margin:0;padding:10px 0 0}.tn-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}.tn-table__card-field-label{flex-shrink:0;color:var(--tn-fg2)}.tn-table__card-field-value{margin:0;min-width:0;text-align:right;color:var(--tn-fg1);overflow-wrap:anywhere}.tn-table__card-more[open]>.tn-table__card-more-summary tn-icon{transform:rotate(180deg)}.tn-table__card-more{margin-top:2px}.tn-table__card-more-summary{display:inline-flex;align-items:center;gap:4px;padding:4px 0;font-size:13px;color:var(--tn-fg1);cursor:pointer;list-style:none}.tn-table__card-more-summary::-webkit-details-marker{display:none}.tn-table__card-more-summary tn-icon{transition:transform .2s ease}.tn-table__card-more-summary:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 0;background:none;border:none;color:var(--tn-fg1);font-size:13px;cursor:pointer}.tn-table__card-detail-toggle:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail{margin-top:8px;padding-top:8px;border-top:1px solid var(--tn-lines)}@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__card-more-summary tn-icon,.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 }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", 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 }] }], scrollRegionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollRegionAriaLabel", 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 }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], cardBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBreakpoint", required: false }] }], cardPrimaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPrimaryCount", 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 }] }], rowActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnRowActionsDefDirective), { 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"] }] } });
+        }], 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 }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", required: false }] }], expansionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionKey", 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 }] }], scrollRegionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollRegionAriaLabel", 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 }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], cardBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBreakpoint", required: false }] }], cardPrimaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPrimaryCount", 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 }] }], rowActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnRowActionsDefDirective), { 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.
@@ -27951,7 +28092,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-text, var(--tn-primary, #0074a7));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, var(--tn-red, #bd2626))}.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, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.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;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", "selectionKey", "emptyMessage", "emptyDescription", "emptyIcon", "scrollRegionAriaLabel", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "mobileLayout", "cardBreakpoint", "cardPrimaryCount", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width", "label", "hideLabel", "cardPriority", "cardTitle", "cardHidden", "cardLabel"], 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-text, var(--tn-primary, #0074a7));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, var(--tn-red, #bd2626))}.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, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.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;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", "selectionKey", "expansionKey", "emptyMessage", "emptyDescription", "emptyIcon", "scrollRegionAriaLabel", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "mobileLayout", "cardBreakpoint", "cardPrimaryCount", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width", "label", "hideLabel", "cardPriority", "cardTitle", "cardHidden", "cardLabel"], 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,