@truenas/ui-components 0.1.57 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -16,6 +16,7 @@
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
+    "@angular/router": "^21.0.0",
     "@mdi/angular-material": "^7.2.96",
     "@mdi/js": "^7.4.47"
   },

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

@@ -1,15 +1,15 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, OnInit, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef, InjectionToken } from '@angular/core';
+import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, OnInit, InjectionToken, 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';
 import { ComponentFixture } from '@angular/core/testing';
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
 import * as i1 from '@angular/cdk/tree';
 import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
-import * as rxjs from 'rxjs';
-import { Observable } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
 import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
 import { ComponentType } from '@angular/cdk/portal';
@@ -533,14 +533,36 @@ declare class TnButtonComponent {
     label: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     /**
-     * Test-id applied to the rendered `<button>` element. Rendered under whichever attribute
+     * Test-id applied to the rendered element. Rendered under whichever attribute
      * name is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
     testId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Renders the button as an `<a>` with a plain `href` attribute.
+     * Mutually exclusive with `routerLink` — if both are provided, `routerLink` wins.
+     */
+    href: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Renders the button as an `<a>` driven by Angular Router. Accepts the same
+     * shapes as `[routerLink]` (`string | any[]`).
+     */
+    routerLink: _angular_core.InputSignal<string | unknown[] | undefined>;
+    queryParams: _angular_core.InputSignal<Record<string, unknown> | undefined>;
+    fragment: _angular_core.InputSignal<string | undefined>;
+    target: _angular_core.InputSignal<string | undefined>;
+    rel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accessible label for the rendered element. Mirrors `aria-label`; useful when
+     * the visible label alone is insufficient (e.g. icon-only links).
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
     onClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    isAnchor: _angular_core.Signal<boolean>;
+    isRouterLink: _angular_core.Signal<boolean>;
     classes: _angular_core.Signal<string[]>;
+    handleAnchorClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }
 
 /**
@@ -609,6 +631,18 @@ declare class TnButtonHarness extends ComponentHarness {
      * ```
      */
     isDisabled(): Promise<boolean>;
+    /**
+     * Gets the resolved URL of the rendered element. Returns the `href` for
+     * anchor-mode renders (both plain `href` and `routerLink`) and `null` for
+     * button-mode renders.
+     *
+     * @example
+     * ```typescript
+     * const link = await loader.getHarness(TnButtonHarness.with({ label: 'Audit Settings' }));
+     * expect(await link.getHref()).toContain('/audit/settings');
+     * ```
+     */
+    getHref(): Promise<string | null>;
     /**
      * Clicks the button.
      *
@@ -1294,6 +1328,12 @@ interface TnMenuItem {
     action?: () => void;
     children?: TnMenuItem[];
     shortcut?: string;
+    /**
+     * Marks this item as the currently-chosen option (e.g. the active sort key
+     * or export format). Applies the `tn-menu-item--selected` class and an
+     * `aria-current="true"` attribute. Visually distinct from focus/hover.
+     */
+    selected?: boolean;
 }
 declare class TnMenuComponent {
     items: _angular_core.InputSignal<TnMenuItem[]>;
@@ -1307,6 +1347,8 @@ declare class TnMenuComponent {
     private overlay;
     private viewContainerRef;
     onMenuItemClick(item: TnMenuItem): void;
+    private contentItems;
+    constructor();
     hasChildren: _angular_core.Signal<(item: TnMenuItem) => boolean>;
     onMenuOpen(): void;
     onMenuClose(): void;
@@ -1319,7 +1361,7 @@ declare class TnMenuComponent {
     onContextMenu(event: MouseEvent): void;
     trackByItemId(index: number, item: TnMenuItem): string;
     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"; }, never, ["*"], 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; }; }, { "menuItemClick": "menuItemClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; }, ["contentItems"], ["*", "tn-menu-item, .tn-menu-separator"], true, never>;
 }
 
 declare class TnCardComponent {
@@ -2433,6 +2475,55 @@ interface TabsHarnessFilters extends BaseHarnessFilters {
     hasTab?: string | RegExp;
 }
 
+/**
+ * Projection-based menu item for use inside `<tn-menu>`.
+ *
+ * Two authoring modes:
+ * 1. **Convenience** — set `label` (and optionally `icon`/`shortcut`); the
+ *    default icon + label + shortcut layout renders.
+ * 2. **Custom content** — omit `label`; project arbitrary content via
+ *    `<ng-content>` (badges, two-line layouts, etc.).
+ *
+ * Existing `<tn-menu [items]="...">` consumers don't need this component;
+ * the items-array API continues to work unchanged. Items-array entries and
+ * projected `<tn-menu-item>` children render together inside one `<tn-menu>`.
+ *
+ * Subscribe to either the projected item's own `itemClick` output (preferred,
+ * per-item handlers) or the parent menu's `menuItemClick` (uniform handler).
+ * Trigger-driven menus close automatically on projected-item click.
+ *
+ * **Note on keyboard navigation:** projected items render as `role="menuitem"`
+ * buttons but do not participate in `CdkMenu` arrow-key navigation (CdkMenuItem
+ * requires its parent `CdkMenu` in the same injector tree, which projection
+ * breaks). For menus that depend on arrow-key navigation between options, use
+ * the `items` input form. Tab/Shift+Tab and Enter/Space activation still work.
+ *
+ * @example
+ * ```html
+ * <tn-menu>
+ *   <tn-menu-item label="JSON" [selected]="format === 'json'"
+ *                 (itemClick)="setFormat('json')" />
+ *   <tn-menu-item label="CSV"  [selected]="format === 'csv'"
+ *                 (itemClick)="setFormat('csv')" />
+ * </tn-menu>
+ * ```
+ */
+declare class TnMenuItemComponent {
+    id: _angular_core.InputSignal<string | undefined>;
+    label: _angular_core.InputSignal<string | undefined>;
+    icon: _angular_core.InputSignal<string | undefined>;
+    iconLibrary: _angular_core.InputSignal<"material" | "mdi" | "custom" | "lucide" | undefined>;
+    shortcut: _angular_core.InputSignal<string | undefined>;
+    disabled: _angular_core.InputSignal<boolean>;
+    selected: _angular_core.InputSignal<boolean>;
+    testId: _angular_core.InputSignal<string | undefined>;
+    itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    resolvedTestId: _angular_core.Signal<string | undefined>;
+    handleClick(event: MouseEvent): void;
+    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>;
+}
+
 /**
  * Directive that attaches a menu to any element.
  * Usage: <button [tnMenuTriggerFor]="menu">Open Menu</button>
@@ -2555,6 +2646,24 @@ declare class TnMenuHarness extends ComponentHarness {
      * Gets the number of menu items (excluding separators).
      */
     getItemCount(): Promise<number>;
+    /**
+     * Checks whether a menu item is marked as the currently-selected option
+     * (i.e. has `aria-current="true"`).
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * expect(await menu.isItemSelected({ label: 'JSON' })).toBe(true);
+     * ```
+     */
+    isItemSelected(filter: {
+        label: string | RegExp;
+    }): Promise<boolean>;
+    /**
+     * Gets the label of the currently-selected item, or `null` when no item is
+     * marked as selected.
+     */
+    getSelectedItemLabel(): Promise<string | null>;
 }
 /**
  * A set of criteria that can be used to filter `TnMenuHarness` instances.
@@ -2824,40 +2933,141 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor {
     options: _angular_core.InputSignal<TnSelectOption<T>[]>;
     optionGroups: _angular_core.InputSignal<TnSelectOptionGroup<T>[]>;
     placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Accessible label for the select trigger. When set, this is used as the
+     * trigger's `aria-label` instead of the visible `placeholder` — useful in
+     * contexts (e.g. a pager's page-size dropdown) where the placeholder text
+     * doesn't accurately describe the field's purpose to screen readers.
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Message shown inside the dropdown when no options (and no option groups)
+     * are available. Defaults to the English `'No options available'`; consumers
+     * with i18n requirements can pass a translated string.
+     */
+    noOptionsLabel: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<string>;
     multiple: _angular_core.InputSignal<boolean>;
+    /**
+     * Custom comparator for matching option values against the selected value(s).
+     *
+     * When the option values are objects, **provide this** — the built-in
+     * fallback uses `JSON.stringify`, which is key-order dependent and can
+     * produce false negatives for structurally equal objects. For primitives the
+     * default identity check is fine.
+     */
     compareWith: _angular_core.InputSignal<((a: T | null, b: T | null) => boolean) | undefined>;
     selectionChange: _angular_core.OutputEmitterRef<T>;
     /** Emits the full array of selected values after each toggle in multiple mode. */
     multiSelectionChange: _angular_core.OutputEmitterRef<T[]>;
     protected isOpen: _angular_core.WritableSignal<boolean>;
+    protected dropdownPosition: _angular_core.WritableSignal<"above" | "below">;
     protected selectedValue: _angular_core.WritableSignal<T | null>;
     protected selectedValues: _angular_core.WritableSignal<T[]>;
+    /** Index into `flatOptions` of the keyboard-focused row (-1 when none). */
+    protected focusedIndex: _angular_core.WritableSignal<number>;
     private formDisabled;
+    private static readonly DROPDOWN_MAX_HEIGHT_VAR;
+    private static readonly DROPDOWN_MAX_HEIGHT_FALLBACK;
+    private readonly fallbackId;
+    protected uniqueId: _angular_core.Signal<string>;
     isDisabled: _angular_core.Signal<boolean>;
+    /**
+     * Flattened option list (ungrouped + grouped, in render order). The keyboard
+     * navigation walks this list — entries from disabled groups are kept but
+     * marked disabled so the cursor skips over them correctly.
+     */
+    protected flatOptions: _angular_core.Signal<TnSelectOption<T>[]>;
+    /**
+     * Starting flat-index of each option group, used by the template to
+     * translate a (group, option) pair into the matching `flatOptions` index.
+     */
+    protected groupOffsets: _angular_core.Signal<number[]>;
+    /** `aria-activedescendant` id for the focused option (or null). */
+    protected activeOptionId: _angular_core.Signal<string | null>;
     private onChange;
     private onTouched;
     private elementRef;
     private cdr;
+    protected triggerEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     constructor();
     writeValue(value: T | T[] | null): void;
     registerOnChange(fn: (value: T | T[] | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     toggleDropdown(): void;
-    closeDropdown(): void;
+    /**
+     * Open the dropdown, seed the keyboard cursor on the currently-selected
+     * option (or the first focusable one), and decide whether to flip up.
+     */
+    private openDropdown;
+    /**
+     * Close the dropdown.
+     *
+     * @param restoreFocus When `true` (default), return focus to the trigger so
+     *   keyboard users land somewhere sensible. Pass `false` for click-outside
+     *   so we don't steal focus from the element the user just navigated to.
+     */
+    closeDropdown(options?: {
+        restoreFocus?: boolean;
+    }): void;
+    /** Picks the initial focused-row index when the dropdown opens. */
+    private initialFocusIndex;
+    /**
+     * Decide whether the dropdown should open above or below the trigger.
+     * Opens above when there isn't enough space below the trigger AND there is
+     * more space above — otherwise stays below. Falls back to `'below'` when no
+     * trigger element is found yet.
+     */
+    private computeDropdownPosition;
+    /**
+     * Reads the dropdown's max-height from the CSS custom property set in
+     * select.component.scss. Single source of truth for the flip-up threshold —
+     * if the stylesheet changes, the heuristic follows automatically.
+     */
+    private readDropdownMaxHeight;
     onOptionClick(option: TnSelectOption<T>, groupDisabled?: boolean): void;
     selectOption(option: TnSelectOption<T>): void;
     private toggleOption;
     isOptionSelected(option: TnSelectOption<T>): boolean;
-    getDisplayText: _angular_core.Signal<string>;
+    /** Build a stable DOM id for the option at `index` for aria-activedescendant. */
+    protected optionId(index: number): string;
+    protected displayText: _angular_core.Signal<string>;
     private findOptionByValue;
-    hasAnyOptions: _angular_core.Signal<boolean>;
+    protected anyOptionsPresent: _angular_core.Signal<boolean>;
+    /**
+     * Compares two option values for equality. Uses `compareWith` if provided,
+     * otherwise identity (`===`). For object values it falls back to
+     * `JSON.stringify`, which is key-order dependent — consumers with object
+     * values should provide `compareWith` to avoid subtle bugs.
+     */
     private compareValues;
+    /**
+     * Keyboard handling on the trigger (focus stays on the trigger while the
+     * dropdown is open — options use mousedown-preventDefault to avoid stealing
+     * it). Implements the WAI-ARIA combobox pattern subset we need:
+     *
+     * - **Enter / Space**: open closed dropdown, or select the focused row
+     *   (toggle in multi-mode).
+     * - **ArrowDown / ArrowUp**: move the focused row; opens the dropdown first
+     *   if it's closed.
+     * - **Home / End**: jump to first / last focusable row (when open).
+     * - **Escape**: close and restore focus to the trigger.
+     * - **Tab**: close without preventing default so focus moves to the next
+     *   element naturally.
+     */
     onKeydown(event: KeyboardEvent): void;
+    /** Step the focused row by ±1 (or more), skipping disabled options. */
+    private moveFocus;
+    /** Move focus to a specific index, scanning forward/backward to skip disabled. */
+    private moveFocusTo;
+    /** Select (or toggle, in multi-mode) the currently keyboard-focused row. */
+    private selectFocused;
+    /** Scrolls the keyboard-focused option into view if it's outside the dropdown's viewport. */
+    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; }; "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; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "multiSelectionChange": "multiSelectionChange"; }, never, never, true, never>;
 }
 
 /**
@@ -3834,6 +4044,238 @@ declare class TnTableHarness extends ComponentHarness {
 interface TnTableHarnessFilters extends BaseHarnessFilters {
 }
 
+/**
+ * Default labels rendered inside `tn-table-pager`. Consumers can override any
+ * subset of these at the app root by providing a value for the
+ * `TN_TABLE_PAGER_LABELS` token — typically wired up to an i18n service so the
+ * pager picks up translated copy without each call site having to bind six
+ * label inputs. Inputs on `<tn-table-pager>` still win when explicitly set.
+ */
+interface TnTablePagerLabels {
+    itemsPerPage: string;
+    of: string;
+    firstPage: string;
+    previousPage: string;
+    nextPage: string;
+    lastPage: string;
+    /** Accessible label applied to the pager's `navigation` landmark. */
+    tablePagination: string;
+}
+/** English defaults used when no `TN_TABLE_PAGER_LABELS` provider is registered. */
+declare const TN_TABLE_PAGER_DEFAULT_LABELS: TnTablePagerLabels;
+/**
+ * DI token for app-wide default labels. Provide either a static object or a
+ * `Signal<TnTablePagerLabels>` — the latter lets the pager react to language
+ * changes when the consumer wires it up to an i18n service.
+ *
+ * Explicit input bindings on `<tn-table-pager>` still win over these defaults.
+ */
+declare const TN_TABLE_PAGER_LABELS: InjectionToken<TnTablePagerLabels | Signal<TnTablePagerLabels>>;
+/** Pagination state shared between `tn-table-pager` and an arbitrary data layer. */
+interface TnTablePagination {
+    pageNumber: number | null;
+    pageSize: number | null;
+}
+/**
+ * Minimal contract a data layer must implement to be driven by `tn-table-pager`
+ * via the `dataProvider` input. Designed to match the shape of NAS's
+ * `ix-table` `DataProvider<T>` so existing wrappers can be removed — but the
+ * library itself only depends on this slim interface, not on any consumer code.
+ */
+interface TnTableDataProvider {
+    /** Total number of rows the data layer is aware of, across all pages. */
+    totalRows: number;
+    /** The data layer's current pagination state. */
+    pagination: TnTablePagination;
+    /**
+     * Emits whenever the data layer's state changes in a way the pager should
+     * react to. The emitted value itself isn't read — it's purely a "something
+     * changed, re-read me" notification.
+     *
+     * **Implementations must emit on**:
+     *   - page-number changes (the canonical case),
+     *   - page-size changes the data layer applies on its own, and
+     *   - **`totalRows` changes** (e.g. after a filter/refresh).
+     *
+     * The pager reads `totalRows` imperatively inside its sync handler, so a
+     * provider that only emits on `pageNumber` won't surface row-count updates
+     * to the displayed range.
+     *
+     * Any stream type (`Subject`, `BehaviorSubject`, `ReplaySubject`, …) works —
+     * the pager guards against feedback loops by remembering the last pagination
+     * it pushed and treating a matching emission as its own echo. Replay
+     * semantics are therefore harmless but not required.
+     */
+    currentPage$: Observable<unknown>;
+    /** Pushes new pagination to the data layer; typically triggers a data refresh. */
+    setPagination(pagination: TnTablePagination): void;
+}
+/**
+ * Pagination control for the `tn-table` (or any list view that paginates).
+ *
+ * Works in two modes:
+ *
+ * 1. **Dumb mode** — bind `[currentPage]`, `[pageSize]`, `[totalItems]` and listen
+ *    to `pageChange` / `pageSizeChange`. The component owns no provider state.
+ * 2. **Data-provider mode** — bind `[dataProvider]` and the component drives
+ *    `setPagination()` on the provider, mirrors `totalRows`, and reacts to
+ *    `currentPage$` changes (with an internal guard against feedback loops).
+ *
+ * @example Dumb mode
+ * ```html
+ * <tn-table-pager
+ *   [(currentPage)]="page"
+ *   [(pageSize)]="size"
+ *   [totalItems]="total()"
+ *   (pageChange)="loadPage($event)" />
+ * ```
+ *
+ * @example Data-provider mode (replaces the typical ix-table-pager wrapper)
+ * ```html
+ * <tn-table-pager
+ *   [dataProvider]="dataProvider()"
+ *   [pageSize]="dataProvider().pagination.pageSize ?? 50"
+ *   [currentPage]="dataProvider().pagination.pageNumber ?? 1"
+ *   [itemsPerPageLabel]="'Items per page' | translate" />
+ * ```
+ */
+declare class TnTablePagerComponent {
+    private destroyRef;
+    /**
+     * 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
+     * onLangChange) and the pager re-renders when labels change.
+     */
+    private readonly defaultLabels;
+    /** 1-based index of the currently displayed page. */
+    currentPage: _angular_core.ModelSignal<number>;
+    /** Number of items per page. */
+    pageSize: _angular_core.ModelSignal<number>;
+    /** Selectable page-size values rendered in the dropdown. */
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    /**
+     * Total item count across all pages — drives `totalPages` and the range
+     * labels. Ignored when `dataProvider` is set (the provider's `totalRows`
+     * wins, so consumers don't have to keep both in sync).
+     */
+    totalItems: _angular_core.InputSignal<number>;
+    /**
+     * Optional data-provider integration. When supplied, the pager initializes
+     * the provider's pagination on the first effect run, mirrors `totalRows`
+     * into the displayed total, and listens to `currentPage$` to sync external
+     * page changes. Page/size changes from user input are pushed back via
+     * `setPagination()`.
+     */
+    dataProvider: _angular_core.InputSignal<TnTableDataProvider | undefined>;
+    /**
+     * Label inputs are nullable on purpose: the template reads the resolved
+     * `*Label` computed signals below, which fall back to the DI-provided default
+     * (a signal — so language changes propagate live). An explicit input binding
+     * always wins.
+     */
+    itemsPerPageLabel: _angular_core.InputSignal<string | undefined>;
+    ofLabel: _angular_core.InputSignal<string | undefined>;
+    firstPageLabel: _angular_core.InputSignal<string | undefined>;
+    previousPageLabel: _angular_core.InputSignal<string | undefined>;
+    nextPageLabel: _angular_core.InputSignal<string | undefined>;
+    lastPageLabel: _angular_core.InputSignal<string | undefined>;
+    tablePaginationLabel: _angular_core.InputSignal<string | undefined>;
+    /** Resolved labels: explicit input takes precedence over the DI default. */
+    protected resolvedItemsPerPageLabel: Signal<string>;
+    protected resolvedOfLabel: Signal<string>;
+    protected resolvedFirstPageLabel: Signal<string>;
+    protected resolvedPreviousPageLabel: Signal<string>;
+    protected resolvedNextPageLabel: Signal<string>;
+    protected resolvedLastPageLabel: Signal<string>;
+    protected resolvedTablePaginationLabel: Signal<string>;
+    /** Emits the new 1-based page number whenever the user navigates. */
+    pageChange: _angular_core.OutputEmitterRef<number>;
+    /** Emits the new page-size value when the dropdown changes. */
+    pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Total items reported by the data provider (when one is bound). Falls back
+     * to `totalItems` input otherwise — see `effectiveTotalItems`.
+     */
+    private providerTotalItems;
+    /** The provider reference we're currently bound to (used to detect swaps). */
+    private currentProvider;
+    /** Subscription to the current provider's `currentPage$` — torn down on swap. */
+    private providerSub;
+    /**
+     * Last pagination value we pushed to the provider. Used to recognize the
+     * provider's resulting emission as our own echo and break the feedback loop
+     * (setPagination → provider emits → syncFromProvider → setPagination …)
+     * regardless of whether the provider emits synchronously or asynchronously,
+     * and regardless of whether its stream replays on subscribe.
+     */
+    private lastPushedPagination;
+    protected effectiveTotalItems: Signal<number>;
+    protected totalPages: Signal<number>;
+    protected firstItemOnPage: Signal<number>;
+    protected lastItemOnPage: Signal<number>;
+    protected isFirstPageDisabled: Signal<boolean>;
+    protected isLastPageDisabled: Signal<boolean>;
+    protected pageSizeSelectOptions: Signal<TnSelectOption<number>[]>;
+    constructor();
+    private syncFromProvider;
+    /**
+     * Public navigation API: jump to a specific 1-based page. Used both by the
+     * template (first/last buttons) and by consumers who want to drive the pager
+     * programmatically. Out-of-range values and no-op transitions are silently
+     * ignored. Sibling helpers `previousPage` / `nextPage` are template-only and
+     * therefore `protected` — `goToPage` is intentionally part of the public API.
+     */
+    goToPage(pageNumber: number): void;
+    protected previousPage(): void;
+    protected nextPage(): void;
+    protected onPageSizeChange(value: number): void;
+    /** Forwards the current page/size to the data provider, if one is bound. */
+    private pushToProvider;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTablePagerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTablePagerComponent, "tn-table-pager", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "dataProvider": { "alias": "dataProvider"; "required": false; "isSignal": true; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "tablePaginationLabel": { "alias": "tablePaginationLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+}
+
+/**
+ * Harness for interacting with `tn-table-pager` in tests.
+ *
+ * @example
+ * ```ts
+ * const pager = await loader.getHarness(TnTablePagerHarness);
+ * await pager.nextPage();
+ * expect(await pager.getRangeText()).toBe('21 – 40 of 47');
+ * ```
+ */
+declare class TnTablePagerHarness extends ComponentHarness {
+    static hostSelector: string;
+    static with(options?: TnTablePagerHarnessFilters): HarnessPredicate<TnTablePagerHarness>;
+    private firstButton;
+    private previousButton;
+    private nextButton;
+    private lastButton;
+    private pageSizeSelect;
+    private rangeEl;
+    /**
+     * Returns the rendered range text (e.g. `"1 – 20 of 47"`).
+     */
+    getRangeText(): Promise<string>;
+    /** Clicks the "first page" button. */
+    goToFirstPage(): Promise<void>;
+    /** Clicks the "previous page" button. */
+    previousPage(): Promise<void>;
+    /** Clicks the "next page" button. */
+    nextPage(): Promise<void>;
+    /** Clicks the "last page" button. */
+    goToLastPage(): Promise<void>;
+    isFirstButtonDisabled(): Promise<boolean>;
+    isPreviousButtonDisabled(): Promise<boolean>;
+    isNextButtonDisabled(): Promise<boolean>;
+    isLastButtonDisabled(): Promise<boolean>;
+    /** Returns the harness for the underlying page-size `tn-select`. */
+    getPageSizeSelect(): Promise<TnSelectHarness>;
+}
+interface TnTablePagerHarnessFilters extends BaseHarnessFilters {
+}
+
 /** Flat node with expandable and level information */
 interface TnFlatTreeNode<T = unknown> {
     data: T;
@@ -5660,14 +6102,20 @@ declare class TnEmptyComponent {
     description: _angular_core.InputSignal<string | undefined>;
     icon: _angular_core.InputSignal<string | undefined>;
     iconLibrary: _angular_core.InputSignal<IconLibraryType>;
+    /**
+     * Overrides the icon size derived from `size`. Accepts any valid CSS size value
+     * (e.g. `'48px'`, `'3rem'`). Use this when the variant presets are too small for an
+     * empty-state illustration. When unset, the icon falls back to the `size`-based preset.
+     */
+    iconSize: _angular_core.InputSignal<string | undefined>;
     actionText: _angular_core.InputSignal<string | undefined>;
     bordered: _angular_core.InputSignal<boolean>;
     size: _angular_core.InputSignal<TnEmptySize>;
     onAction: _angular_core.OutputEmitterRef<void>;
     protected hasAction: _angular_core.Signal<boolean>;
-    iconSize: _angular_core.Signal<"lg" | "xl">;
+    protected iconSizePreset: _angular_core.Signal<"lg" | "xl">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnEmptyComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnEmptyComponent, "tn-empty", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLibrary": { "alias": "iconLibrary"; "required": false; "isSignal": true; }; "actionText": { "alias": "actionText"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnEmptyComponent, "tn-empty", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLibrary": { "alias": "iconLibrary"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "actionText": { "alias": "actionText"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
 }
 
 /**
@@ -6228,5 +6676,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_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, 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, 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, TnTableDataSource, TnTableHarnessFilters, 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, 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 };