@truenas/ui-components 0.1.65 → 0.1.67

package/package.json

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

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, InjectionToken, Signal, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { OnDestroy, ElementRef, 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';
@@ -14,8 +14,10 @@ import { Overlay } from '@angular/cdk/overlay';
 import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 
-declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccessor {
+declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccessor, OnDestroy {
     private readonly elementRef;
+    private readonly overlay;
+    private readonly viewContainerRef;
     /** Unique instance ID for ARIA linkage */
     protected readonly uid: string;
     /** All available options */
@@ -32,14 +34,31 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
     filterFn: _angular_core.InputSignal<((option: T, searchTerm: string) => boolean) | undefined>;
     /** Text shown when no options match the search */
     noResultsText: _angular_core.InputSignal<string>;
-    /** Maximum number of options to render */
+    /**
+     * Maximum number of options to render.
+     *
+     * Defaults to `Infinity` so browsing the open dropdown without a search term
+     * never silently truncates a long list. Pass an explicit cap if you want to
+     * limit how many filtered results are rendered at once.
+     */
     maxResults: _angular_core.InputSignal<number>;
+    /**
+     * Max height of the dropdown panel before it scrolls. Accepts a number
+     * (interpreted as `px`) or any CSS length string (e.g. `'320px'`,
+     * `'min(320px, 40vh)'`). Surfaced as the `--tn-autocomplete-panel-max-height`
+     * custom property so it can also be themed in CSS.
+     */
+    panelMaxHeight: _angular_core.InputSignal<string | number>;
     /** Test ID attribute */
     testId: _angular_core.InputSignal<string>;
     /** Emits when an option is selected */
     optionSelected: _angular_core.OutputEmitterRef<T>;
     /** Reference to the input element */
     inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Template for the dropdown panel, portaled into a CDK overlay on open. */
+    private dropdownTemplate;
+    /** Normalized panel max-height as a CSS length string. */
+    protected panelMaxHeightValue: _angular_core.Signal<string>;
     /** Current search term typed by the user */
     protected searchTerm: _angular_core.WritableSignal<string>;
     /** Whether the dropdown is open */
@@ -58,7 +77,11 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
     protected hasResults: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
-    constructor();
+    /** Live overlay holding the dropdown panel, or undefined when closed. */
+    private overlayRef?;
+    /** Subscriptions tied to the current overlay; torn down on close. */
+    private overlaySubs;
+    ngOnDestroy(): void;
     writeValue(value: T | null): void;
     registerOnChange(fn: (value: T | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -69,10 +92,22 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
     onOptionClick(option: T): void;
     onKeydown(event: KeyboardEvent): void;
     private selectOption;
+    private open;
     private close;
+    /**
+     * Attach the dropdown panel as a CDK overlay anchored to the input.
+     *
+     * Why an overlay (vs. an inline absolutely-positioned panel): the panel is
+     * appended to the overlay container on `document.body`, so it can never be
+     * clipped by an ancestor's `overflow: hidden`/`auto` (e.g. a surrounding
+     * card). CDK also flips the panel above the input near the viewport edge and
+     * matches its width to the input. Mirrors TnSelectComponent's approach.
+     */
+    private attachOverlay;
+    private detachOverlay;
     private scrollToHighlighted;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnAutocompleteComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnAutocompleteComponent<any>, "tn-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnAutocompleteComponent<any>, "tn-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; }, never, never, true, never>;
 }
 
 /**
@@ -2284,7 +2319,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<"left" | "right" | "top" | "bottom">;
+    highlightPosition: _angular_core.InputSignal<"bottom" | "top" | "left" | "right">;
     /**
      * Test-id applied to the tablist root element. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
@@ -2926,6 +2961,10 @@ declare class TnFormFieldComponent implements AfterContentInit {
     required: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<string>;
     subscriptSizing: _angular_core.InputSignal<SubscriptSizing>;
+    /** Optional tooltip shown via a help icon next to the label. */
+    tooltip: _angular_core.InputSignal<string>;
+    /** Placement of the tooltip relative to its help icon. */
+    tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
     control: _angular_core.Signal<NgControl | undefined>;
     protected hasError: _angular_core.WritableSignal<boolean>;
     protected errorMessage: _angular_core.WritableSignal<string>;
@@ -2936,7 +2975,7 @@ declare class TnFormFieldComponent implements AfterContentInit {
     showHint: _angular_core.Signal<boolean>;
     protected showSubscript: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnFormFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFormFieldComponent, "tn-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; }, {}, ["control"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFormFieldComponent, "tn-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, ["control"], ["*"], true, never>;
 }
 
 /**
@@ -2970,6 +3009,7 @@ declare class TnFormFieldHarness extends ComponentHarness {
     private _label;
     private _error;
     private _hint;
+    private _tooltip;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a form field
      * with specific attributes.
@@ -3038,6 +3078,30 @@ declare class TnFormFieldHarness extends ComponentHarness {
      * ```
      */
     getHint(): Promise<string | null>;
+    /**
+     * Checks whether the form field has a tooltip help icon.
+     *
+     * @returns Promise resolving to true if the tooltip trigger is present.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Purpose' }));
+     * expect(await field.hasTooltip()).toBe(true);
+     * ```
+     */
+    hasTooltip(): Promise<boolean>;
+    /**
+     * Gets the tooltip message (read from the trigger's accessible label).
+     *
+     * @returns Promise resolving to the tooltip text, or null if no tooltip.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Purpose' }));
+     * expect(await field.getTooltip()).toBe('What this share is used for');
+     * ```
+     */
+    getTooltip(): Promise<string | null>;
     /**
      * Checks whether the form field is marked as required.
      *