@truenas/ui-components 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.5.2",
+  "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;
@@ -3258,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>;
@@ -3281,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>;
@@ -3299,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>;
 }
 
 /**