@truenas/ui-components 0.1.72 → 0.1.74

package/fesm2022/truenas-ui-components.mjs

@@ -1,8 +1,8 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, ViewContainerRef, output, viewChild, computed, signal, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, HostListener, contentChild, ChangeDetectorRef, TemplateRef, DestroyRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, ViewContainerRef, output, viewChild, computed, signal, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, HostListener, contentChild, ChangeDetectorRef, DestroyRef, TemplateRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
@@ -19,13 +19,13 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/cdk/tree';
+import * as i2 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
 import { map } from 'rxjs/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 /**
@@ -52,20 +52,24 @@ function kebabTestSegment(part) {
  * Normalizes the base — a single token or an array of segments — into a flat
  * segment array and appends the suffixes, producing a value that is itself a
  * valid {@link TnTestIdValue}. This is the canonical "derive a per-child id from
- * a parent base" operation, e.g. a dialog's close button (`[base, 'close']`) or
- * a select's per-option id (`[base, option.label]`). Centralizing it keeps the
- * `string | array` flattening contract in one place rather than re-implemented
- * at each call site.
+ * a parent base" operation, e.g. a select's per-option id
+ * (`[base, option.label]`) or a menu item's id (`[base, item.id]`). Centralizing
+ * it keeps the `string | array` flattening contract in one place rather than
+ * 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.
  *
  * Falsy segments are preserved here (not filtered) so `composeTestId` can apply
- * its own drop/scoping rules — `scopeTestId(undefined, 'close')` yields
- * `[undefined, 'close']`, which `composeTestId('button', …)` renders as the
- * unscoped `button-close`.
+ * its own drop/scoping rules — `scopeTestId(undefined, 'edit')` yields
+ * `[undefined, 'edit']`, which `composeTestId('menu-item', …)` renders as the
+ * unscoped `menu-item-edit`.
  *
  * @example
  * scopeTestId('actions', 'edit')        // ['actions', 'edit']
  * scopeTestId(['menu', 'main'], 'edit') // ['menu', 'main', 'edit']
- * scopeTestId(undefined, 'close')       // [undefined, 'close']
+ * scopeTestId(undefined, 'edit')        // [undefined, 'edit']
  */
 function scopeTestId(base, ...suffix) {
     return [...(Array.isArray(base) ? base : [base]), ...suffix];
@@ -140,6 +144,25 @@ const TN_TEST_ATTR = new InjectionToken('TN_TEST_ATTR', {
     factory: () => 'data-testid',
 });
 
+/**
+ * Apply a composed test-id string to `element`'s `attrName`, removing the
+ * attribute entirely when `composed` is empty (avoids `attr=""`).
+ *
+ * Shared by {@link TnTestIdDirective} and by components that must write the
+ * attribute imperatively because they also read their base back — notably
+ * `tn-table-pager`, where injecting a host directive to read its input signal
+ * is unreliable in the AOT-linked package build. Centralizing the set/remove
+ * branch keeps those write semantics in one place so they can't drift.
+ */
+function writeTestId(renderer, element, attrName, composed) {
+    if (composed) {
+        renderer.setAttribute(element, attrName, composed);
+    }
+    else {
+        renderer.removeAttribute(element, attrName);
+    }
+}
+
 /**
  * Writes a composed `testId` value to whichever attribute name is configured via
  * {@link TN_TEST_ATTR} (default `data-testid`).
@@ -178,13 +201,7 @@ class TnTestIdDirective {
     constructor() {
         effect(() => {
             const composed = composeTestId(this.tnTestIdType(), this.testId());
-            const element = this.host.nativeElement;
-            if (composed) {
-                this.renderer.setAttribute(element, this.attrName, composed);
-            }
-            else {
-                this.renderer.removeAttribute(element, this.attrName);
-            }
+            writeTestId(this.renderer, this.host.nativeElement, this.attrName, composed);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTestIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -5895,6 +5912,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'tn-keyboard-shortcut', standalone: true, imports: [], template: "<span class=\"tn-keyboard-shortcut\" [attr.aria-label]=\"'Keyboard shortcut: ' + displayShortcut()\">\n  @for (key of shortcutKeys(); track $index; let last = $last) {\n    <kbd class=\"tn-key\">{{ key }}</kbd>\n    @if (!last) {\n      <span class=\"tn-key-separator\">{{ separator() || '+' }}</span>\n    }\n  }\n</span>", styles: [".tn-keyboard-shortcut{display:inline-flex;align-items:center;gap:2px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12px;line-height:1}.tn-key{display:inline-block;padding:2px 6px;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ddd);border-radius:3px;font-family:inherit;font-size:inherit;font-weight:500;color:var(--tn-fg2, #666666);text-align:center;min-width:16px;line-height:1.2;box-shadow:0 1px 2px #0000001a}.tn-key-separator{color:var(--tn-fg2, #666666);font-size:10px;font-weight:400;margin:0 1px}\n"] }]
         }], propDecorators: { shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
 
+/**
+ * Injection token for an app-wide {@link TnFormFieldErrorResolver}.
+ *
+ * Because the library ships no localized strings, this is the recommended hook
+ * for wiring a translation service so every `tn-form-field` resolves messages
+ * consistently. Per-field `errorMessages` still take precedence over it.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   {
+ *     provide: TN_FORM_FIELD_ERRORS,
+ *     useFactory: (translate: TranslateService): TnFormFieldErrorResolver =>
+ *       (key, value) => translate.instant(`errors.${key}`, value as object),
+ *     deps: [TranslateService],
+ *   },
+ * ];
+ * ```
+ */
+const TN_FORM_FIELD_ERRORS = new InjectionToken('TN_FORM_FIELD_ERRORS');
+/**
+ * Built-in fallback messages for Angular's standard validators. Used only when
+ * neither a per-field `errorMessages` entry nor a {@link TN_FORM_FIELD_ERRORS}
+ * resolver supplies a message. English-only by design — override the others for
+ * localization.
+ *
+ * @param errorKey   The active validation error key.
+ * @param errorValue The detail Angular stored for that key (e.g.
+ *                   `{ requiredLength: 8 }` for `minlength`). Tolerates malformed
+ *                   shapes so a bad validator can't crash rendering.
+ * @internal
+ */
+function defaultErrorMessage(errorKey, errorValue) {
+    const detail = (errorValue ?? {});
+    switch (errorKey) {
+        case 'required':
+            return 'This field is required';
+        case 'email':
+            return 'Please enter a valid email address';
+        case 'minlength':
+            return detail['requiredLength'] == null
+                ? 'Value is too short'
+                : `Minimum length is ${detail['requiredLength']}`;
+        case 'maxlength':
+            return detail['requiredLength'] == null
+                ? 'Value is too long'
+                : `Maximum length is ${detail['requiredLength']}`;
+        case 'pattern':
+            return 'Please enter a valid format';
+        case 'min':
+            return detail['min'] == null
+                ? 'Value is too small'
+                : `Minimum value is ${detail['min']}`;
+        case 'max':
+            return detail['max'] == null
+                ? 'Value is too large'
+                : `Maximum value is ${detail['max']}`;
+        default:
+            return null;
+    }
+}
+/**
+ * Order in which built-in validator errors are surfaced when a control reports
+ * more than one at once.
+ */
+const BUILT_IN_ERROR_PRIORITY = [
+    'required', 'email', 'minlength', 'maxlength', 'pattern', 'min', 'max',
+];
+/**
+ * Picks which error to display when a control has more than one. Built-in keys
+ * are preferred in {@link BUILT_IN_ERROR_PRIORITY} order; any remaining custom
+ * key falls back to insertion order.
+ *
+ * @internal
+ */
+function activeErrorKey(errors) {
+    for (const key of BUILT_IN_ERROR_PRIORITY) {
+        if (errors[key] != null) {
+            return key;
+        }
+    }
+    return Object.keys(errors)[0] ?? null;
+}
+
 class TnFormFieldComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -5905,62 +6006,123 @@ class TnFormFieldComponent {
     tooltip = input('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
     /** Placement of the tooltip relative to its help icon. */
     tooltipPosition = input('above', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    /**
+     * Per-field overrides for validation messages, keyed by error key. Values may
+     * be a string or a function that receives the error's detail value. Takes
+     * precedence over the app-wide {@link TN_FORM_FIELD_ERRORS} resolver and the
+     * built-in defaults.
+     */
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     control = contentChild(NgControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
-    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
-    errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    destroyRef = inject(DestroyRef);
+    /**
+     * App-wide message resolver, captured once at construction. Unlike the
+     * `errorMessages` input it is not reactive — swapping the provided function at
+     * runtime will not be picked up by an already-created field.
+     */
+    errorResolver = inject(TN_FORM_FIELD_ERRORS, { optional: true });
+    /**
+     * Snapshot of the relevant control state. Updated from the control's status
+     * stream because `NgControl` itself is not signal-based; downstream `computed`s
+     * read this so the derived state stays reactive.
+     */
+    controlState = signal({
+        invalid: false,
+        interacted: false,
+        errors: null,
+    }, ...(ngDevMode ? [{ debugName: "controlState" }] : []));
+    hasError = computed(() => {
+        const state = this.controlState();
+        return state.invalid && state.interacted;
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    errorMessage = computed(() => {
+        const { errors } = this.controlState();
+        return errors ? this.resolveErrorMessage(errors) : '';
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
     ngAfterContentInit() {
         const control = this.control();
         if (control) {
-            // Listen for control status changes
-            control.statusChanges?.subscribe(() => {
-                this.updateErrorState();
+            // Listen for control status changes.
+            // NOTE: `statusChanges` does not emit on touched/pristine-only transitions
+            // (e.g. `markAsTouched()` / `markAllAsTouched()` on blur or submit), so an
+            // error may not surface until the next value/status change. Reacting to
+            // those via `control.control?.events` is tracked as a follow-up.
+            control.statusChanges
+                ?.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.syncControlState();
             });
             // Initial error state check
-            this.updateErrorState();
+            this.syncControlState();
         }
     }
-    updateErrorState() {
+    syncControlState() {
         const control = this.control();
         if (control) {
-            this.hasError.set(!!(control.invalid && (control.dirty || control.touched)));
-            this.errorMessage.set(this.getErrorMessage());
+            this.controlState.set({
+                invalid: !!control.invalid,
+                interacted: !!(control.dirty || control.touched),
+                errors: control.errors ?? null,
+            });
         }
     }
-    getErrorMessage() {
-        const control = this.control();
-        if (!control?.errors) {
-            return '';
-        }
-        const errors = control.errors;
-        // Return the first error message found
-        if (errors['required']) {
-            return 'This field is required';
-        }
-        if (errors['email']) {
-            return 'Please enter a valid email address';
+    /**
+     * Resolves a user-facing message for the active error. Reads the
+     * `errorMessages` input (and the injected resolver), so it is reactive: the
+     * displayed message updates when either the control errors or the overrides
+     * change — e.g. a runtime locale switch.
+     */
+    resolveErrorMessage(errors) {
+        const key = activeErrorKey(errors);
+        if (!key) {
+            return 'Invalid input';
         }
-        if (errors['minlength']) {
-            return `Minimum length is ${errors['minlength'].requiredLength}`;
+        const value = errors[key];
+        // 1. Per-field override (string or factory). A throwing factory must not
+        //    break change detection, so fall through to the next layer instead.
+        const override = this.errorMessages()[key];
+        if (override != null) {
+            const message = this.runGuarded(() => (typeof override === 'function' ? override(value) : override), `errorMessages["${key}"]`);
+            if (message != null) {
+                return message;
+            }
         }
-        if (errors['maxlength']) {
-            return `Maximum length is ${errors['maxlength'].requiredLength}`;
+        // 2. App-wide resolver (e.g. wired to a translation service).
+        const resolved = this.runGuarded(() => this.errorResolver?.(key, value, this.control()?.control ?? null), 'TN_FORM_FIELD_ERRORS resolver');
+        if (resolved != null) {
+            return resolved;
         }
-        if (errors['pattern']) {
-            return 'Please enter a valid format';
+        // 3. Built-in default messages for standard validators.
+        const builtIn = defaultErrorMessage(key, value);
+        if (builtIn != null) {
+            return builtIn;
         }
-        if (errors['min']) {
-            return `Minimum value is ${errors['min'].min}`;
+        // 4. A custom validator that returned its own message string.
+        if (typeof value === 'string') {
+            return value;
         }
-        if (errors['max']) {
-            return `Maximum value is ${errors['max'].max}`;
+        // 5. Last resort: the raw error key.
+        return key;
+    }
+    /**
+     * Runs a caller-supplied message provider, swallowing any throw so a buggy
+     * override or resolver cannot break change detection. Logs in dev mode and
+     * returns null so resolution falls through to the next layer.
+     */
+    runGuarded(provider, context) {
+        try {
+            // Treat a blank message as "no answer" so it falls through to the next
+            // layer instead of hiding the error — e.g. a translation service that
+            // returns '' for a missing key.
+            const message = provider();
+            return message != null && message.trim() !== '' ? message : null;
         }
-        // Return custom error message if the value is a string, otherwise use the key
-        const firstKey = Object.keys(errors)[0];
-        if (firstKey) {
-            const value = errors[firstKey];
-            return typeof value === 'string' ? value : firstKey;
+        catch (error) {
+            if (isDevMode()) {
+                console.error(`[tn-form-field] ${context} threw while resolving a validation message`, error);
+            }
+            return null;
         }
-        return 'Invalid input';
     }
     showError = computed(() => {
         return this.hasError() && !!this.errorMessage();
@@ -5972,12 +6134,12 @@ class TnFormFieldComponent {
         return this.subscriptSizing() === 'fixed' || this.showError() || this.showHint();
     }, ...(ngDevMode ? [{ debugName: "showSubscript" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFormFieldComponent, isStandalone: true, selector: "tn-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"required()\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-field-tooltip\"\n          [attr.aria-label]=\"tooltip()\"\n          [tnTooltip]=\"tooltip()\"\n          [tnTooltipPosition]=\"tooltipPosition()\">\n          <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          aria-live=\"polite\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"], dependencies: [{ kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFormFieldComponent, isStandalone: true, selector: "tn-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"required()\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-field-tooltip\"\n          [attr.aria-label]=\"tooltip()\"\n          [tnTooltip]=\"tooltip()\"\n          [tnTooltipPosition]=\"tooltipPosition()\">\n          <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          aria-live=\"polite\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"], dependencies: [{ kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-form-field', standalone: true, imports: [TnTestIdDirective, TnIconComponent, TnTooltipDirective], template: "<div class=\"tn-form-field\" tnTestIdType=\"form-field\" [tnTestId]=\"testId()\">\n  <!-- Label -->\n  @if (label() || tooltip()) {\n    <div class=\"tn-form-field-label-row\">\n      @if (label()) {\n        <label class=\"tn-form-field-label\" [class.required]=\"required()\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n          }\n        </label>\n      }\n      @if (tooltip()) {\n        <button\n          type=\"button\"\n          class=\"tn-form-field-tooltip\"\n          [attr.aria-label]=\"tooltip()\"\n          [tnTooltip]=\"tooltip()\"\n          [tnTooltipPosition]=\"tooltipPosition()\">\n          <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\n  </div>\n\n  <!-- Hint or Error Message -->\n  @if (showSubscript()) {\n    <div class=\"tn-form-field-subscript\" [class.tn-form-field-subscript-dynamic]=\"subscriptSizing() === 'dynamic'\">\n      @if (showError()) {\n        <div\n          class=\"tn-form-field-error\"\n          role=\"alert\"\n          aria-live=\"polite\">\n          {{ errorMessage() }}\n        </div>\n      }\n      @if (showHint()) {\n        <div class=\"tn-form-field-hint\">\n          {{ hint() }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".tn-form-field{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}.tn-form-field-label{display:block;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-form-field-tooltip:hover,.tn-form-field-tooltip:focus-visible{color:var(--tn-primary, #007bff)}.tn-form-field-tooltip:focus-visible{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;border-radius:50%}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-subscript-dynamic{min-height:0}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with `tn-form-field` in tests.
@@ -8469,12 +8631,22 @@ const TN_TABLE_PAGER_LABELS = new InjectionToken('TN_TABLE_PAGER_LABELS', { prov
  */
 class TnTablePagerComponent {
     destroyRef = inject(DestroyRef);
-    // The pager's `testId` (applied to the host via hostDirectives) also scopes
-    // each child control, so multiple pagers on one page don't collide on
-    // `select-page-size` / `button-first-page`. With a base of `storage` the
-    // children become `select-storage-page-size`, `button-storage-first-page`,
-    // etc.; with no base they stay `select-page-size` / `button-first-page`.
-    testIdDirective = inject(TnTestIdDirective);
+    renderer = inject(Renderer2);
+    hostRef = inject(ElementRef);
+    testAttrName = inject(TN_TEST_ATTR);
+    /**
+     * Semantic base applied to the host (via the `tnTestId` host directive) and
+     * used to scope each child control, so multiple pagers on one page don't
+     * collide on `select-page-size` / `button-first-page`. With a base of
+     * `storage` the children become `select-storage-page-size`,
+     * `button-storage-first-page`, etc.; with no base they stay
+     * `select-page-size` / `button-first-page`.
+     *
+     * The page-size dropdown also scopes each option by its value, so individual
+     * sizes are addressable: `option-page-size-10` / `-20` / `-50` / `-100` (or
+     * `option-storage-page-size-10` under a base).
+     */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     /**
      * Build a child control's test-id base by joining the pager's `testId` with
      * `suffix` into a single string (kebab-joined). Returning a string keeps it
@@ -8482,7 +8654,7 @@ class TnTablePagerComponent {
      * `TnTestIdValue` testId.
      */
     childTestId(suffix) {
-        return scopeTestId(this.testIdDirective.testId(), suffix)
+        return scopeTestId(this.testId(), suffix)
             .filter((part) => part !== null && part !== undefined && part !== '')
             .join('-');
     }
@@ -8588,6 +8760,15 @@ class TnTablePagerComponent {
     constructor() {
         const provided = inject(TN_TABLE_PAGER_LABELS);
         this.defaultLabels = isSignal(provided) ? provided : signal(provided).asReadonly();
+        // Write the pager's own test-id to the host. We write it imperatively rather
+        // than applying `TnTestIdDirective` via `hostDirectives`: the pager also needs
+        // to read this base back (see `childTestId`), and injecting a host directive
+        // to read its input signal is unreliable in the AOT-linked package build. The
+        // set/remove semantics are shared with the directive via `writeTestId`.
+        effect(() => {
+            const composed = composeTestId(undefined, this.testId());
+            writeTestId(this.renderer, this.hostRef.nativeElement, this.testAttrName, composed);
+        });
         // Re-bind when the dataProvider reference changes (including swap to a
         // different instance or clearing back to undefined). `untracked` keeps the
         // provider's imperative reads out of the reactive graph so this effect only
@@ -8702,16 +8883,16 @@ class TnTablePagerComponent {
         provider.setPagination(pagination);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-table-pager', standalone: true, imports: [FormsModule, TnIconButtonComponent, TnSelectComponent, TnTestIdDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'tn-table-pager', standalone: true, imports: [FormsModule, TnIconButtonComponent, TnSelectComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'tn-table-pager',
                         'role': 'navigation',
                         '[attr.aria-label]': 'resolvedTablePaginationLabel()',
-                    }, hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], ofLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], tablePaginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginationLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+                    }, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], ofLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], tablePaginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginationLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
 
 /**
  * Harness for interacting with `tn-table-pager` in tests.
@@ -8866,7 +9047,7 @@ class TnTreeComponent extends CdkTree {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeComponent, isStandalone: true, selector: "tn-tree", host: { attributes: { "role": "tree" }, classAttribute: "tn-tree" }, providers: [
             { provide: CdkTree, useExisting: TnTreeComponent }
-        ], exportAs: ["tnTree"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<ng-container cdkTreeNodeOutlet />", styles: [":host{display:block;width:100%}.tn-tree{width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2$1.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["tnTree"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<ng-container cdkTreeNodeOutlet />", styles: [":host{display:block;width:100%}.tn-tree{width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeComponent, decorators: [{
             type: Component,
@@ -8897,7 +9078,7 @@ class TnTreeNodeComponent extends CdkTreeNode {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTreeNodeComponent, isStandalone: true, selector: "tn-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-tree-node-wrapper" }, providers: [
             { provide: CdkTreeNode, useExisting: TnTreeNodeComponent }
-        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2$1.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, decorators: [{
             type: Component,
@@ -8913,7 +9094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 class TnTreeNodeOutletDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeNodeOutletDirective, isStandalone: true, selector: "[tnTreeNodeOutlet]", hostDirectives: [{ directive: i2$1.CdkTreeNodeOutlet }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeNodeOutletDirective, isStandalone: true, selector: "[tnTreeNodeOutlet]", hostDirectives: [{ directive: i2.CdkTreeNodeOutlet }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, decorators: [{
             type: Directive,
@@ -8978,7 +9159,7 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnNestedTreeNodeComponent, isStandalone: true, selector: "tn-nested-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-nested-tree-node-wrapper" }, providers: [
             { provide: CdkNestedTreeNode, useExisting: TnNestedTreeNodeComponent },
             { provide: CdkTreeNode, useExisting: TnNestedTreeNodeComponent }
-        ], exportAs: ["tnNestedTreeNode"], usesInheritance: true, ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\n      <tn-icon\n        library=\"mdi\"\n        size=\"sm\"\n        style=\"transition: transform 0.2s ease;\"\n        [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n    </button>\n  }\n\n  <!-- Spacer for non-expandable nodes to maintain alignment -->\n  @if (!isExpandable) {\n    <div class=\"tn-nested-tree-node__spacer\"></div>\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2$1.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnNestedTreeNode"], usesInheritance: true, ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\n      <tn-icon\n        library=\"mdi\"\n        size=\"sm\"\n        style=\"transition: transform 0.2s ease;\"\n        [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n    </button>\n  }\n\n  <!-- Spacer for non-expandable nodes to maintain alignment -->\n  @if (!isExpandable) {\n    <div class=\"tn-nested-tree-node__spacer\"></div>\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnNestedTreeNodeComponent, decorators: [{
             type: Component,
@@ -11477,7 +11658,7 @@ class TnTimeInputComponent {
                 useExisting: forwardRef(() => TnTimeInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
+        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTimeInputComponent, decorators: [{
             type: Component,
@@ -12408,14 +12589,32 @@ class TnDialogShellComponent {
     /**
      * Optional semantic base that scopes the shell's chrome buttons. The close
      * and fullscreen buttons emit `button-close` / `button-fullscreen` by default,
-     * or `button-<testId>-close` / `-fullscreen` when a base is provided (useful
-     * when more than one dialog can be open).
+     * or `button-close-<testId>` / `button-fullscreen-<testId>` when a base is
+     * provided (useful when more than one dialog can be open).
      */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
-    /** Scoped test-id segments for the close button (`button-[<base>-]close`). */
-    closeTestId = computed(() => scopeTestId(this.testId(), 'close'), ...(ngDevMode ? [{ debugName: "closeTestId" }] : []));
-    /** Scoped test-id segments for the fullscreen button (`button-[<base>-]fullscreen`). */
-    fullscreenTestId = computed(() => scopeTestId(this.testId(), 'fullscreen'), ...(ngDevMode ? [{ debugName: "fullscreenTestId" }] : []));
+    /**
+     * The `testId` base normalized to a flat segment array. Nothing is dropped
+     * here — `composeTestId` (via the `[tnTestId]` directive) filters falsy
+     * segments, so an unset base collapses to the bare role (`button-close`).
+     */
+    baseSegments = computed(() => {
+        const base = this.testId();
+        return Array.isArray(base) ? base : [base];
+    }, ...(ngDevMode ? [{ debugName: "baseSegments" }] : []));
+    /**
+     * Role-first test-id segments for the close button: `button-close[-<base>]`.
+     *
+     * The close and fullscreen buttons are fixed dialog chrome, not content
+     * children, so the role leads rather than the base (content children are
+     * base-first via `scopeTestId`). This keeps every dialog's close button under
+     * a shared `button-close-*` prefix — it matches webui's established
+     * close-button ids and lets automation target "all close buttons" with one
+     * selector.
+     */
+    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" }] : []));
     /** Stable id for the title heading, referenced by the dialog's aria-labelledby. */
     titleId = `tn-dialog-title-${nextUniqueId++}`;
     isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
@@ -14978,5 +15177,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, kebabTestSegment, libIconMarker, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, kebabTestSegment, libIconMarker, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map