@truenas/ui-components 0.1.24 → 0.1.26

package/package.json

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

package/src/styles/themes.css

@@ -11,6 +11,7 @@
   --tn-accent: #545454;
   --tn-bg1: #1E1E1E;
   --tn-bg2: #282828;
+  --tn-bg3: #333333;
   --tn-fg1: #ffffff;
   --tn-fg2: rgba(255,255,255,0.85);
   --tn-alt-bg1: #383838;
@@ -67,6 +68,7 @@
   --tn-accent: var(--tn-yellow);
   --tn-bg1: #1E1E1E;
   --tn-bg2: #282828;
+  --tn-bg3: #333333;
   --tn-fg1: #e0e0e0;
   --tn-fg2: rgba(255,255,255,0.85);
   --tn-alt-bg1: #383838;
@@ -100,6 +102,7 @@
   --tn-accent: #DED142;
   --tn-bg1: #f2f2f2;
   --tn-bg2: #ffffff;
+  --tn-bg3: #e8e8e8;
   --tn-fg1: #585858;
   --tn-fg2: #666666;
   --tn-alt-bg1: #f0f0f0;
@@ -134,6 +137,7 @@
   --tn-accent: #bd93f9;
   --tn-bg1: #181a26;
   --tn-bg2: #282a36;
+  --tn-bg3: #343746;
   --tn-fg1: #efefef;
   --tn-fg2: #cacac5;
   --tn-alt-bg1: #3a3d4a;
@@ -168,6 +172,7 @@
   --tn-accent: #5e81aC;
   --tn-bg1: #2e3440;
   --tn-bg2: #3b4252;
+  --tn-bg3: #454d5e;
   --tn-fg1: #eceff4;
   --tn-fg2: #e5e9f0;
   --tn-alt-bg1: #434c5e;
@@ -201,6 +206,7 @@
   --tn-accent: #f0cb00;
   --tn-bg1: #F2F2F2;
   --tn-bg2: #FAFAFA;
+  --tn-bg3: #e8e8e8;
   --tn-fg1: #3f3f3f;
   --tn-fg2: #666666;
   --tn-alt-bg1: #f0f0f0;
@@ -237,6 +243,7 @@
   --tn-accent: var(--tn-cyan);
   --tn-bg1: #002b36;
   --tn-bg2: #073642;
+  --tn-bg3: #0a4050;
   --tn-fg1: #586e75;
   --tn-fg2: #7f99a2;
   --tn-alt-bg1: #0e4853;
@@ -272,6 +279,7 @@
   --tn-accent: var(--tn-violet);
   --tn-bg1: #212a35;
   --tn-bg2: #303d48;
+  --tn-bg3: #3d4a55;
   --tn-fg1: #aaaaaa;
   --tn-fg2: #cccccc;
   --tn-alt-bg1: #3d4a55;
@@ -304,6 +312,7 @@
   --tn-accent: var(--tn-magenta);
   --tn-bg1: #dddddd;
   --tn-bg2: #ffffff;
+  --tn-bg3: #d0d0d0;
   --tn-fg1: #222222;
   --tn-fg2: #333333;
   --tn-alt-bg1: #f0f0f0;

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

@@ -1191,6 +1191,21 @@ declare class TnExpansionPanelComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnExpansionPanelComponent, "tn-expansion-panel", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "titleStyle": { "alias": "titleStyle"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; "toggleEvent": "toggleEvent"; }, never, ["[slot=title]", "*"], true, never>;
 }
 
+/**
+ * Directive to mark content for projection into the checkbox label area.
+ * Use when the label needs rich content (links, icons, etc.) instead of plain text.
+ *
+ * @example
+ * ```html
+ * <tn-checkbox formControlName="terms">
+ *   <span tnCheckboxLabel>I agree to the <a href="/terms">Terms</a></span>
+ * </tn-checkbox>
+ * ```
+ */
+declare class TnCheckboxLabelDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnCheckboxLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnCheckboxLabelDirective, "[tnCheckboxLabel]", never, {}, {}, never, never, true, never>;
+}
 declare class TnCheckboxComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
     checkboxEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     label: _angular_core.InputSignal<string>;
@@ -1202,8 +1217,11 @@ declare class TnCheckboxComponent implements AfterViewInit, OnDestroy, ControlVa
     error: _angular_core.InputSignal<string | null>;
     checked: _angular_core.InputSignal<boolean>;
     change: _angular_core.OutputEmitterRef<boolean>;
+    private labelContent;
+    protected hasProjectedLabel: _angular_core.Signal<boolean>;
     id: string;
     private internalChecked;
+    private cvaControlled;
     private formDisabled;
     isDisabled: _angular_core.Signal<boolean>;
     private focusMonitor;
