@truenas/ui-components 0.1.60 → 0.1.62

package/package.json

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

package/src/styles/themes.css

@@ -591,10 +591,16 @@ tn-dialog-shell {
   border-top: 1px solid var(--tn-lines, #e5e7eb);
   display: flex;
   justify-content: flex-end;
+  gap: 16px;
 }
 
-.tn-dialog__actions tn-button:not(:first-child) {
-  margin-left: 16px;
+/* Buttons are projected inside a [tnDialogAction] wrapper, so the gap must
+   live on the wrapper to separate them — the footer gap only spaces the
+   wrapper itself. */
+.tn-dialog__actions [tnDialogAction] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 /* Destructive variant */

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, AfterViewInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, OnInit, InjectionToken, Signal, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { ElementRef, OnDestroy, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, 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';
@@ -717,9 +717,60 @@ declare class TnIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnIconComponent, "tn-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "library": { "alias": "library"; "required": false; "isSignal": true; }; "fullSize": { "alias": "fullSize"; "required": false; "isSignal": true; }; "customSize": { "alias": "customSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type TooltipPosition = 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
+declare class TnTooltipDirective implements OnInit, OnDestroy {
+    message: _angular_core.InputSignal<string>;
+    position: _angular_core.InputSignal<TooltipPosition>;
+    disabled: _angular_core.InputSignal<boolean>;
+    showDelay: _angular_core.InputSignal<number>;
+    hideDelay: _angular_core.InputSignal<number>;
+    tooltipClass: _angular_core.InputSignal<string>;
+    private _overlayRef;
+    private _tooltipInstance;
+    private _showTimeout;
+    private _hideTimeout;
+    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;
+    ngOnDestroy(): void;
+    _onMouseEnter(): void;
+    _onMouseLeave(): void;
+    _onFocus(): void;
+    _onBlur(): void;
+    _onKeydown(event: KeyboardEvent): void;
+    /** Shows the tooltip */
+    show(delay?: number): void;
+    /** Hides the tooltip */
+    hide(delay?: number): void;
+    /** Toggle the tooltip visibility */
+    toggle(): void;
+    private _createOverlay;
+    private _resolvePosition;
+    private _attachTooltip;
+    private _getPositions;
+    private _clearTimeouts;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTooltipDirective, "[tnTooltip]", never, { "message": { "alias": "tnTooltip"; "required": false; "isSignal": true; }; "position": { "alias": "tnTooltipPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "tnTooltipDisabled"; "required": false; "isSignal": true; }; "showDelay": { "alias": "tnTooltipShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "tnTooltipHideDelay"; "required": false; "isSignal": true; }; "tooltipClass": { "alias": "tnTooltipClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class TnIconButtonComponent implements AfterViewInit {
     disabled: _angular_core.InputSignal<boolean>;
+    /** Compact variant with reduced padding, for dense contexts like toolbars. */
+    dense: _angular_core.InputSignal<boolean>;
     ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** 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`).
@@ -729,7 +780,11 @@ declare class TnIconButtonComponent implements AfterViewInit {
     size: _angular_core.InputSignal<IconSize>;
     color: _angular_core.InputSignal<string | undefined>;
     tooltip: _angular_core.InputSignal<string | undefined>;
+    /** Position of the styled tooltip relative to the button. */
+    tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
     library: _angular_core.InputSignal<IconLibraryType | undefined>;
+    /** Extra class(es) applied to the inner icon, e.g. for animations or state colors. */
+    iconClass: _angular_core.InputSignal<string>;
     onClick: _angular_core.OutputEmitterRef<MouseEvent>;
     private hostRef;
     private buttonRef;
@@ -743,7 +798,7 @@ declare class TnIconButtonComponent implements AfterViewInit {
     focus(options?: FocusOptions): void;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnIconButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnIconButtonComponent, "tn-icon-button", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "library": { "alias": "library"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnIconButtonComponent, "tn-icon-button", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "library": { "alias": "library"; "required": false; "isSignal": true; }; "iconClass": { "alias": "iconClass"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -2000,7 +2055,7 @@ interface RadioHarnessFilters extends BaseHarnessFilters {
 type SlideToggleColor = 'primary' | 'accent' | 'warn';
 declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
     toggleEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    labelPosition: _angular_core.InputSignal<"after" | "before">;
+    labelPosition: _angular_core.InputSignal<"before" | "after">;
     label: _angular_core.InputSignal<string | undefined>;
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
@@ -2165,7 +2220,7 @@ declare class TnTabsComponent implements AfterContentInit, AfterViewInit, OnDest
     tabHeader: _angular_core.Signal<ElementRef<HTMLElement>>;
     selectedIndex: _angular_core.InputSignal<number>;
     orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
-    highlightPosition: _angular_core.InputSignal<"top" | "bottom" | "left" | "right">;
+    highlightPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
     /**
      * Test-id applied to the tablist root element. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
@@ -2563,7 +2618,7 @@ interface TabsHarnessFilters extends BaseHarnessFilters {
  */
 declare class TnMenuTriggerDirective implements OnDestroy {
     menu: _angular_core.InputSignal<TnMenuComponent>;
-    tnMenuPosition: _angular_core.InputSignal<"after" | "before" | "above" | "below">;
+    tnMenuPosition: _angular_core.InputSignal<"above" | "below" | "before" | "after">;
     private overlayRef?;
     private isMenuOpen;
     private itemClickSub?;
@@ -5674,47 +5729,6 @@ interface ButtonToggleHarnessFilters extends BaseHarnessFilters {
     label?: string | RegExp;
 }
 
-type TooltipPosition = 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
-declare class TnTooltipDirective implements OnInit, OnDestroy {
-    message: _angular_core.InputSignal<string>;
-    position: _angular_core.InputSignal<TooltipPosition>;
-    disabled: _angular_core.InputSignal<boolean>;
-    showDelay: _angular_core.InputSignal<number>;
-    hideDelay: _angular_core.InputSignal<number>;
-    tooltipClass: _angular_core.InputSignal<string>;
-    private _overlayRef;
-    private _tooltipInstance;
-    private _showTimeout;
-    private _hideTimeout;
-    private _isTooltipVisible;
-    private _positionSub;
-    protected _ariaDescribedBy: string | null;
-    private _overlay;
-    private _elementRef;
-    private _viewContainerRef;
-    private _overlayPositionBuilder;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    _onMouseEnter(): void;
-    _onMouseLeave(): void;
-    _onFocus(): void;
-    _onBlur(): void;
-    _onKeydown(event: KeyboardEvent): void;
-    /** Shows the tooltip */
-    show(delay?: number): void;
-    /** Hides the tooltip */
-    hide(delay?: number): void;
-    /** Toggle the tooltip visibility */
-    toggle(): void;
-    private _createOverlay;
-    private _resolvePosition;
-    private _attachTooltip;
-    private _getPositions;
-    private _clearTimeouts;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTooltipDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTooltipDirective, "[tnTooltip]", never, { "message": { "alias": "tnTooltip"; "required": false; "isSignal": true; }; "position": { "alias": "tnTooltipPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "tnTooltipDisabled"; "required": false; "isSignal": true; }; "showDelay": { "alias": "tnTooltipShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "tnTooltipHideDelay"; "required": false; "isSignal": true; }; "tooltipClass": { "alias": "tnTooltipClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class TnTooltipComponent {
     message: _angular_core.InputSignal<string>;
     id: _angular_core.InputSignal<string>;
@@ -5762,11 +5776,15 @@ declare class TnDialog {
 declare class TnDialogShellComponent implements OnInit {
     title: _angular_core.InputSignal<string>;
     showFullscreenButton: _angular_core.InputSignal<boolean>;
+    /** Stable id for the title heading, referenced by the dialog's aria-labelledby. */
+    readonly titleId: string;
     isFullscreen: _angular_core.WritableSignal<boolean>;
     private originalStyles;
     private ref;
     private document;
+    private host;
     private data;
+    constructor();
     ngOnInit(): void;
     close(result?: unknown): void;
     toggleFullscreen(): void;
@@ -5874,6 +5892,20 @@ declare class TnDialogHarness extends ComponentHarness {
      * ```
      */
     close(): Promise<void>;
+    /**
+     * Gets the `tabindex` attribute of the close button, or null if unset.
+     * A null/non-negative value means the button is reachable via the Tab key.
+     *
+     * @returns Promise resolving to the tabindex attribute value.
+     */
+    getCloseButtonTabIndex(): Promise<string | null>;
+    /**
+     * Gets the `tabindex` attribute of the fullscreen button, or null if unset
+     * or if the dialog has no fullscreen button.
+     *
+     * @returns Promise resolving to the tabindex attribute value.
+     */
+    getFullscreenButtonTabIndex(): Promise<string | null>;
     /**
      * Clicks an action button in the dialog footer by its label.
      * Only matches buttons inside the `tnDialogAction` footer area, not buttons in content.
@@ -5999,6 +6031,7 @@ declare class TnSidePanelHeaderActionDirective {
 declare class TnSidePanelComponent implements OnDestroy {
     private iconRegistry;
     private document;
+    private destroyRef;
     private overlayRef;
     protected initialized: _angular_core.WritableSignal<boolean>;
     open: _angular_core.ModelSignal<boolean>;
@@ -6007,6 +6040,14 @@ declare class TnSidePanelComponent implements OnDestroy {
     hasBackdrop: _angular_core.InputSignal<boolean>;
     closeOnBackdropClick: _angular_core.InputSignal<boolean>;
     closeOnEscape: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional gate evaluated before a user-initiated close (× button, backdrop click,
+     * or Escape). Return an observable resolving to `false` to veto the close — e.g. to
+     * prompt about unsaved changes and keep the panel open if the user cancels. The
+     * observable is expected to emit once. Programmatic `open` changes made by the host
+     * bypass this guard; when unset, the panel closes immediately.
+     */
+    closeGuard: _angular_core.InputSignal<(() => Observable<boolean>) | undefined>;
     /**
      * Test-id applied to the panel's root overlay element. Rendered under whichever attribute
      * name is configured via `TN_TEST_ATTR` (default `data-testid`).
@@ -6032,7 +6073,7 @@ declare class TnSidePanelComponent implements OnDestroy {
     private restoreFocus;
     private registerMdiIcons;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSidePanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSidePanelComponent, "tn-side-panel", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "closeButtonTestId": { "alias": "closeButtonTestId"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, ["actionContent"], ["[tnSidePanelHeaderAction]", "*", "[tnSidePanelAction]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSidePanelComponent, "tn-side-panel", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeGuard": { "alias": "closeGuard"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "closeButtonTestId": { "alias": "closeButtonTestId"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, ["actionContent"], ["[tnSidePanelHeaderAction]", "*", "[tnSidePanelAction]"], true, never>;
 }
 
 interface SidePanelHarnessFilters extends BaseHarnessFilters {
@@ -6405,11 +6446,18 @@ interface TnToastConfig {
     type?: TnToastType;
     /** Vertical position. Default: TnToastPosition.Top. */
     position?: TnToastPosition;
+    /**
+     * Test id applied to the action button. Rendered under whichever attribute name is
+     * configured via `TN_TEST_ATTR` (default `data-testid`). Only relevant when an action
+     * is provided.
+     */
+    actionTestId?: string;
 }
 
 declare class TnToastComponent {
     message: _angular_core.WritableSignal<string>;
     action: _angular_core.WritableSignal<string | null>;
+    actionTestId: _angular_core.WritableSignal<string | undefined>;
     type: _angular_core.WritableSignal<TnToastType>;
     position: _angular_core.WritableSignal<TnToastPosition>;
     visible: _angular_core.WritableSignal<boolean>;