@truenas/ui-components 0.7.6 → 0.7.8

package/fesm2022/truenas-ui-components.mjs

@@ -369,8 +369,8 @@ function kebabTestSegment(part) {
  * re-implemented at each call site.
  *
  * Note this is *base-first*: the suffix trails the base. Fixed chrome whose role
- * should lead (e.g. `tn-dialog-shell`'s `button-close-<base>`) prepends the role
- * manually instead of calling this.
+ * should lead (e.g. `tn-dialog-shell`'s `button-close-<base>` and
+ * `dialog-title-<base>`) prepends the role manually instead of calling this.
  *
  * Falsy segments are preserved here (not filtered) so `composeTestId` can apply
  * its own drop/scoping rules — `scopeTestId(undefined, 'edit')` yields
@@ -4342,6 +4342,16 @@ class TnBannerComponent {
     message = input(undefined, ...(ngDevMode ? [{ debugName: "message" }] : []));
     type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
     bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
+    /**
+     * Semantic base for the banner's test id, rendered onto the banner root as
+     * `banner-<testId>` through {@link TnTestIdDirective} — so the value follows
+     * the library's own naming and honours `TN_TEST_ATTR`.
+     *
+     * The root, rather than the host element, because that is what carries the
+     * live-region role: the element a test asserts a warning on is the same one
+     * assistive tech announces.
+     */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     constructor() {
         this.registerMdiIcons();
     }
@@ -4397,12 +4407,12 @@ class TnBannerComponent {
         return result;
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnBannerComponent, isStandalone: true, selector: "tn-banner", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actionContent", predicate: TnBannerActionDirective, isSignal: true }], ngImport: i0, template: "<!--\n  `ariaRole()` is the only thing declaring how urgently the banner announces:\n  it implies the politeness, and an explicit `aria-live` here would override it\n  \u2014 which is what the static `aria-live=\"polite\"` used to do, downgrading the\n  two types deliberately made assertive. See `../a11y/live-region.ts`.\n-->\n<div\n  [ngClass]=\"classes()\"\n  [attr.role]=\"ariaRole()\"\n>\n  @if (hasStructuredContent()) {\n    <div class=\"tn-banner__main\">\n      <div class=\"tn-banner__icon\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"md\"\n          aria-hidden=\"true\"\n          [name]=\"iconName()\"\n        />\n      </div>\n\n      <div class=\"tn-banner__content\">\n        @if (heading()) {\n          <div class=\"tn-banner__heading\">\n            {{ heading() }}\n          </div>\n        }\n\n        @if (message()) {\n          <div class=\"tn-banner__message\">\n            {{ message() }}\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <div class=\"tn-banner__main\">\n      <ng-content />\n    </div>\n  }\n\n  @if (hasAction()) {\n    <div class=\"tn-banner__action\">\n      <ng-content select=\"[tnBannerAction]\" />\n    </div>\n  }\n</div>\n", styles: [".tn-banner{display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnBannerComponent, isStandalone: true, selector: "tn-banner", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actionContent", predicate: TnBannerActionDirective, isSignal: true }], ngImport: i0, template: "<!--\n  `ariaRole()` is the only thing declaring how urgently the banner announces:\n  it implies the politeness, and an explicit `aria-live` here would override it\n  \u2014 which is what the static `aria-live=\"polite\"` used to do, downgrading the\n  two types deliberately made assertive. See `../a11y/live-region.ts`.\n-->\n<div\n  tnTestIdType=\"banner\"\n  [ngClass]=\"classes()\"\n  [attr.role]=\"ariaRole()\"\n  [tnTestId]=\"testId()\"\n>\n  @if (hasStructuredContent()) {\n    <div class=\"tn-banner__main\">\n      <div class=\"tn-banner__icon\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"md\"\n          aria-hidden=\"true\"\n          [name]=\"iconName()\"\n        />\n      </div>\n\n      <div class=\"tn-banner__content\">\n        @if (heading()) {\n          <div class=\"tn-banner__heading\">\n            {{ heading() }}\n          </div>\n        }\n\n        @if (message()) {\n          <div class=\"tn-banner__message\">\n            {{ message() }}\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <div class=\"tn-banner__main\">\n      <ng-content />\n    </div>\n  }\n\n  @if (hasAction()) {\n    <div class=\"tn-banner__action\">\n      <ng-content select=\"[tnBannerAction]\" />\n    </div>\n  }\n</div>\n", styles: [".tn-banner{display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-banner', standalone: true, imports: [CommonModule, TnIconComponent], template: "<!--\n  `ariaRole()` is the only thing declaring how urgently the banner announces:\n  it implies the politeness, and an explicit `aria-live` here would override it\n  \u2014 which is what the static `aria-live=\"polite\"` used to do, downgrading the\n  two types deliberately made assertive. See `../a11y/live-region.ts`.\n-->\n<div\n  [ngClass]=\"classes()\"\n  [attr.role]=\"ariaRole()\"\n>\n  @if (hasStructuredContent()) {\n    <div class=\"tn-banner__main\">\n      <div class=\"tn-banner__icon\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"md\"\n          aria-hidden=\"true\"\n          [name]=\"iconName()\"\n        />\n      </div>\n\n      <div class=\"tn-banner__content\">\n        @if (heading()) {\n          <div class=\"tn-banner__heading\">\n            {{ heading() }}\n          </div>\n        }\n\n        @if (message()) {\n          <div class=\"tn-banner__message\">\n            {{ message() }}\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <div class=\"tn-banner__main\">\n      <ng-content />\n    </div>\n  }\n\n  @if (hasAction()) {\n    <div class=\"tn-banner__action\">\n      <ng-content select=\"[tnBannerAction]\" />\n    </div>\n  }\n</div>\n", styles: [".tn-banner{display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnBannerActionDirective), { isSignal: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+            args: [{ selector: 'tn-banner', standalone: true, imports: [CommonModule, TnIconComponent, TnTestIdDirective], template: "<!--\n  `ariaRole()` is the only thing declaring how urgently the banner announces:\n  it implies the politeness, and an explicit `aria-live` here would override it\n  \u2014 which is what the static `aria-live=\"polite\"` used to do, downgrading the\n  two types deliberately made assertive. See `../a11y/live-region.ts`.\n-->\n<div\n  tnTestIdType=\"banner\"\n  [ngClass]=\"classes()\"\n  [attr.role]=\"ariaRole()\"\n  [tnTestId]=\"testId()\"\n>\n  @if (hasStructuredContent()) {\n    <div class=\"tn-banner__main\">\n      <div class=\"tn-banner__icon\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"md\"\n          aria-hidden=\"true\"\n          [name]=\"iconName()\"\n        />\n      </div>\n\n      <div class=\"tn-banner__content\">\n        @if (heading()) {\n          <div class=\"tn-banner__heading\">\n            {{ heading() }}\n          </div>\n        }\n\n        @if (message()) {\n          <div class=\"tn-banner__message\">\n            {{ message() }}\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <div class=\"tn-banner__main\">\n      <ng-content />\n    </div>\n  }\n\n  @if (hasAction()) {\n    <div class=\"tn-banner__action\">\n      <ng-content select=\"[tnBannerAction]\" />\n    </div>\n  }\n</div>\n", styles: [".tn-banner{display:grid;gap:8px;align-items:center;padding:16px;border-radius:6px;border-left:4px solid;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){.tn-banner{transition:none}}.tn-banner--info{border-left-color:var(--tn-info, var(--tn-blue, #006997));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--info .tn-banner__heading,.tn-banner--info .tn-banner__icon{color:var(--tn-info, var(--tn-blue, #006997))}.tn-banner--warning{border-left-color:var(--tn-warning, var(--tn-orange, #955313));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--warning .tn-banner__heading,.tn-banner--warning .tn-banner__icon{color:var(--tn-warning, var(--tn-orange, #955313))}.tn-banner--error{border-left-color:var(--tn-error, var(--tn-red, #bd2626));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--error .tn-banner__heading,.tn-banner--error .tn-banner__icon{color:var(--tn-error, var(--tn-red, #bd2626))}.tn-banner--success{border-left-color:var(--tn-success, var(--tn-green, #416f26));background-color:var(--tn-alt-bg1, #383838)}.tn-banner--success .tn-banner__heading,.tn-banner--success .tn-banner__icon{color:var(--tn-success, var(--tn-green, #416f26))}.tn-banner--bordered{border-top:1px solid var(--tn-lines, #404040);border-right:1px solid var(--tn-lines, #404040);border-bottom:1px solid var(--tn-lines, #404040)}.tn-banner__main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.tn-banner__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.tn-banner__content{flex:1;min-width:0}.tn-banner__heading{font-size:1rem;font-weight:600;line-height:1.5;margin:0}.tn-banner__message{font-size:1rem;color:var(--tn-fg2, #6b7280);line-height:1.5;margin-top:4px}.tn-banner__action{display:flex;align-items:center;gap:8px 16px;justify-content:flex-end}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnBannerActionDirective), { isSignal: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
 
 /**
  * Harness for a single action projected into a `tn-banner`'s action slot.
@@ -17737,6 +17747,36 @@ class TnTableComponent {
      * `rowKey = (row: Job) => row.id` on the host.
      */
     expansionKey = input(undefined, ...(ngDevMode ? [{ debugName: "expansionKey" }] : []));
+    /**
+     * Test id for each ROW, as a function of the row and its index.
+     *
+     * The table writes no id on a `<tr>` of its own, and a cell body is free to be bare
+     * interpolation — `{{ row.username }}` renders no element the consumer can bind to. A list
+     * built that way is unaddressable: an automated suite that has to open, select or delete one
+     * specific row has nothing to select it by but position or cell text, both of which change
+     * under the test. Set this and every row carries `row-<base>` on the `<tr>`, and on its card
+     * in card mode, through the same {@link TnTestIdDirective} as every other id the library
+     * emits — so it honours {@link TN_TEST_ATTR} and is kebab-cased by {@link composeTestId}.
+     *
+     * Pass the base only, not the `row-` prefix, and identify the ROW rather than its position,
+     * the way {@link selectionKey} and {@link expansionKey} do — an index-derived id renames every
+     * row below the one that was deleted. The index is passed for the case where the data genuinely
+     * has nothing unique in it.
+     *
+     * Bind a stable member rather than writing the function in the template, since Angular's
+     * expression grammar has no arrow functions:
+     * `[rowTestId]="rowTestId"` for a `rowTestId = (row: User) => row.username` on the host.
+     *
+     * ```html
+     * <tn-table [dataSource]="users" [rowTestId]="rowTestId" />
+     * <!-- <tr data-testid="row-jane-doe"> -->
+     * ```
+     *
+     * Cells are not covered by this: a suite that has to read one cell of a row still needs an id
+     * on the element that cell renders. Tagging the row is what makes the row itself reachable —
+     * which is the part a consumer cannot add from the outside.
+     */
+    rowTestId = input(undefined, ...(ngDevMode ? [{ debugName: "rowTestId" }] : []));
     emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
     /**
      * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
@@ -18303,6 +18343,19 @@ class TnTableComponent {
         }
         return source?.data ?? source?.connect?.() ?? [];
     }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * The resolved base for each row, by index.
+     *
+     * Computed once per `data()` change rather than called per row per change-detection pass: a
+     * base is usually an array, every call builds a new one, and a new reference restarts the
+     * directive's effect — so binding the call directly would rewrite every row's attribute on
+     * every pass. Recomputing here on the signal the rows are rendered from keeps the value
+     * identical between passes, and correct after a reload hands back new row objects.
+     */
+    rowTestIds = computed(() => {
+        const resolve = this.rowTestId();
+        return resolve ? this.data().map((row, index) => resolve(row, index)) : [];
+    }, ...(ngDevMode ? [{ debugName: "rowTestIds" }] : []));
     effectiveDisplayedColumns = computed(() => {
         const cols = [...this.displayedColumns()];
         if (this.selectable()) {
@@ -19003,7 +19056,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 }, 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: [
+    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 }, rowTestId: { classPropertyName: "rowTestId", publicName: "rowTestId", 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        tnTestIdType=\"row\"\n        [tnTestId]=\"rowTestIds()[rowIdx]\"\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          tnTestIdType=\"row\"\n          [tnTestId]=\"rowTestIds()[rowIdx]\"\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"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
                 state('expanded', style({ height: '*' })),
@@ -19013,7 +19066,14 @@ class TnTableComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-table', standalone: true, imports: [CommonModule, TnCheckboxComponent, TnEmptyComponent, TnIconComponent, TnSpinnerComponent], animations: [
+            args: [{ selector: 'tn-table', standalone: true, imports: [
+                        CommonModule,
+                        TnCheckboxComponent,
+                        TnEmptyComponent,
+                        TnIconComponent,
+                        TnSpinnerComponent,
+                        TnTestIdDirective,
+                    ], animations: [
                         trigger('detailExpand', [
                             state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
                             state('expanded', style({ height: '*' })),
@@ -19039,8 +19099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.tabindex]': 'scrollKeyboardReachable() ? "0" : null',
                         '[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 }] }], 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"] }] } });
+                    }, 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        tnTestIdType=\"row\"\n        [tnTestId]=\"rowTestIds()[rowIdx]\"\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          tnTestIdType=\"row\"\n          [tnTestId]=\"rowTestIds()[rowIdx]\"\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 }] }], expansionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionKey", required: false }] }], rowTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTestId", 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.
@@ -19419,6 +19479,23 @@ class TnTableHarness extends ComponentHarness {
         return overlay !== null;
     }
     // --- Active row ---
+    /**
+     * Gets the test id written on a data row by `[rowTestId]`.
+     *
+     * Layout-aware, like the rest of the row queries: reads the card in the card layout, which
+     * carries the same id. Reads `data-testid` first and falls through to `data-test`, so it
+     * answers the same either way the consumer configured `TN_TEST_ATTR`.
+     *
+     * @param rowIndex Zero-based index of the data row (or card).
+     * @returns Promise resolving to the row's test id, or null when `[rowTestId]` is unset.
+     */
+    async getRowTestId(rowIndex) {
+        const selector = (await this.isCards())
+            ? `.tn-table__card[data-row-index="${rowIndex}"]`
+            : `.tn-table__row[data-row-index="${rowIndex}"]`;
+        const row = await this.locatorFor(selector)();
+        return (await row.getAttribute('data-testid')) ?? (await row.getAttribute('data-test'));
+    }
     /**
      * Checks if a data row is currently marked active.
      *
@@ -26341,9 +26418,10 @@ class TnDialogShellComponent {
     /** Hide the actions footer. Same wrapper-case rationale as {@link hideContent}. */
     hideActions = input(false, ...(ngDevMode ? [{ debugName: "hideActions" }] : []));
     /**
-     * Optional semantic base that scopes the shell's chrome buttons. The close
-     * and fullscreen buttons emit `button-close` / `button-fullscreen` by default,
-     * or `button-close-<testId>` / `button-fullscreen-<testId>` when a base is
+     * Optional semantic base that scopes the shell's chrome. The close and
+     * fullscreen buttons emit `button-close` / `button-fullscreen` by default, and
+     * the title heading `dialog-title`, or `button-close-<testId>` /
+     * `button-fullscreen-<testId>` / `dialog-title-<testId>` when a base is
      * provided (useful when more than one dialog can be open).
      */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
@@ -26385,6 +26463,19 @@ class TnDialogShellComponent {
     closeTestId = computed(() => ['close', ...this.baseSegments()], ...(ngDevMode ? [{ debugName: "closeTestId" }] : []));
     /** Role-first test-id segments for the fullscreen button: `button-fullscreen[-<base>]`. */
     fullscreenTestId = computed(() => ['fullscreen', ...this.baseSegments()], ...(ngDevMode ? [{ debugName: "fullscreenTestId" }] : []));
+    /**
+     * Role-first test-id segments for the title heading: `dialog-title[-<base>]`.
+     *
+     * The heading is fixed chrome like the two buttons, so it follows the same
+     * role-first shape — and a test that knows a dialog's base knows its title's
+     * id without being told separately, which is the point: dialogs raised
+     * through one generic error path are otherwise indistinguishable by id, and
+     * the only remaining handle is a match on their prose.
+     *
+     * There is no id when there is no title: the heading is not rendered at all
+     * (see the template), so nothing is left behind to select.
+     */
+    titleTestId = computed(() => ['title', ...this.baseSegments()], ...(ngDevMode ? [{ debugName: "titleTestId" }] : []));
     /** Stable id for the title heading, referenced by the dialog's aria-labelledby. */
     titleId = `tn-dialog-title-${nextUniqueId++}`;
     isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
@@ -26527,13 +26618,13 @@ class TnDialogShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialogShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnDialogShellComponent, isStandalone: true, selector: "tn-dialog-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showFullscreenButton: { classPropertyName: "showFullscreenButton", publicName: "showFullscreenButton", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, hideContent: { classPropertyName: "hideContent", publicName: "hideContent", isSignal: true, isRequired: false, transformFunction: null }, hideActions: { classPropertyName: "hideActions", publicName: "hideActions", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tn-dialog-shell" }, ngImport: i0, template: "<header class=\"tn-dialog__header\">\n  <!--\n    No heading element at all when there is no title, rather than an empty one:\n    an `<h2>` with no text is an `empty-heading` violation, and it puts a level-2\n    heading with nothing in it into the document outline (#219). The dialog is\n    then named by `ariaLabel`/`ariaLabelledby` instead \u2014 see the component.\n  -->\n  @if (hasTitle()) {\n    <h2 class=\"tn-dialog__title\" [id]=\"titleId\">{{ title() }}</h2>\n  }\n  @if (showFullscreenButton()) {\n    <!--\n      `data-fullscreen` is the language-independent state hook `TnDialogHarness.isFullscreen()`\n      reads. The state is also on the panel's `.tn-dialog--fullscreen` class, but the panel is an\n      ANCESTOR of this component's host \u2014 out of reach for a harness locator, and ambiguous while\n      more than one dialog is open. `aria-label` is not the hook: it is now DI-configurable, so a\n      translated app would flip the harness's answer. Same call the table's sort-direction toggle\n      makes, for the same reason (see `data-sort-direction`).\n    -->\n    <button\n      type=\"button\"\n      class=\"tn-dialog__fullscreen\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"fullscreenTestId()\"\n      [attr.aria-label]=\"fullscreenLabel()\"\n      [attr.data-fullscreen]=\"isFullscreen()\"\n      (click)=\"toggleFullscreen()\">\n      <span class=\"tn-dialog__fullscreen-icon\" aria-hidden=\"true\">{{ isFullscreen() ? '\u2913' : '\u2922' }}</span>\n    </button>\n  }\n  @if (showCloseButton()) {\n    <button type=\"button\" class=\"tn-dialog__close\" tnTestIdType=\"button\" [attr.aria-label]=\"labels().close\" [tnTestId]=\"closeTestId()\" (click)=\"close()\">\n      <span class=\"tn-dialog__close-icon\" aria-hidden=\"true\">\u2715</span>\n    </button>\n  }\n</header>\n\n<section class=\"tn-dialog__content\" cdkDialogContent [class.tn-dialog__content--hidden]=\"hideContent()\">\n  <ng-content />\n</section>\n\n<footer class=\"tn-dialog__actions\" cdkDialogActions [class.tn-dialog__actions--hidden]=\"hideActions()\">\n  <ng-content select=\"[tnDialogAction]\" />\n</footer>\n", dependencies: [{ kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnDialogShellComponent, isStandalone: true, selector: "tn-dialog-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showFullscreenButton: { classPropertyName: "showFullscreenButton", publicName: "showFullscreenButton", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, hideContent: { classPropertyName: "hideContent", publicName: "hideContent", isSignal: true, isRequired: false, transformFunction: null }, hideActions: { classPropertyName: "hideActions", publicName: "hideActions", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tn-dialog-shell" }, ngImport: i0, template: "<header class=\"tn-dialog__header\">\n  <!--\n    No heading element at all when there is no title, rather than an empty one:\n    an `<h2>` with no text is an `empty-heading` violation, and it puts a level-2\n    heading with nothing in it into the document outline (#219). The dialog is\n    then named by `ariaLabel`/`ariaLabelledby` instead \u2014 see the component. Nothing\n    renders, so an untitled dialog also leaves no `dialog-title-*` id behind.\n  -->\n  @if (hasTitle()) {\n    <h2 class=\"tn-dialog__title\" tnTestIdType=\"dialog\" [id]=\"titleId\" [tnTestId]=\"titleTestId()\">{{ title() }}</h2>\n  }\n  @if (showFullscreenButton()) {\n    <!--\n      `data-fullscreen` is the language-independent state hook `TnDialogHarness.isFullscreen()`\n      reads. The state is also on the panel's `.tn-dialog--fullscreen` class, but the panel is an\n      ANCESTOR of this component's host \u2014 out of reach for a harness locator, and ambiguous while\n      more than one dialog is open. `aria-label` is not the hook: it is now DI-configurable, so a\n      translated app would flip the harness's answer. Same call the table's sort-direction toggle\n      makes, for the same reason (see `data-sort-direction`).\n    -->\n    <button\n      type=\"button\"\n      class=\"tn-dialog__fullscreen\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"fullscreenTestId()\"\n      [attr.aria-label]=\"fullscreenLabel()\"\n      [attr.data-fullscreen]=\"isFullscreen()\"\n      (click)=\"toggleFullscreen()\">\n      <span class=\"tn-dialog__fullscreen-icon\" aria-hidden=\"true\">{{ isFullscreen() ? '\u2913' : '\u2922' }}</span>\n    </button>\n  }\n  @if (showCloseButton()) {\n    <button type=\"button\" class=\"tn-dialog__close\" tnTestIdType=\"button\" [attr.aria-label]=\"labels().close\" [tnTestId]=\"closeTestId()\" (click)=\"close()\">\n      <span class=\"tn-dialog__close-icon\" aria-hidden=\"true\">\u2715</span>\n    </button>\n  }\n</header>\n\n<section class=\"tn-dialog__content\" cdkDialogContent [class.tn-dialog__content--hidden]=\"hideContent()\">\n  <ng-content />\n</section>\n\n<footer class=\"tn-dialog__actions\" cdkDialogActions [class.tn-dialog__actions--hidden]=\"hideActions()\">\n  <ng-content select=\"[tnDialogAction]\" />\n</footer>\n", dependencies: [{ kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialogShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-dialog-shell', standalone: true, imports: [TnTestIdDirective], host: {
                         'class': 'tn-dialog-shell'
-                    }, template: "<header class=\"tn-dialog__header\">\n  <!--\n    No heading element at all when there is no title, rather than an empty one:\n    an `<h2>` with no text is an `empty-heading` violation, and it puts a level-2\n    heading with nothing in it into the document outline (#219). The dialog is\n    then named by `ariaLabel`/`ariaLabelledby` instead \u2014 see the component.\n  -->\n  @if (hasTitle()) {\n    <h2 class=\"tn-dialog__title\" [id]=\"titleId\">{{ title() }}</h2>\n  }\n  @if (showFullscreenButton()) {\n    <!--\n      `data-fullscreen` is the language-independent state hook `TnDialogHarness.isFullscreen()`\n      reads. The state is also on the panel's `.tn-dialog--fullscreen` class, but the panel is an\n      ANCESTOR of this component's host \u2014 out of reach for a harness locator, and ambiguous while\n      more than one dialog is open. `aria-label` is not the hook: it is now DI-configurable, so a\n      translated app would flip the harness's answer. Same call the table's sort-direction toggle\n      makes, for the same reason (see `data-sort-direction`).\n    -->\n    <button\n      type=\"button\"\n      class=\"tn-dialog__fullscreen\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"fullscreenTestId()\"\n      [attr.aria-label]=\"fullscreenLabel()\"\n      [attr.data-fullscreen]=\"isFullscreen()\"\n      (click)=\"toggleFullscreen()\">\n      <span class=\"tn-dialog__fullscreen-icon\" aria-hidden=\"true\">{{ isFullscreen() ? '\u2913' : '\u2922' }}</span>\n    </button>\n  }\n  @if (showCloseButton()) {\n    <button type=\"button\" class=\"tn-dialog__close\" tnTestIdType=\"button\" [attr.aria-label]=\"labels().close\" [tnTestId]=\"closeTestId()\" (click)=\"close()\">\n      <span class=\"tn-dialog__close-icon\" aria-hidden=\"true\">\u2715</span>\n    </button>\n  }\n</header>\n\n<section class=\"tn-dialog__content\" cdkDialogContent [class.tn-dialog__content--hidden]=\"hideContent()\">\n  <ng-content />\n</section>\n\n<footer class=\"tn-dialog__actions\" cdkDialogActions [class.tn-dialog__actions--hidden]=\"hideActions()\">\n  <ng-content select=\"[tnDialogAction]\" />\n</footer>\n" }]
+                    }, template: "<header class=\"tn-dialog__header\">\n  <!--\n    No heading element at all when there is no title, rather than an empty one:\n    an `<h2>` with no text is an `empty-heading` violation, and it puts a level-2\n    heading with nothing in it into the document outline (#219). The dialog is\n    then named by `ariaLabel`/`ariaLabelledby` instead \u2014 see the component. Nothing\n    renders, so an untitled dialog also leaves no `dialog-title-*` id behind.\n  -->\n  @if (hasTitle()) {\n    <h2 class=\"tn-dialog__title\" tnTestIdType=\"dialog\" [id]=\"titleId\" [tnTestId]=\"titleTestId()\">{{ title() }}</h2>\n  }\n  @if (showFullscreenButton()) {\n    <!--\n      `data-fullscreen` is the language-independent state hook `TnDialogHarness.isFullscreen()`\n      reads. The state is also on the panel's `.tn-dialog--fullscreen` class, but the panel is an\n      ANCESTOR of this component's host \u2014 out of reach for a harness locator, and ambiguous while\n      more than one dialog is open. `aria-label` is not the hook: it is now DI-configurable, so a\n      translated app would flip the harness's answer. Same call the table's sort-direction toggle\n      makes, for the same reason (see `data-sort-direction`).\n    -->\n    <button\n      type=\"button\"\n      class=\"tn-dialog__fullscreen\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"fullscreenTestId()\"\n      [attr.aria-label]=\"fullscreenLabel()\"\n      [attr.data-fullscreen]=\"isFullscreen()\"\n      (click)=\"toggleFullscreen()\">\n      <span class=\"tn-dialog__fullscreen-icon\" aria-hidden=\"true\">{{ isFullscreen() ? '\u2913' : '\u2922' }}</span>\n    </button>\n  }\n  @if (showCloseButton()) {\n    <button type=\"button\" class=\"tn-dialog__close\" tnTestIdType=\"button\" [attr.aria-label]=\"labels().close\" [tnTestId]=\"closeTestId()\" (click)=\"close()\">\n      <span class=\"tn-dialog__close-icon\" aria-hidden=\"true\">\u2715</span>\n    </button>\n  }\n</header>\n\n<section class=\"tn-dialog__content\" cdkDialogContent [class.tn-dialog__content--hidden]=\"hideContent()\">\n  <ng-content />\n</section>\n\n<footer class=\"tn-dialog__actions\" cdkDialogActions [class.tn-dialog__actions--hidden]=\"hideActions()\">\n  <ng-content select=\"[tnDialogAction]\" />\n</footer>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showFullscreenButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullscreenButton", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], hideContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideContent", required: false }] }], hideActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideActions", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }] } });
 
 class TnConfirmDialogComponent {
@@ -28092,7 +28183,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", "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" }] });
+    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", "rowTestId", "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,