@truenas/ui-components 0.3.14 → 0.3.16

package/package.json

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

package/src/styles/themes.css

@@ -657,3 +657,102 @@ tn-dialog-shell {
   box-shadow: none;
   margin: 0;
 }
+
+/* ================================
+   CDK Overlay base styles
+   ================================
+   Mirrors @angular/cdk/overlay-prebuilt.css. These structural rules are
+   REQUIRED for any component built on the CDK connected-position overlay
+   (tn-select, tn-autocomplete, tn-tooltip, tn-file-picker, tn-date-input…).
+   Consuming apps that only import this themes.css would otherwise never load
+   them, with two visible symptoms:
+
+     1. pointer-events: none on the overlay container is INHERITED by the
+        connected-position bounding box (a flex column anchored to the trigger
+        that is typically far wider/taller than the visible panel). Without it
+        the bounding box keeps the default `auto` and silently eats clicks in
+        the empty area around the panel — so a no-backdrop dropdown like
+        tn-select can't be dismissed by clicking "outside" it (the click lands
+        on the bounding box, which is technically inside the overlay, so CDK's
+        outsidePointerEvents() never fires).
+     2. .cdk-overlay-pane { max-height: 100% } keeps panels constrained to the
+        viewport so their internal `overflow-y: auto` regions actually scroll.
+
+   Only .cdk-overlay-pane re-enables pointer-events: auto, so the panel itself
+   stays interactive while everything around it is click-through. */
+.cdk-overlay-container,
+.cdk-global-overlay-wrapper {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1000;
+}
+
+.cdk-overlay-container:empty {
+  display: none;
+}
+
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1000;
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+  z-index: 1000;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+  z-index: 1000;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  opacity: 0;
+  z-index: 1000;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.cdk-global-scrollblock {
+  position: fixed;
+  width: 100%;
+  overflow-y: scroll;
+}

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, Signal, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
@@ -82,6 +82,42 @@ declare function scopeTestId(base: TnTestIdValue, ...suffix: (string | number |
  */
 declare function composeTestId(type: string | null | undefined, value: TnTestIdValue): string;
 
+/**
+ * Resolve a form control's test-id base, falling back to the bound control's
+ * name (`formControlName`, a named `[formControl]`, or `ngModel`) when the
+ * consumer provides no explicit `testId`.
+ *
+ * Call from a form control's field initializer and bind the result on the
+ * element that represents the control:
+ *
+ * ```ts
+ * protected resolvedTestId = controlTestId(this.testId);
+ * ```
+ * ```html
+ * <input tnTestIdType="input" [tnTestId]="resolvedTestId()" />
+ * ```
+ *
+ * The element-type prefix (`tnTestIdType`) still applies, so a
+ * `<tn-input formControlName="sshPort">` with no `testId` emits
+ * `input-ssh-port` — exactly what a consumer would otherwise hand-write as
+ * `testId="ssh-port"`. An explicit `testId` always wins.
+ *
+ * Two deliberate constraints make this safe inside a `ControlValueAccessor`:
+ *
+ * - **`self`-scoped**: the lookup reads only the `NgControl` on the component's
+ *   OWN host element, never an ancestor's. A composite control whose template
+ *   embeds child controls therefore can't leak its own name onto those children
+ *   (which would make their ids collide).
+ * - **lazy**: the `NgControl` is resolved on first read, not in the injection
+ *   context. Eagerly injecting `NgControl` into a component that provides
+ *   `NG_VALUE_ACCESSOR` is circular (the control needs the value accessor, the
+ *   accessor would need the control); reading it after construction is not.
+ *
+ * Must be called within an injection context (a field initializer or
+ * constructor).
+ */
+declare function controlTestId(testId: Signal<TnTestIdValue>): Signal<TnTestIdValue>;
+
 /**
  * Test-id attribute names supported by the library.
  *
@@ -118,6 +154,10 @@ declare const TN_TEST_ATTR: InjectionToken<TnTestAttrName>;
  * {@link composeTestId}). When no `tnTestIdType` is set the value is written
  * verbatim, so existing call sites are unaffected.
  *
+ * Form controls derive an unset base from the bound control's name via
+ * {@link controlTestId} before passing it here, so a control stays targetable by
+ * automation without the consumer repeating the name as a `testId`.
+ *
  * @example
  * ```html
  * <!-- component-owned prefix: emits data-testid="button-save" -->
@@ -200,6 +240,8 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
     emptyLabel: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
     multiple: _angular_core.InputSignal<boolean>;
     /**
      * Optional extractor for the per-option test-id discriminator. Defaults to
@@ -245,8 +287,9 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
     private instanceId;
     /**
      * Id namespace used by all DOM ids the template emits (dropdown panel,
-     * option rows, group labels). Prefers `testId` when set so tests can target
-     * specific instances; otherwise falls back to a per-instance counter so two
+     * option rows, group labels). Prefers the resolved test-id base (explicit
+     * `testId`, else the bound control name) so tests can target specific
+     * instances; otherwise falls back to a per-instance counter so two
      * `<tn-select>`s on the same page never collide on `aria-controls`/group ids.
      */
     protected idNamespace: _angular_core.Signal<string>;
@@ -279,16 +322,15 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
     isOptionFocused(option: TnSelectOption<T>): boolean;
     /**
      * Test-id segments for an option row, consumed by `[tnTestId]` with
-     * `tnTestIdType="option"`. The select's `testId` scopes each option so ids
-     * stay unique across selects: base `quick-filters` + option value `ssd` →
-     * `option-quick-filters-ssd`; with no base → `option-ssd`. The discriminator
-     * comes from `optionTestIdKey` when provided, else the option's primitive
-     * `value`, else its `label`.
+     * `tnTestIdType="option"`. The select's resolved base (explicit `testId`, else
+     * the bound control name) scopes each option so ids stay unique across selects:
+     * base `quick-filters` + option value `ssd` → `option-quick-filters-ssd`; with
+     * no base → `option-ssd`. The discriminator comes from `optionTestIdKey` when
+     * provided, else the option's primitive `value`, else its `label`.
      */
     protected optionTestIdParts(option: TnSelectOption<T>): (string | number | null | undefined)[];
     private onChange;
     private onTouched;
-    private elementRef;
     private cdr;
     private overlay;
     private viewContainerRef;
@@ -307,11 +349,19 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
      *
      * Why an overlay (vs. an inline absolutely-positioned panel):
      *   - Escapes parent `overflow: hidden`/clipping in surrounding layouts.
-     *   - `outsidePointerEvents()` notifies on outside pointerdown WITHOUT
-     *     intercepting the click (no backdrop) — so the user's click reaches
-     *     the underlying target while the select closes silently.
      *   - Position is recomputed on scroll so the panel stays attached.
-     *   - Width is matched to the trigger so the panel doesn't jump in size.
+     *
+     * Dismissal uses a transparent, full-viewport backdrop (`backdropClick()`).
+     * We previously ran backdrop-less with `outsidePointerEvents()`, but that
+     * only closes when the click lands strictly OUTSIDE the overlay pane — and
+     * the pane was sized to the (often full-width) trigger while the panel itself
+     * is only as wide as its content. The empty pane area to the right of the
+     * options stayed `pointer-events: auto`, so clicks there never counted as
+     * "outside" and the dropdown wouldn't close. A transparent backdrop closes on
+     * ANY click outside the panel regardless of pane geometry — the standard
+     * pattern used by native `<select>` and Material's `mat-select`. We therefore
+     * also drop the explicit `width`: the pane sizes to the panel content so the
+     * clickable surface matches what the user sees.
      */
     private attachOverlay;
     private detachOverlay;
@@ -1608,6 +1658,8 @@ declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValue
     inputType: _angular_core.InputSignal<InputType>;
     placeholder: _angular_core.InputSignal<string>;
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
     disabled: _angular_core.InputSignal<boolean>;
     multiline: _angular_core.InputSignal<boolean>;
     rows: _angular_core.InputSignal<number>;
@@ -3240,6 +3292,8 @@ declare class TnCheckboxComponent implements AfterViewInit, OnDestroy, ControlVa
     required: _angular_core.InputSignal<boolean>;
     indeterminate: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
     error: _angular_core.InputSignal<string | null>;
     checked: _angular_core.InputSignal<boolean>;
     change: _angular_core.OutputEmitterRef<boolean>;
@@ -3449,6 +3503,8 @@ declare class TnRadioComponent implements AfterViewInit, OnDestroy, ControlValue
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
     error: _angular_core.InputSignal<string | null>;
     change: _angular_core.OutputEmitterRef<unknown>;
     id: string;
@@ -3592,6 +3648,8 @@ declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, Contro
     required: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<SlideToggleColor>;
     testId: _angular_core.InputSignal<TnTestIdValue>;
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
     ariaLabel: _angular_core.InputSignal<string | undefined>;
     ariaLabelledby: _angular_core.InputSignal<string | undefined>;
     checked: _angular_core.InputSignal<boolean>;
@@ -8678,5 +8736,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };