@truenas/ui-components 0.1.68 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, InjectionToken, Signal, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { OnDestroy, ElementRef, InjectionToken, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, Signal, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, HarnessLoader } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
@@ -11,7 +11,7 @@ import * as i1 from '@angular/cdk/tree';
 import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
 import { Overlay } from '@angular/cdk/overlay';
-import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { DialogRef, DialogConfig } from '@angular/cdk/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 
 declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccessor, OnDestroy {
@@ -289,6 +289,113 @@ interface AutocompleteHarnessFilters extends BaseHarnessFilters {
     placeholder?: string;
 }
 
+/**
+ * Value shapes accepted as a test-id base.
+ *
+ * A consumer supplies the *semantic* part of a test id — a single token
+ * (`'save'`, `'username'`) or an ordered list of segments
+ * (`['username', option.value]`). The library owns the element-type prefix and
+ * the final string assembly; consumers never hand-craft the full id.
+ */
+type TnTestIdValue = string | number | (string | number | null | undefined)[] | null | undefined;
+/**
+ * Normalize one segment to a kebab-case token: split camelCase, lower-case,
+ * collapse any run of non-alphanumeric characters to a single hyphen, and trim
+ * leading/trailing hyphens.
+ *
+ * Mirrors the normalization webui's legacy `ixTest` directive applied via
+ * lodash `kebabCase`, so migrated values stay stable (`sshPort` → `ssh-port`,
+ * `addr_trtype` → `addr-trtype`, `'My Label'` → `my-label`).
+ */
+declare function kebabTestSegment(part: string | number): string;
+/**
+ * Compose the canonical test-id string: `${type}-${...segments}`.
+ *
+ * - `type` is the element-type prefix the component declares (e.g. `'button'`,
+ *   `'option'`, `'menu-item'`). Pass `null`/`undefined` for no prefix.
+ * - `value` is the consumer-provided base — a single token or an array of
+ *   segments (used to scope dynamic/repeated children, e.g. `[base, item.id]`).
+ *
+ * Falsy/empty parts are dropped, every part is kebab-normalized, and parts are
+ * joined with `-`. Returns `''` when nothing usable remains — callers treat
+ * `''` as "render no attribute" (avoids `data-testid=""`).
+ *
+ * @example
+ * composeTestId('button', 'save')                  // 'button-save'
+ * composeTestId('option', ['username', 'Jane Doe'])// 'option-username-jane-doe'
+ * composeTestId('menu-item', [undefined, 'edit'])  // 'menu-item-edit'  (no base → unscoped)
+ * composeTestId('menu-item', ['actions', 'edit'])  // 'menu-item-actions-edit'
+ * composeTestId(undefined, 'already-made')         // 'already-made'    (verbatim passthrough)
+ * composeTestId('button', 'button-first-page')     // 'button-first-page' (idempotent — not doubled)
+ */
+declare function composeTestId(type: string | null | undefined, value: TnTestIdValue): string;
+
+/**
+ * Test-id attribute names supported by the library.
+ *
+ * - `'data-testid'` is the modern industry default and the library's out-of-the-box behavior.
+ * - `'data-test'` exists for consumers that have an established convention they don't want to disrupt
+ *   (notably webui, which has thousands of selectors targeting `data-test`).
+ */
+type TnTestAttrName = 'data-test' | 'data-testid';
+/**
+ * Controls which attribute name the library renders `testId` values to.
+ *
+ * Defaults to `'data-testid'`. Consumers can override at the application root:
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     { provide: TN_TEST_ATTR, useValue: 'data-test' },
+ *   ],
+ * });
+ * ```
+ *
+ * Every component-level `testId` input and every `[tnTestId]` directive usage reads this token
+ * so that a single override switches the entire library consistently.
+ */
+declare const TN_TEST_ATTR: InjectionToken<TnTestAttrName>;
+
+/**
+ * Writes a composed `testId` value to whichever attribute name is configured via
+ * {@link TN_TEST_ATTR} (default `data-testid`).
+ *
+ * The library owns the whole id: the consumer passes only the *semantic* base
+ * (`tnTestId`), the component declares its element type (`tnTestIdType`), and
+ * this directive assembles `${type}-${base}` (kebab-cased, see
+ * {@link composeTestId}). When no `tnTestIdType` is set the value is written
+ * verbatim, so existing call sites are unaffected.
+ *
+ * @example
+ * ```html
+ * <!-- component-owned prefix: emits data-testid="button-save" -->
+ * <button [tnTestId]="'save'" tnTestIdType="button">Save</button>
+ *
+ * <!-- array base scopes a dynamic child: emits data-testid="option-username-jane-doe" -->
+ * <li [tnTestId]="['username', option.label]" tnTestIdType="option"></li>
+ *
+ * <!-- no type: written verbatim (legacy behavior) -->
+ * <button [tnTestId]="myTestId()">Click me</button>
+ * ```
+ *
+ * Falsy / empty results remove the attribute entirely (avoids `data-testid=""`).
+ */
+declare class TnTestIdDirective {
+    private readonly renderer;
+    private readonly host;
+    private readonly attrName;
+    /** The semantic base value (token or ordered segments). Falsy parts are dropped. */
+    readonly testId: _angular_core.InputSignal<TnTestIdValue>;
+    /**
+     * Element-type prefix the component declares (e.g. `'button'`, `'option'`).
+     * Omit to write the base verbatim with no prefix.
+     */
+    readonly tnTestIdType: _angular_core.InputSignal<string | null | undefined>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTestIdDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTestIdDirective, "[tnTestId]", never, { "testId": { "alias": "tnTestId"; "required": false; "isSignal": true; }; "tnTestIdType": { "alias": "tnTestIdType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type TnDrawerMode = 'side' | 'over';
 type TnDrawerPosition = 'start' | 'end';
 declare class TnDrawerComponent implements OnDestroy {
@@ -309,7 +416,7 @@ declare class TnDrawerComponent implements OnDestroy {
      * Test-id applied to the drawer panel. Rendered under whichever attribute name is
      * configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     /** Fires after the open transition completes */
     openedComplete: _angular_core.OutputEmitterRef<void>;
     /** Fires after the close transition completes */
@@ -568,10 +675,13 @@ declare class TnButtonComponent implements AfterViewInit {
     label: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     /**
-     * Test-id applied to the rendered element. Rendered under whichever attribute
-     * name is configured via `TN_TEST_ATTR` (default `data-testid`).
+     * Semantic test-id base for the rendered element. The library prepends the
+     * element type (`button`) and renders the result under whichever attribute
+     * name is configured via `TN_TEST_ATTR` (default `data-testid`) — e.g.
+     * `testId="save"` → `button-save`. Accepts an array of segments to scope the
+     * id (e.g. `[formControlName, 'submit']`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     /**
      * Renders the button as an `<a>` with a plain `href` attribute.
      * Mutually exclusive with `routerLink` — if both are provided, `routerLink` wins.
@@ -807,10 +917,12 @@ declare class TnIconButtonComponent implements AfterViewInit {
     /** Reflects an expanded/collapsed state (e.g. toggling a panel) onto the inner button. */
     ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
     /**
-     * Test-id applied to the rendered `<button>` element. Rendered under whichever attribute
-     * name is configured via `TN_TEST_ATTR` (default `data-testid`).
+     * Semantic test-id base for the rendered `<button>`. The library prepends the
+     * element type (`button`) and renders the result under whichever attribute
+     * name is configured via `TN_TEST_ATTR` (default `data-testid`) — e.g.
+     * `testId="first-page"` → `button-first-page`.
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     name: _angular_core.InputSignal<string>;
     size: _angular_core.InputSignal<IconSize>;
     color: _angular_core.InputSignal<string | undefined>;
@@ -996,7 +1108,7 @@ declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValue
     inputEl: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement>>;
     inputType: _angular_core.InputSignal<InputType>;
     placeholder: _angular_core.InputSignal<string>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     disabled: _angular_core.InputSignal<boolean>;
     multiline: _angular_core.InputSignal<boolean>;
     rows: _angular_core.InputSignal<number>;
@@ -1403,7 +1515,7 @@ declare class TnChipComponent implements AfterViewInit, OnDestroy {
     closable: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<ChipColor>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     onClose: _angular_core.OutputEmitterRef<void>;
     onClick: _angular_core.OutputEmitterRef<MouseEvent>;
     private focusMonitor;
@@ -1520,6 +1632,13 @@ declare class TnMenuItemComponent {
     itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
     /** Template capturing whatever the consumer projected as item content. */
     content: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * Semantic *base* for the test id — either the explicit `testId` or the `id`.
+     * The owning `<tn-menu-panel>` button declares `tnTestIdType="button"`, so
+     * `TnTestIdDirective` composes the final `button-…` id (and is idempotent, so
+     * an already-`button-`-prefixed value is not doubled). Returns `undefined`
+     * when neither is set, which composes to no attribute.
+     */
     resolvedTestId: _angular_core.Signal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMenuItemComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuItemComponent, "tn-menu-item", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLibrary": { "alias": "iconLibrary"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
@@ -1570,6 +1689,16 @@ interface TnMenuItem {
 declare class TnMenuComponent implements OnDestroy {
     items: _angular_core.InputSignal<TnMenuItem[]>;
     contextMenu: _angular_core.InputSignal<boolean>;
+    /**
+     * Semantic base that scopes the test ids of this menu's items. Each item
+     * resolves to `button-${testId}-${item.id}` (e.g. menu `testId="actions"`
+     * + item `id="edit"` → `button-actions-edit`), which keeps ids unique when
+     * several menus render on one page. Omit it and items fall back to the
+     * unscoped `button-${item.id}`. A per-item `testId` overrides the base and is
+     * composed with the same `button-` prefix (idempotently, so an already
+     * `button-`-prefixed value is not doubled).
+     */
+    testId: _angular_core.InputSignal<string | undefined>;
     menuItemClick: _angular_core.OutputEmitterRef<TnMenuItem>;
     menuOpen: _angular_core.OutputEmitterRef<void>;
     menuClose: _angular_core.OutputEmitterRef<void>;
@@ -1599,7 +1728,7 @@ declare class TnMenuComponent implements OnDestroy {
     ngOnDestroy(): void;
     onContextMenu(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuComponent, "tn-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "menuItemClick": "menuItemClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; }, ["contentItems"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuComponent, "tn-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "menuItemClick": "menuItemClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; }, ["contentItems"], ["*"], true, never>;
 }
 
 declare class TnCardComponent {
@@ -1655,11 +1784,11 @@ declare class TnExpansionPanelComponent {
      * Test-id applied to the panel's root element. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     /**
      * Test-id applied to the expand/collapse toggle header button.
      */
-    toggleTestId: _angular_core.InputSignal<string | undefined>;
+    toggleTestId: _angular_core.InputSignal<TnTestIdValue>;
     expandedChange: _angular_core.OutputEmitterRef<boolean>;
     toggleEvent: _angular_core.OutputEmitterRef<void>;
     private internalExpanded;
@@ -1810,7 +1939,7 @@ declare class TnCheckboxComponent implements AfterViewInit, OnDestroy, ControlVa
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     indeterminate: _angular_core.InputSignal<boolean>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     error: _angular_core.InputSignal<string | null>;
     checked: _angular_core.InputSignal<boolean>;
     change: _angular_core.OutputEmitterRef<boolean>;
@@ -2019,7 +2148,7 @@ declare class TnRadioComponent implements AfterViewInit, OnDestroy, ControlValue
     name: _angular_core.InputSignal<string | undefined>;
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     error: _angular_core.InputSignal<string | null>;
     change: _angular_core.OutputEmitterRef<unknown>;
     id: string;
@@ -2162,7 +2291,7 @@ declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, Contro
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<SlideToggleColor>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     ariaLabel: _angular_core.InputSignal<string | undefined>;
     ariaLabelledby: _angular_core.InputSignal<string | undefined>;
     checked: _angular_core.InputSignal<boolean>;
@@ -2275,7 +2404,7 @@ declare class TnTabComponent implements AfterContentInit {
     disabled: _angular_core.InputSignal<boolean>;
     icon: _angular_core.InputSignal<string | undefined>;
     iconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     selected: _angular_core.OutputEmitterRef<void>;
     iconContent: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     index: _angular_core.WritableSignal<number>;
@@ -2299,7 +2428,7 @@ declare class TnTabComponent implements AfterContentInit {
 declare class TnTabPanelComponent {
     label: _angular_core.InputSignal<string>;
     lazyLoad: _angular_core.InputSignal<boolean>;
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     content: _angular_core.Signal<TemplateRef<unknown>>;
     index: _angular_core.WritableSignal<number>;
     isActive: _angular_core.WritableSignal<boolean>;
@@ -2328,7 +2457,7 @@ declare class TnTabsComponent implements AfterContentInit, AfterViewInit, OnDest
      * Test-id applied to the tablist root element. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     selectedIndexChange: _angular_core.OutputEmitterRef<number>;
     tabChange: _angular_core.OutputEmitterRef<TabChangeEvent>;
     private internalSelectedIndex;
@@ -2963,7 +3092,7 @@ declare class TnFormFieldComponent implements AfterContentInit {
     label: _angular_core.InputSignal<string>;
     hint: _angular_core.InputSignal<string>;
     required: _angular_core.InputSignal<boolean>;
-    testId: _angular_core.InputSignal<string>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     subscriptSizing: _angular_core.InputSignal<SubscriptSizing>;
     /** Optional tooltip shown via a help icon next to the label. */
     tooltip: _angular_core.InputSignal<string>;
@@ -3195,6 +3324,18 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
     disabled: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<string>;
     multiple: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional extractor for the per-option test-id discriminator. Defaults to
+     * the option's `value` (when a string/number) or its `label`. Provide this
+     * when option values are objects, or to pick a more stable/unique key —
+     * mirrors webui's `[ixTest]="[controlName, option.<field>]"` discriminator.
+     *
+     * @example
+     * ```html
+     * <tn-select testId="user" [optionTestIdKey]="(o) => o.value.id" ... />
+     * ```
+     */
+    optionTestIdKey: _angular_core.InputSignal<((option: TnSelectOption<T>) => string | number | null | undefined) | undefined>;
     /**
      * Custom comparator for matching option values against the selected value(s).
      *
@@ -3244,6 +3385,15 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
     optionId(option: TnSelectOption<T>): string | null;
     /** Whether `option` is the keyboard-highlighted item. */
     isOptionFocused(option: TnSelectOption<T>): boolean;
+    /**
+     * Test-id segments for an option row, consumed by `[tnTestId]` with
+     * `tnTestIdType="option"`. The select's `testId` scopes each option so ids
+     * stay unique across selects: base `quick-filters` + option value `ssd` →
+     * `option-quick-filters-ssd`; with no base → `option-ssd`. The discriminator
+     * comes from `optionTestIdKey` when provided, else the option's primitive
+     * `value`, else its `label`.
+     */
+    protected optionTestIdParts(option: TnSelectOption<T>): (string | number | null | undefined)[];
     private onChange;
     private onTouched;
     private elementRef;
@@ -3330,7 +3480,7 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
     private activateFocusedOption;
     private scrollFocusedIntoView;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSelectComponent<any>, "tn-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionGroups": { "alias": "optionGroups"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "noOptionsLabel": { "alias": "noOptionsLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "multiSelectionChange": "multiSelectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSelectComponent<any>, "tn-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionGroups": { "alias": "optionGroups"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "noOptionsLabel": { "alias": "noOptionsLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "optionTestIdKey": { "alias": "optionTestIdKey"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "multiSelectionChange": "multiSelectionChange"; }, never, never, true, never>;
 }
 
 /**
@@ -4022,32 +4172,6 @@ declare class TnListOptionComponent implements AfterContentInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListOptionComponent, "tn-list-option", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, ["[tnListIcon], [tnListAvatar]", "[tnListItemTitle], [tnListItemPrimary]", "*", "[tnListItemLine], [tnListItemSecondary]"], true, never>;
 }
 
-/**
- * Primitive directive that writes a raw `testId` value to whichever attribute name has been
- * configured via {@link TN_TEST_ATTR} (default `data-testid`).
- *
- * Library components should use this directive instead of hard-coding `[attr.data-testid]` so
- * the attribute name remains centrally controlled and consumers with different conventions
- * (e.g. `data-test`) can opt in with a single root-level provider.
- *
- * @example
- * ```html
- * <button [tnTestId]="myTestId()">Click me</button>
- * ```
- *
- * Passing `null` / `undefined` / `''` removes the attribute entirely (avoids `data-testid=""`).
- */
-declare class TnTestIdDirective {
-    private readonly renderer;
-    private readonly host;
-    private readonly attrName;
-    /** The raw test-id value to apply. Falsy values remove the attribute. */
-    readonly testId: _angular_core.InputSignal<string | null | undefined>;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTestIdDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTestIdDirective, "[tnTestId]", never, { "testId": { "alias": "tnTestId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 interface TnSelectionChange {
     source: TnSelectionListComponent;
     options: TnListOptionComponent[];
@@ -4486,6 +4610,14 @@ interface TnTableDataProvider {
  */
 declare class TnTablePagerComponent {
     private destroyRef;
+    private readonly testIdDirective;
+    /**
+     * 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
+     * assignable to both `tn-select`'s `string` testId and `tn-icon-button`'s
+     * `TnTestIdValue` testId.
+     */
+    protected childTestId(suffix: string): string;
     /**
      * Normalize the injected token into a Signal so consumers can supply either
      * a plain object or a reactive signal (e.g. derived from a TranslateService's
@@ -5556,7 +5688,7 @@ declare class TnSliderComponent implements ControlValueAccessor, OnDestroy, Afte
      * Test-id applied to the slider's root container. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     thumbDirective: _angular_core.Signal<TnSliderThumbDirective>;
     sliderContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     thumbVisual: _angular_core.Signal<ElementRef<HTMLDivElement>>;
@@ -5637,7 +5769,7 @@ declare class TnButtonToggleGroupComponent implements ControlValueAccessor {
      * Test-id applied to the group root. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     change: _angular_core.OutputEmitterRef<{
         source: TnButtonToggleComponent;
         value: unknown;
@@ -5675,7 +5807,7 @@ declare class TnButtonToggleComponent implements ControlValueAccessor {
      * Test-id applied to the rendered toggle button. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     change: _angular_core.OutputEmitterRef<{
         source: TnButtonToggleComponent;
         value: unknown;
@@ -5868,6 +6000,27 @@ declare class TnTooltipComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTooltipComponent, "tn-tooltip", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface TnConfirmDialogData {
+    title: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    destructive?: boolean;
+    /**
+     * Semantic test-id bases for the library-rendered action buttons. The buttons
+     * emit `button-confirm` / `button-cancel` by default (the library adds the
+     * `button-` prefix); override here when a page opens more than one dialog.
+     */
+    confirmTestId?: string;
+    cancelTestId?: string;
+}
+declare class TnConfirmDialogComponent {
+    ref: DialogRef<boolean, unknown>;
+    data: TnConfirmDialogData;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnConfirmDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnConfirmDialogComponent, "tn-confirm-dialog", never, {}, {}, never, never, true, never>;
+}
+
 type TnDialogOpenTarget<C> = ComponentType<C> | TemplateRef<unknown>;
 interface TnDialogDefaults {
     panelClass?: string | string[];
@@ -5894,13 +6047,7 @@ declare class TnDialog {
     /**
      * Open a confirmation dialog. Resolves to true if confirmed, false otherwise.
      */
-    confirm(opts: {
-        title: string;
-        message?: string;
-        confirmText?: string;
-        cancelText?: string;
-        destructive?: boolean;
-    }): Promise<boolean>;
+    confirm(opts: TnConfirmDialogData): Promise<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDialog, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<TnDialog>;
 }
@@ -5908,6 +6055,13 @@ declare class TnDialog {
 declare class TnDialogShellComponent implements OnInit {
     title: _angular_core.InputSignal<string>;
     showFullscreenButton: _angular_core.InputSignal<boolean>;
+    /**
+     * 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).
+     */
+    testId: _angular_core.InputSignal<string | undefined>;
     /** Stable id for the title heading, referenced by the dialog's aria-labelledby. */
     readonly titleId: string;
     isFullscreen: _angular_core.WritableSignal<boolean>;
@@ -5923,21 +6077,7 @@ declare class TnDialogShellComponent implements OnInit {
     private enterFullscreen;
     private exitFullscreen;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDialogShellComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnDialogShellComponent, "tn-dialog-shell", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "showFullscreenButton": { "alias": "showFullscreenButton"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tnDialogAction]"], true, never>;
-}
-
-interface TnConfirmDialogData {
-    title: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    destructive?: boolean;
-}
-declare class TnConfirmDialogComponent {
-    ref: DialogRef<boolean, unknown>;
-    data: TnConfirmDialogData;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnConfirmDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnConfirmDialogComponent, "tn-confirm-dialog", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnDialogShellComponent, "tn-dialog-shell", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "showFullscreenButton": { "alias": "showFullscreenButton"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tnDialogAction]"], true, never>;
 }
 
 /**
@@ -6261,7 +6401,7 @@ declare class TnStepperComponent {
      * Test-id applied to the stepper root. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
-    testId: _angular_core.InputSignal<string | undefined>;
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     selectionChange: _angular_core.OutputEmitterRef<{
         selectedIndex: number;
         previouslySelectedIndex: number;
@@ -6810,32 +6950,6 @@ declare class TnKeyboardShortcutService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<TnKeyboardShortcutService>;
 }
 
-/**
- * Test-id attribute names supported by the library.
- *
- * - `'data-testid'` is the modern industry default and the library's out-of-the-box behavior.
- * - `'data-test'` exists for consumers that have an established convention they don't want to disrupt
- *   (notably webui, which has thousands of selectors targeting `data-test`).
- */
-type TnTestAttrName = 'data-test' | 'data-testid';
-/**
- * Controls which attribute name the library renders `testId` values to.
- *
- * Defaults to `'data-testid'`. Consumers can override at the application root:
- *
- * ```ts
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     { provide: TN_TEST_ATTR, useValue: 'data-test' },
- *   ],
- * });
- * ```
- *
- * Every component-level `testId` input and every `[tnTestId]` directive usage reads this token
- * so that a single override switches the entire library consistently.
- */
-declare const TN_TEST_ATTR: InjectionToken<TnTestAttrName>;
-
 /**
  * Enum of available theme names.
  * Use these constants instead of hardcoded strings.
@@ -7030,5 +7144,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-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, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
-export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };
+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, setupLucideIntegration, tnIconMarker };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };