@truenas/ui-components 0.5.1 → 0.5.3

package/package.json

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

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

@@ -1520,12 +1520,15 @@ declare class TnTooltipDirective implements AfterViewInit, OnDestroy {
     private _hideTimeout;
     private _isTooltipVisible;
     private _positionSub;
+    private _focusSub;
     private _tooltipId;
     private _overlay;
     private _elementRef;
     private _viewContainerRef;
     private _overlayPositionBuilder;
     private _ariaDescriber;
+    private _focusMonitor;
+    private _ngZone;
     private _viewInitialized;
     private _describedTarget;
     private _describedMessage;
@@ -1557,8 +1560,6 @@ declare class TnTooltipDirective implements AfterViewInit, OnDestroy {
     ngOnDestroy(): void;
     _onMouseEnter(): void;
     _onMouseLeave(): void;
-    _onFocusIn(): void;
-    _onFocusOut(event: FocusEvent): void;
     _onKeydown(event: KeyboardEvent): void;
     /** Shows the tooltip */
     show(delay?: number): void;
@@ -2856,9 +2857,12 @@ declare class TnChipInputComponent<T = string> implements ControlValueAccessor,
     /**
      * Semantic test-id base. The library prepends the `chip-input` element type
      * (e.g. `testId="tags"` → `chip-input-tags`); each chip and suggestion is
-     * scoped beneath it.
+     * scoped beneath it. Falls back to the bound control name when unset, so
+     * `<tn-chip-input formControlName="isnsServers">` emits `chip-input-isns-servers`.
      */
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
     /** Emits the committed value whenever a chip is added. */
     chipAdded: _angular_core.OutputEmitterRef<T>;
     /** Emits the removed value whenever a chip is removed. */
@@ -2917,8 +2921,38 @@ declare class TnChipInputComponent<T = string> implements ControlValueAccessor,
     protected removeChip(index: number): void;
     /** The label shown on a chip for a committed value. */
     protected displayLabel(value: T): string;
-    /** Scopes a per-chip test id beneath the component's base. */
+    /**
+     * Scopes a per-chip test id beneath the component's base.
+     *
+     * The discriminator is the value itself when primitive, else the matching
+     * option's label — `String(value)` on an object is `[object Object]`, which
+     * would stamp an identical id on every chip. Duplicates are worse than
+     * absence for automation, so an object value with no option to name it yet
+     * (options still loading) stays attribute-free rather than colliding. A primitive
+     * that normalizes away is dropped for the same reason — see
+     * {@link discriminatedTestId}.
+     */
     protected chipTestId(value: T): TnTestIdValue;
+    /**
+     * Scopes a per-suggestion test id beneath the component's base, via the shared
+     * dropdown-option derivation. Unlike `tn-select` / `tn-autocomplete`, which
+     * emit an unscoped `option-<value>` when they have no base, an unidentified
+     * chip-input stays attribute-free — its rows carry no page-unique id, so
+     * emitting one would invite collisions between inputs.
+     */
+    protected suggestionTestId(option: TnChipInputOption<T>): TnTestIdValue;
+    /**
+     * Keeps a scoped id only when both halves of it survive normalization.
+     *
+     * The base has to be usable: an unscoped `chip-<value>` would collide across every
+     * chip-input on the page, so unidentified inputs stay attribute-free. The
+     * discriminator has to contribute a segment of its own, because
+     * `kebabTestSegment` drops every run of non-alphanumerics — a value like `*`, `**`
+     * or a CJK-only tag normalizes to nothing and collapses the id back to the bare
+     * base, stamping the same id on every chip. That is the duplicate-id case the
+     * object-value path already avoids, reached through a primitive instead.
+     */
+    private discriminatedTestId;
     private isCommitKey;
     /** Commits typed text: resolve it to an option's value, else accept as custom. */
     private commitText;
@@ -3225,6 +3259,13 @@ declare class TnCardComponent {
     titleQueryParams: _angular_core.InputSignal<Record<string, unknown> | undefined>;
     /** Help/hover text shown on the title via the tooltip directive. */
     titleTooltip: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accessible name for the help button that carries `titleTooltip`. Same reason as
+     * `headerMenuTriggerAriaLabel`: the library cannot translate its own `'More information'`
+     * default, so a consumer with an i18n layer passes an already-translated string here.
+     */
+    titleTooltipAriaLabel: _angular_core.InputSignal<string | undefined>;
+    protected readonly resolvedTitleTooltipAriaLabel: _angular_core.Signal<string>;
     elevation: _angular_core.InputSignal<"none" | "low" | "medium" | "high">;
     padding: _angular_core.InputSignal<"small" | "large" | "medium">;
     padContent: _angular_core.InputSignal<boolean>;
@@ -3248,6 +3289,28 @@ declare class TnCardComponent {
      * (default `data-testid`).
      */
     headerMenuTriggerTestId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accessible name for the kebab-menu trigger rendered when `headerMenu` is set.
+     *
+     * The library cannot translate its own default, so a consumer with an i18n layer must be able to
+     * supply an already-translated string here — otherwise the trigger's only accessible name is the
+     * English `'Card menu'` fallback. Also used as the trigger's tooltip when
+     * `headerMenuTriggerTooltip` is not set.
+     */
+    headerMenuTriggerAriaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Hover tooltip for the kebab-menu trigger. Defaults to `headerMenuTriggerAriaLabel`, so setting
+     * a single translated string covers both the accessible name and the visible hint.
+     */
+    headerMenuTriggerTooltip: _angular_core.InputSignal<string | undefined>;
+    protected readonly resolvedHeaderMenuAriaLabel: _angular_core.Signal<string>;
+    /**
+     * The trigger has no tooltip unless the consumer asks for one — either explicitly, or by naming
+     * the trigger and letting that one string drive both. Falling back to the built-in `'Card menu'`
+     * default instead would put a new hover hint on every existing `[headerMenu]` consumer, one that
+     * only repeats the button's accessible name.
+     */
+    protected readonly resolvedHeaderMenuTooltip: _angular_core.Signal<string | undefined>;
     primaryAction: _angular_core.InputSignal<TnCardAction | undefined>;
     secondaryAction: _angular_core.InputSignal<TnCardAction | undefined>;
     footerLink: _angular_core.InputSignal<TnCardFooterLink | undefined>;
@@ -3266,7 +3329,7 @@ declare class TnCardComponent {
     onHeaderMenuItemClick(_item: TnMenuItem): void;
     getStatusClass(type?: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCardComponent, "tn-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "titleRouterLink": { "alias": "titleRouterLink"; "required": false; "isSignal": true; }; "titleQueryParams": { "alias": "titleQueryParams"; "required": false; "isSignal": true; }; "titleTooltip": { "alias": "titleTooltip"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "padContent": { "alias": "padContent"; "required": false; "isSignal": true; }; "fillHeight": { "alias": "fillHeight"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "headerStatus": { "alias": "headerStatus"; "required": false; "isSignal": true; }; "headerControl": { "alias": "headerControl"; "required": false; "isSignal": true; }; "headerMenu": { "alias": "headerMenu"; "required": false; "isSignal": true; }; "headerMenuTriggerTestId": { "alias": "headerMenuTriggerTestId"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; "footerLink": { "alias": "footerLink"; "required": false; "isSignal": true; }; }, {}, ["projectedHeader", "headerActions", "footerActions"], ["[tnCardHeader]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCardComponent, "tn-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "titleRouterLink": { "alias": "titleRouterLink"; "required": false; "isSignal": true; }; "titleQueryParams": { "alias": "titleQueryParams"; "required": false; "isSignal": true; }; "titleTooltip": { "alias": "titleTooltip"; "required": false; "isSignal": true; }; "titleTooltipAriaLabel": { "alias": "titleTooltipAriaLabel"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "padContent": { "alias": "padContent"; "required": false; "isSignal": true; }; "fillHeight": { "alias": "fillHeight"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "headerStatus": { "alias": "headerStatus"; "required": false; "isSignal": true; }; "headerControl": { "alias": "headerControl"; "required": false; "isSignal": true; }; "headerMenu": { "alias": "headerMenu"; "required": false; "isSignal": true; }; "headerMenuTriggerTestId": { "alias": "headerMenuTriggerTestId"; "required": false; "isSignal": true; }; "headerMenuTriggerAriaLabel": { "alias": "headerMenuTriggerAriaLabel"; "required": false; "isSignal": true; }; "headerMenuTriggerTooltip": { "alias": "headerMenuTriggerTooltip"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; "footerLink": { "alias": "footerLink"; "required": false; "isSignal": true; }; }, {}, ["projectedHeader", "headerActions", "footerActions"], ["[tnCardHeader]", "*"], true, never>;
 }
 
 /**