@truenas/ui-components 0.1.66 → 0.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "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>;
 }
 
 /**
@@ -1491,16 +1526,20 @@ declare class TnMenuItemComponent {
 }
 
 /**
- * Activates CDK menu hover-to-open behavior for menus opened via custom overlays.
+ * Activates CDK menu hover-to-open behavior — and keyboard focus entry — for a
+ * root menu opened via a custom overlay instead of CDK's own `CdkMenuTrigger`.
  *
  * CDK's hover-to-open for submenu triggers is guarded by `!menuStack.isEmpty()`.
- * When a CdkMenu is opened via TnMenuTriggerDirective (custom overlay) instead of
- * CDK's own CdkMenuTrigger, the menu is considered "inline" and doesn't register
- * with the stack, disabling hover for its submenu triggers.
- *
- * This directive pushes the CdkMenu to its own stack and focuses the element
- * (to trigger the CdkMenu's focusin host listener, preventing the hasFocus
- * auto-close subscription from immediately clearing the stack).
+ * When a `CdkMenu` is opened via `TnMenuTriggerDirective` (custom overlay)
+ * rather than `CdkMenuTrigger`, the menu is considered "inline" and doesn't
+ * register with the stack, disabling hover for its submenu triggers and leaving
+ * keyboard focus outside the panel.
+ *
+ * This directive pushes that root menu onto its own stack and moves focus to
+ * the first (or selected) item so arrow-key navigation works immediately.
+ * Submenus — opened by `CdkMenuTrigger` — already push themselves and are
+ * focused by CDK, so for them this directive only installs the skip-disabled
+ * predicate and otherwise stays out of the way.
  */
 declare class TnMenuActivateHoverDirective implements AfterContentInit {
     private cdkMenu;
@@ -1509,6 +1548,7 @@ declare class TnMenuActivateHoverDirective implements AfterContentInit {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMenuActivateHoverDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnMenuActivateHoverDirective, "[tnMenuActivateHover]", never, {}, {}, never, never, true, never>;
 }
+
 interface TnMenuItem {
     id: string;
     label: string;
@@ -1558,7 +1598,6 @@ declare class TnMenuComponent implements OnDestroy {
     private closeContextMenu;
     ngOnDestroy(): void;
     onContextMenu(event: MouseEvent): void;
-    trackByItemId(index: number, item: TnMenuItem): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMenuComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuComponent, "tn-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "menuItemClick": "menuItemClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; }, ["contentItems"], ["*"], true, never>;
 }
@@ -2284,7 +2323,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`).