@truenas/ui-components 0.3.14 → 0.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "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 { 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,11 +322,11 @@ 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;
@@ -1608,6 +1651,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 +3285,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 +3496,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 +3641,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 +8729,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 };