@truenas/ui-components 0.1.2 → 0.1.4

package/package.json

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

package/src/styles/themes.css

@@ -437,79 +437,7 @@ textarea.tn-input-directive {
 }
 
 /* ================================
-   Let's apply these variables to
-   the preview and story book docs elements
-   ================================ */
-
-html, body, #storybook-docs > .sbdocs-wrapper {
-  font-family: var(--tn-font-family-body);
-  color: var(--tn-fg2) !important;
-  background-color: var(--tn-bg1) !important;
-}
-
-h1, h2, h3,h4,
-.sbdocs-title h1, .sbdocs-title h2, .sbdocs-title h3,.sbdocs-title h4 {
-  font-family: var(--tn-font-family-header);
-  color: var(--tn-fg1) !important;
-}
-
-p, li, td {
-  color: var(--tn-fg2) !important;
-}
-
-.docs-story,
-.sb-bar,
-.sbdocs-wrapper td,
-.sbdocs-preview {
-  background-color: var(--tn-bg2) !important;
-  color: var(--tn-fg2) !important;
-}
-
-thead, th {
-  background-color: var(--tn-topbar);
-  color: var(--tn-topbar-txt) !important;
-}
-
-/* Form field styles */
-input:not([role="switch"]),
-.sbdocs-wrapper select,
-.sbdocs-wrapper textarea {
-  background-color: var(--tn-bg1) !important;
-  color: var(--tn-fg2) !important;
-}
-
-.docblock-code-toggle {
-  background-color: var(--tn-btn-default-bg) !important;
-  color: var(--tn-btn-default-txt) !important;
-}
-
-.docblock-argstable-body span {
-  color: var(--tn-fg1);
-  background-color: unset;
-  border: unset;
-}
-
-.docs-story > div {
-  background-color: unset;
-}
-
-.docblock-source > div {
-  background: #000000 !important;
-  color: #dedede;
-  border: unset;
-}
-
-.docblock-source button {
-  background: var(--tn-bg2) !important;
-  color: var(--tn-fg2);
-}
-
-.docblock-source {
-  border: solid 1px var(--tn-alt-bg2) !important;
-}
-
-/* ================================
-   IX Dialog Styles
+   TN Dialog Styles
    ================================ */
 
 /* Dialog panel - the main dialog container */

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

@@ -1,8 +1,9 @@
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, ElementRef, OnDestroy, TemplateRef, AfterContentInit, ChangeDetectorRef, PipeTransform, OnInit, ViewContainerRef, AfterViewChecked } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, PipeTransform, OnInit, ViewContainerRef, AfterViewChecked } from '@angular/core';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { jest } from '@jest/globals';
 import { DataSource } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/tree';
 import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode } from '@angular/cdk/tree';
@@ -27,8 +28,27 @@ declare class DiskIconComponent {
 }
 
 type TnBannerType = 'info' | 'warning' | 'error' | 'success';
+/**
+ * Directive to mark an element as a banner action.
+ * Apply this to any element that should appear in the banner's action area.
+ *
+ * @example
+ * ```html
+ * <tn-banner heading="Error">
+ *   <button tnBannerAction>Fix Now</button>
+ * </tn-banner>
+ * ```
+ */
+declare class TnBannerActionDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnBannerActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnBannerActionDirective, "[tnBannerAction]", never, {}, {}, never, never, true, never>;
+}
 declare class TnBannerComponent {
     private iconRegistry;
+    /** Query for projected action content */
+    private actionContent;
+    /** Signal indicating whether action content has been projected */
+    protected hasAction: _angular_core.Signal<boolean>;
     heading: _angular_core.InputSignal<string>;
     message: _angular_core.InputSignal<string | undefined>;
     type: _angular_core.InputSignal<TnBannerType>;
@@ -53,7 +73,7 @@ declare class TnBannerComponent {
      */
     classes: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnBannerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnBannerComponent, "tn-banner", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnBannerComponent, "tn-banner", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, ["actionContent"], ["[tnBannerAction]"], true, never>;
 }
 
 /**
@@ -138,6 +158,93 @@ declare class TnButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }
 
+/**
+ * Harness for interacting with tn-button in tests.
+ * Provides methods for querying button state and simulating user interactions.
+ *
+ * @example
+ * ```typescript
+ * // Find and click a button
+ * const saveBtn = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+ * await saveBtn.click();
+ *
+ * // Check if button is disabled
+ * const submitBtn = await loader.getHarness(TnButtonHarness.with({ label: 'Submit' }));
+ * expect(await submitBtn.isDisabled()).toBe(false);
+ *
+ * // Find button by regex
+ * const cancelBtn = await loader.getHarness(TnButtonHarness.with({ label: /Cancel/i }));
+ * ```
+ */
+declare class TnButtonHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnButtonComponent` instance.
+     */
+    static hostSelector: string;
+    private _button;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a button
+     * with specific attributes.
+     *
+     * @param options Options for filtering which button instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find button by exact label
+     * const button = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+     *
+     * // Find button with regex pattern
+     * const button = await loader.getHarness(TnButtonHarness.with({ label: /Delete/i }));
+     * ```
+     */
+    static with(options?: ButtonHarnessFilters): HarnessPredicate<TnButtonHarness>;
+    /**
+     * Gets the button's label text.
+     *
+     * @returns Promise resolving to the button's text content.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnButtonHarness);
+     * const label = await button.getLabel();
+     * expect(label).toBe('Submit');
+     * ```
+     */
+    getLabel(): Promise<string>;
+    /**
+     * Checks whether the button is disabled.
+     *
+     * @returns Promise resolving to true if the button is disabled.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnButtonHarness.with({ label: 'Submit' }));
+     * expect(await button.isDisabled()).toBe(false);
+     * ```
+     */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Clicks the button.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+     * await button.click();
+     * ```
+     */
+    click(): Promise<void>;
+}
+/**
+ * A set of criteria that can be used to filter a list of `TnButtonHarness` instances.
+ */
+interface ButtonHarnessFilters extends BaseHarnessFilters {
+    /** Filters by button label text. Supports string or regex matching. */
+    label?: string | RegExp;
+}
+
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconSource = 'svg' | 'css' | 'unicode' | 'text' | 'sprite';
 type IconLibraryType = 'material' | 'mdi' | 'custom' | 'lucide';
@@ -1041,6 +1148,97 @@ declare function tnIconMarker(iconName: string, library?: 'mdi' | 'material' | '
  */
 declare function libIconMarker(iconName: `tn-${string}`): string;
 
+/**
+ * Mock type for TnSpriteLoaderService
+ */
+interface MockSpriteLoader {
+    ensureSpriteLoaded: jest.Mock;
+    getIconUrl: jest.Mock;
+    getSafeIconUrl: jest.Mock;
+    isSpriteLoaded: jest.Mock;
+    getSpriteConfig: jest.Mock;
+}
+/**
+ * Mock type for TnIconRegistryService
+ */
+interface MockIconRegistry {
+    resolveIcon: jest.Mock;
+    getSpriteLoader: jest.Mock;
+    registerIcon: jest.Mock;
+    registerIcons: jest.Mock;
+    registerLibrary: jest.Mock;
+}
+/**
+ * Options for customizing icon testing mocks
+ */
+interface IconTestingMockOverrides {
+    spriteLoader?: Partial<MockSpriteLoader>;
+    iconRegistry?: Partial<MockIconRegistry>;
+}
+/**
+ * Testing utilities for TnIcon components.
+ *
+ * Provides framework-specific mock implementations of icon services to simplify testing
+ * components that use TnIconComponent.
+ *
+ * @example
+ * ```typescript
+ * // Simple usage - "it just works"
+ * await TestBed.configureTestingModule({
+ *   imports: [MyComponent],
+ *   providers: [
+ *     TnIconTesting.jest.providers()
+ *   ]
+ * }).compileComponents();
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Advanced usage - customize mocks
+ * await TestBed.configureTestingModule({
+ *   imports: [MyComponent],
+ *   providers: [
+ *     TnIconTesting.jest.providers({
+ *       iconRegistry: {
+ *         resolveIcon: jest.fn(() => ({
+ *           source: 'sprite',
+ *           spriteUrl: '#custom-icon'
+ *         }))
+ *       }
+ *     })
+ *   ]
+ * }).compileComponents();
+ * ```
+ */
+declare const TnIconTesting: {
+    /**
+     * Jest-specific testing utilities.
+     */
+    readonly jest: {
+        /**
+         * Returns Angular providers with mocked icon services.
+         * Creates fresh mock instances on each call to prevent test pollution.
+         *
+         * @param overrides Optional partial mock implementations to customize behavior
+         * @returns Array of providers for TestBed
+         *
+         * @example
+         * ```typescript
+         * // Default mocks
+         * TnIconTesting.jest.providers()
+         *
+         * // Custom sprite loader behavior
+         * TnIconTesting.jest.providers({
+         *   spriteLoader: {
+         *     getIconUrl: jest.fn(() => '#custom-icon')
+         *   }
+         * })
+         * ```
+         */
+        readonly providers: (overrides?: IconTestingMockOverrides) => Provider[];
+    };
+};
+
 /**
  * Lucide Icons Integration Helper
  *
@@ -2683,5 +2881,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconComponent, TnIconHarness, TnIconRegistryService, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
-export type { BannerHarnessFilters, CalendarCell, ChipColor, CreateFolderEvent, DateRange, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, KeyCombination, LabelType, LucideIconOptions, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, ShortcutHandler, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export type { BannerHarnessFilters, ButtonHarnessFilters, CalendarCell, ChipColor, CreateFolderEvent, DateRange, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, ShortcutHandler, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };

package/src/styles/dialog.css

@@ -1,150 +0,0 @@
-/* TN Dialog Global Styles for CDK Dialog */
-
-/* CDK Dialog Container Styles */
-.cdk-dialog-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-/* Dialog Panel - this is the actual dialog box */
-.cdk-dialog-panel,
-.tn-dialog-panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-  outline: 0;
-  width: 100%;
-  max-width: 80vw;
-  max-height: 80vh;
-  background: var(--tn-bg1, #ffffff);
-  color: var(--tn-fg1, #000000);
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
-              0 24px 38px 3px rgba(0, 0, 0, 0.14),
-              0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
-
-/* Dialog backdrop */
-.cdk-dialog-backdrop {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-/* Dialog content structure styling */
-.cdk-dialog-panel > * {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Dialog title should be at the very top */
-.tn-dialog-title {
-  box-sizing: border-box;
-  display: block;
-  flex-shrink: 0; /* Don't allow shrinking */
-  width: 100%; /* Full width */
-  padding: 24px 48px 20px 24px; /* Top, right (for close button), bottom, left */
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.5;
-}
-
-/* Reset margins for any heading elements inside the title */
-.tn-dialog-title h1, 
-.tn-dialog-title h2, 
-.tn-dialog-title h3, 
-.tn-dialog-title h4, 
-.tn-dialog-title h5, 
-.tn-dialog-title h6 {
-  margin: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-/* Dialog content should expand to fill available space between title and actions */
-.tn-dialog-content {
-  flex-grow: 1;
-  overflow: auto;
-  box-sizing: border-box;
-  min-height: 0; /* Allow flexbox to shrink */
-}
-
-/* Dialog actions styling */
-.tn-dialog-actions {
-  box-sizing: border-box;
-  display: flex !important;
-  flex-shrink: 0; /* Don't allow shrinking - always visible */
-  align-items: center !important;
-  justify-content: flex-end !important;
-  width: 100%; /* Full width */
-  padding: 8px 24px 24px 24px !important; /* Top, right, bottom, left */
-  margin: 0 !important;
-  gap: 12px !important;
-  border-top: 1px solid var(--tn-lines, #e5e7eb) !important;
-}
-
-/* Close button styling */
-.tn-dialog-close-btn {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--tn-fg2, #6c757d);
-  cursor: pointer;
-  font-size: 24px;
-  line-height: 1;
-  transition: all 0.2s ease-in-out;
-  z-index: 10;
-}
-
-.tn-dialog-close-btn:hover {
-  background: var(--tn-alt-bg1, #f8f9fa);
-  color: var(--tn-fg1, #000000);
-}
-
-.tn-dialog-close-btn:focus {
-  outline: 2px solid var(--tn-primary, #007bff);
-  outline-offset: 2px;
-}
-
-.tn-dialog-close-btn:active {
-  transform: scale(0.95);
-}
-
-.tn-dialog-close-btn span {
-  font-weight: normal;
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .cdk-dialog-panel,
-  .tn-dialog-panel {
-    border: 1px solid var(--tn-fg1, #000);
-  }
-}
-
-/* Reduced motion support  */
-@media (prefers-reduced-motion: reduce) {
-  .cdk-dialog-panel,
-  .tn-dialog-panel {
-    /* Animations will be disabled by the animation trigger */
-  }
-}