@truenas/ui-components 0.4.10 → 0.4.12

package/package.json

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

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

@@ -1,6 +1,6 @@
 import * as _truenas_ui_components from '@truenas/ui-components';
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, OnInit, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader, ModifierKeys as ModifierKeys$1 } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
@@ -1300,6 +1300,7 @@ declare class TnButtonComponent implements AfterViewInit {
     classes: _angular_core.Signal<string[]>;
     handleAnchorClick(event: MouseEvent): void;
     private hostRef;
+    constructor();
     private innerRef;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
@@ -1506,7 +1507,7 @@ declare class TnIconComponent {
 }
 
 type TooltipPosition = 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
-declare class TnTooltipDirective implements OnInit, OnDestroy {
+declare class TnTooltipDirective implements AfterViewInit, OnDestroy {
     message: _angular_core.InputSignal<string>;
     position: _angular_core.InputSignal<TooltipPosition>;
     disabled: _angular_core.InputSignal<boolean>;
@@ -1520,22 +1521,44 @@ declare class TnTooltipDirective implements OnInit, OnDestroy {
     private _isTooltipVisible;
     private _positionSub;
     private _tooltipId;
-    /**
-     * Only point `aria-describedby` at the tooltip when there is actually a message to
-     * describe. Otherwise every host (e.g. an icon button with no tooltip) would carry a
-     * dangling reference to a tooltip element that is never rendered.
-     */
-    protected get _ariaDescribedBy(): string | null;
     private _overlay;
     private _elementRef;
     private _viewContainerRef;
     private _overlayPositionBuilder;
-    ngOnInit(): void;
+    private _ariaDescriber;
+    private _viewInitialized;
+    private _describedTarget;
+    private _describedMessage;
+    private _innerObserver;
+    /**
+     * Re-sync the description (see ngAfterViewInit) when the inputs change. The initial
+     * write cannot happen here: on the first run the host's child components (e.g.
+     * tn-button's inner `<button>`) have not rendered yet.
+     */
+    private readonly _syncDescriptionOnInputChange;
+    /**
+     * Expose the message to assistive tech via CDK's AriaDescriber: it keeps the text in
+     * a persistent visually-hidden element (so `aria-describedby` never dangles — the
+     * overlay tooltip only exists while shown) and adds/removes only its own id token,
+     * leaving descriptions the control already carries (form hints, error ids) intact.
+     * The description goes on the interactive element itself: the host when it is one,
+     * otherwise the first interactive descendant (e.g. `<tn-button>`'s inner `<button>`),
+     * because screen readers read descriptions off the focused control, not wrappers.
+     */
+    ngAfterViewInit(): void;
+    private _syncAriaDescription;
+    /**
+     * The overlay tooltip renders its message as HTML (`[innerHTML]`), but AriaDescriber
+     * writes the description as plain text — strip any markup so screen readers never
+     * announce literal tags. DOMParser parses inert markup (no script execution).
+     */
+    private _plainTextMessage;
+    private _removeAriaDescription;
     ngOnDestroy(): void;
     _onMouseEnter(): void;
     _onMouseLeave(): void;
-    _onFocus(): void;
-    _onBlur(): void;
+    _onFocusIn(): void;
+    _onFocusOut(event: FocusEvent): void;
     _onKeydown(event: KeyboardEvent): void;
     /** Shows the tooltip */
     show(delay?: number): void;
@@ -2977,6 +3000,15 @@ interface TnCardAction {
     handler: () => void;
     disabled?: boolean;
     icon?: string;
+    /**
+     * Tooltip for the action button — useful for explaining why an action is unavailable.
+     * Shows on pointer hover (including while the action is disabled, since hover
+     * retargets to the button's host element) and on keyboard focus while enabled. A
+     * disabled native button is not focusable, so keyboard-only users cannot reach the
+     * reason; screen reader users can still read it when browsing the button via its
+     * persistent `aria-describedby` description.
+     */
+    tooltip?: string;
     /**
      * Test-id applied to the rendered action button. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
@@ -6419,16 +6451,26 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * Cells wrap regardless of this (that is the table's default), so reach for it only when equal
      * columns are actually wanted: it gives up the `auto` layout's content-proportional sizing,
      * which a table with one long text column among short ones usually wants to keep.
+     *
+     * Changes the layout algorithm only — the table still shrinks with its container, with no floor
+     * unless {@link minColumnWidth} or {@link minWidth} sets one.
      */
     fixedLayout: _angular_core.InputSignal<boolean>;
     /**
      * Smallest width a column is allowed to shrink to before the host scrolls horizontally instead.
-     * Any CSS length.
+     * Any CSS length. Empty (the default) applies no floor.
+     *
+     * `fixedLayout` makes the table fit its container exactly, so past a certain width the columns
+     * keep shrinking and wrap every cell to a couple of characters per line: technically visible,
+     * unreadable, and never scrollable. Set this to scroll instead once a column would go below it.
+     * The floor is derived as this times the column count, so it scales with the table rather than
+     * needing a hand-picked number per page.
      *
-     * `fixedLayout` makes the table fit its container exactly — so without a floor a narrow viewport
-     * just keeps shrinking the columns, wrapping every cell to a couple of characters per line:
-     * technically visible, unreadable, and never scrollable. The floor is derived as this times the
-     * column count, so it scales with the table rather than needing a hand-picked number per page.
+     * Opt-in rather than on by default, because a derived floor cannot know the table's container: a
+     * full-width page table has room for one, while the same table in a dashboard card or beside a
+     * details pane would just scroll at every ordinary window size. Only the consumer knows which it
+     * is — reach for it when the table can actually get narrow enough to matter, typically a
+     * full-width table on a phone.
      *
      * Only applies with `fixedLayout`. Without it the table lays out `auto`, sizing to its content
      * and overflowing the host — which scrolls on its own.
@@ -6439,7 +6481,7 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * for this only when a specific table needs a floor its column count doesn't imply.
      */
     minWidth: _angular_core.InputSignal<string>;
-    /** The floor actually applied to the table — explicit if given, else derived. */
+    /** The floor actually applied to the table — explicit if given, else derived, else none. */
     protected readonly resolvedMinWidth: _angular_core.Signal<string | null>;
     sortChange: _angular_core.OutputEmitterRef<TnSortEvent>;
     selectionChange: _angular_core.OutputEmitterRef<T[]>;