@@ -1219,7 +1237,182 @@ declare class TnCheckboxComponent implements AfterViewInit, OnDestroy, ControlVa
     onCheckboxChange(event: Event): void;
     classes: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCheckboxComponent, "tn-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCheckboxComponent, "tn-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; }, ["labelContent"], ["[tnCheckboxLabel]"], true, never>;
+}
+
+/**
+ * Harness for interacting with tn-checkbox in tests.
+ * Provides methods for checking, unchecking, and querying checkbox state.
+ *
+ * @example
+ * ```typescript
+ * // Find and check a checkbox
+ * const checkbox = await loader.getHarness(TnCheckboxHarness.with({ label: 'Accept terms' }));
+ * await checkbox.check();
+ * expect(await checkbox.isChecked()).toBe(true);
+ *
+ * // Toggle a checkbox
+ * await checkbox.toggle();
+ * expect(await checkbox.isChecked()).toBe(false);
+ *
+ * // Find by testId
+ * const terms = await loader.getHarness(TnCheckboxHarness.with({ testId: 'terms-checkbox' }));
+ * ```
+ */
+declare class TnCheckboxHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnCheckboxComponent` instance.
+     */
+    static hostSelector: string;
+    private _input;
+    private _label;
+    private _text;
+    private _error;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a checkbox
+     * with specific attributes.
+     *
+     * @param options Options for filtering which checkbox instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find by label text
+     * const checkbox = await loader.getHarness(TnCheckboxHarness.with({ label: 'Accept' }));
+     *
+     * // Find by label regex
+     * const checkbox = await loader.getHarness(TnCheckboxHarness.with({ label: /terms/i }));
+     *
+     * // Find by testId
+     * const checkbox = await loader.getHarness(TnCheckboxHarness.with({ testId: 'my-checkbox' }));
+     * ```
+     */
+    static with(options?: CheckboxHarnessFilters): HarnessPredicate<TnCheckboxHarness>;
+    /**
+     * Gets the checkbox label text content.
+     *
+     * @returns Promise resolving to the label text.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.getLabelText()).toBe('Accept terms');
+     * ```
+     */
+    getLabelText(): Promise<string>;
+    /**
+     * Checks whether the checkbox is currently checked.
+     *
+     * @returns Promise resolving to true if the checkbox is checked.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.isChecked()).toBe(false);
+     * ```
+     */
+    isChecked(): Promise<boolean>;
+    /**
+     * Checks whether the checkbox is disabled.
+     *
+     * @returns Promise resolving to true if the checkbox is disabled.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.isDisabled()).toBe(false);
+     * ```
+     */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Checks whether the checkbox is required.
+     *
+     * @returns Promise resolving to true if the checkbox is required.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.isRequired()).toBe(true);
+     * ```
+     */
+    isRequired(): Promise<boolean>;
+    /**
+     * Checks whether the checkbox is in the indeterminate state.
+     *
+     * @returns Promise resolving to true if the checkbox is indeterminate.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.isIndeterminate()).toBe(false);
+     * ```
+     */
+    isIndeterminate(): Promise<boolean>;
+    /**
+     * Gets the test ID attribute value.
+     *
+     * @returns Promise resolving to the test ID string, or null.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.getTestId()).toBe('terms-checkbox');
+     * ```
+     */
+    getTestId(): Promise<string | null>;
+    /**
+     * Gets the error message text, if any.
+     *
+     * @returns Promise resolving to the error message, or null if none.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * expect(await checkbox.getErrorText()).toBe('You must accept the terms');
+     * ```
+     */
+    getErrorText(): Promise<string | null>;
+    /**
+     * Checks the checkbox. No-op if already checked.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * await checkbox.check();
+     * expect(await checkbox.isChecked()).toBe(true);
+     * ```
+     */
+    check(): Promise<void>;
+    /**
+     * Unchecks the checkbox. No-op if already unchecked.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * await checkbox.uncheck();
+     * expect(await checkbox.isChecked()).toBe(false);
+     * ```
+     */
+    uncheck(): Promise<void>;
+    /**
+     * Toggles the checkbox checked state by clicking the label.
+     *
+     * @example
+     * ```typescript
+     * const checkbox = await loader.getHarness(TnCheckboxHarness);
+     * await checkbox.toggle();
+     * ```
+     */
+    toggle(): Promise<void>;
+}
+/**
+ * A set of criteria that can be used to filter a list of `TnCheckboxHarness` instances.
+ */
+interface CheckboxHarnessFilters extends BaseHarnessFilters {
+    /** Filters by label text. Supports string or regex matching. */
+    label?: string | RegExp;
+    /** Filters by data-testid attribute. */
+    testId?: string;
 }
 
 declare class TnRadioComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
@@ -4419,5 +4612,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, 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, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
-export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, CalendarCell, ChipColor, CreateFolderEvent, DateRange, DialogHarnessFilters, EmptyHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, 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, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateRange, DialogHarnessFilters, EmptyHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };