@truenas/ui-components 0.1.29 → 0.1.31

package/fesm2022/truenas-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, viewChild, signal, computed, effect, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, ViewEncapsulation, Directive, contentChildren, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, PLATFORM_ID, DestroyRef } from '@angular/core';
+import { inject, ElementRef, input, output, viewChild, signal, computed, effect, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, ViewEncapsulation, Directive, contentChildren, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, DestroyRef } from '@angular/core';
 import * as i1$4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
@@ -4148,8 +4148,13 @@ class TnFormFieldComponent {
         if (errors['max']) {
             return `Maximum value is ${errors['max'].max}`;
         }
-        // Return custom error message if available
-        return Object.keys(errors)[0] || 'Invalid input';
+        // Return custom error message if the value is a string, otherwise use the key
+        const firstKey = Object.keys(errors)[0];
+        if (firstKey) {
+            const value = errors[firstKey];
+            return typeof value === 'string' ? value : firstKey;
+        }
+        return 'Invalid input';
     }
     showError = computed(() => {
         return this.hasError() && !!this.errorMessage();
@@ -10446,6 +10451,257 @@ class TnEmptyHarness extends ComponentHarness {
     }
 }
 
+var TnToastType;
+(function (TnToastType) {
+    TnToastType["Info"] = "info";
+    TnToastType["Success"] = "success";
+    TnToastType["Warning"] = "warning";
+    TnToastType["Error"] = "error";
+})(TnToastType || (TnToastType = {}));
+var TnToastPosition;
+(function (TnToastPosition) {
+    TnToastPosition["Top"] = "top";
+    TnToastPosition["Bottom"] = "bottom";
+})(TnToastPosition || (TnToastPosition = {}));
+
+// Mark icons for sprite inclusion (dynamic names aren't detected by the scanner)
+const TOAST_ICONS = {
+    [TnToastType.Info]: tnIconMarker('info', 'material'),
+    [TnToastType.Success]: tnIconMarker('check_circle', 'material'),
+    [TnToastType.Warning]: tnIconMarker('warning', 'material'),
+    [TnToastType.Error]: tnIconMarker('error', 'material'),
+};
+class TnToastComponent {
+    message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    action = signal(null, ...(ngDevMode ? [{ debugName: "action" }] : []));
+    type = signal(TnToastType.Info, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    position = signal(TnToastPosition.Bottom, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    icon = computed(() => TOAST_ICONS[this.type()], ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    onAction = () => { };
+    onDismiss = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnToastComponent, isStandalone: true, selector: "tn-toast", host: { properties: { "class.tn-toast--top": "position() === \"top\"", "class.tn-toast--bottom": "position() === \"bottom\"" } }, ngImport: i0, template: "<div\n  class=\"tn-toast\"\n  role=\"alert\"\n  aria-live=\"polite\"\n  [class.tn-toast--visible]=\"visible()\"\n  [class.tn-toast--info]=\"type() === 'info'\"\n  [class.tn-toast--success]=\"type() === 'success'\"\n  [class.tn-toast--warning]=\"type() === 'warning'\"\n  [class.tn-toast--error]=\"type() === 'error'\">\n  <tn-icon class=\"tn-toast__icon\" size=\"sm\" [name]=\"icon()\" />\n  <span class=\"tn-toast__message\">{{ message() }}</span>\n  @if (action()) {\n    <button\n      class=\"tn-toast__action\"\n      type=\"button\"\n      (click)=\"onAction()\">\n      {{ action() }}\n    </button>\n  }\n</div>\n", styles: ["tn-toast{position:fixed;left:50%;transform:translate(-50%);z-index:10000;pointer-events:none}tn-toast.tn-toast--bottom{bottom:1.5rem}tn-toast.tn-toast--top{top:1.5rem}.tn-toast{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-radius:.5rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:.875rem;line-height:1.4;pointer-events:auto;background-color:var(--tn-bg2, #333);color:var(--tn-fg1, #fff);border-left:3px solid transparent;box-shadow:0 8px 24px #0000004d;opacity:0;transform:translateY(1rem);transition:opacity .2s ease-out,transform .2s ease-out;max-width:560px}.tn-toast.tn-toast--visible{opacity:1;transform:translateY(0)}.tn-toast.tn-toast--info{border-left-color:var(--tn-info, #3b82f6)}.tn-toast.tn-toast--success{border-left-color:var(--tn-success, #10b981)}.tn-toast.tn-toast--warning{border-left-color:var(--tn-warning, #f59e0b)}.tn-toast.tn-toast--error{border-left-color:var(--tn-error, #ef4444)}.tn-toast__icon{flex-shrink:0}.tn-toast--info .tn-toast__icon{color:var(--tn-info, #3b82f6)}.tn-toast--success .tn-toast__icon{color:var(--tn-success, #10b981)}.tn-toast--warning .tn-toast__icon{color:var(--tn-warning, #f59e0b)}.tn-toast--error .tn-toast__icon{color:var(--tn-error, #ef4444)}.tn-toast__message{flex:1}.tn-toast__action{background:none;border:none;color:var(--tn-primary, #3b82f6);font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;transition:background-color .15s ease}.tn-toast__action:hover{background-color:#ffffff1a}@media(prefers-reduced-motion:reduce){.tn-toast{transition:none}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-toast', standalone: true, imports: [TnIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.tn-toast--top]': 'position() === "top"',
+                        '[class.tn-toast--bottom]': 'position() === "bottom"',
+                    }, template: "<div\n  class=\"tn-toast\"\n  role=\"alert\"\n  aria-live=\"polite\"\n  [class.tn-toast--visible]=\"visible()\"\n  [class.tn-toast--info]=\"type() === 'info'\"\n  [class.tn-toast--success]=\"type() === 'success'\"\n  [class.tn-toast--warning]=\"type() === 'warning'\"\n  [class.tn-toast--error]=\"type() === 'error'\">\n  <tn-icon class=\"tn-toast__icon\" size=\"sm\" [name]=\"icon()\" />\n  <span class=\"tn-toast__message\">{{ message() }}</span>\n  @if (action()) {\n    <button\n      class=\"tn-toast__action\"\n      type=\"button\"\n      (click)=\"onAction()\">\n      {{ action() }}\n    </button>\n  }\n</div>\n", styles: ["tn-toast{position:fixed;left:50%;transform:translate(-50%);z-index:10000;pointer-events:none}tn-toast.tn-toast--bottom{bottom:1.5rem}tn-toast.tn-toast--top{top:1.5rem}.tn-toast{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-radius:.5rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:.875rem;line-height:1.4;pointer-events:auto;background-color:var(--tn-bg2, #333);color:var(--tn-fg1, #fff);border-left:3px solid transparent;box-shadow:0 8px 24px #0000004d;opacity:0;transform:translateY(1rem);transition:opacity .2s ease-out,transform .2s ease-out;max-width:560px}.tn-toast.tn-toast--visible{opacity:1;transform:translateY(0)}.tn-toast.tn-toast--info{border-left-color:var(--tn-info, #3b82f6)}.tn-toast.tn-toast--success{border-left-color:var(--tn-success, #10b981)}.tn-toast.tn-toast--warning{border-left-color:var(--tn-warning, #f59e0b)}.tn-toast.tn-toast--error{border-left-color:var(--tn-error, #ef4444)}.tn-toast__icon{flex-shrink:0}.tn-toast--info .tn-toast__icon{color:var(--tn-info, #3b82f6)}.tn-toast--success .tn-toast__icon{color:var(--tn-success, #10b981)}.tn-toast--warning .tn-toast__icon{color:var(--tn-warning, #f59e0b)}.tn-toast--error .tn-toast__icon{color:var(--tn-error, #ef4444)}.tn-toast__message{flex:1}.tn-toast__action{background:none;border:none;color:var(--tn-primary, #3b82f6);font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;transition:background-color .15s ease}.tn-toast__action:hover{background-color:#ffffff1a}@media(prefers-reduced-motion:reduce){.tn-toast{transition:none}}\n"] }]
+        }] });
+
+class TnToastRef {
+    _onAction = new Subject();
+    _afterDismissed = new Subject();
+    _dismissed = false;
+    /** @internal */
+    _componentRef;
+    /** Observable that emits when the action button is clicked. */
+    onAction() {
+        return this._onAction.asObservable();
+    }
+    /** Observable that emits when the toast is dismissed (by action, duration, or programmatically). */
+    afterDismissed() {
+        return this._afterDismissed.asObservable();
+    }
+    /** Programmatically dismiss the toast. */
+    dismiss() {
+        if (this._dismissed) {
+            return;
+        }
+        this._dismissed = true;
+        this._afterDismissed.next();
+        this._afterDismissed.complete();
+        this._onAction.complete();
+    }
+    /** @internal */
+    _triggerAction() {
+        this._onAction.next();
+        this.dismiss();
+    }
+}
+class TnToastService {
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    activeRef = null;
+    /**
+     * Opens a toast notification.
+     *
+     * @param message The message to display.
+     * @param actionOrConfig Optional action button text, or config object.
+     * @param config Optional config when action is provided as second arg.
+     * @returns A TnToastRef that can be used to dismiss the toast or listen for events.
+     *
+     * @example
+     * ```typescript
+     * // Simple notification
+     * this.toast.open('Changes saved');
+     *
+     * // With action button
+     * const ref = this.toast.open('Item deleted', 'Undo');
+     * ref.onAction().subscribe(() => this.undoDelete());
+     *
+     * // With config
+     * this.toast.open('Error occurred', { type: 'error', duration: 6000 });
+     *
+     * // Action + config
+     * this.toast.open('Failed to save', 'Retry', { type: 'error' });
+     * ```
+     */
+    open(message, actionOrConfig, config) {
+        // Dismiss any existing toast
+        if (this.activeRef) {
+            this.activeRef.dismiss();
+        }
+        // Parse overloaded args
+        let action;
+        let resolvedConfig = {};
+        if (typeof actionOrConfig === 'string') {
+            action = actionOrConfig;
+            resolvedConfig = config ?? {};
+        }
+        else if (actionOrConfig) {
+            resolvedConfig = actionOrConfig;
+        }
+        const duration = resolvedConfig.duration ?? 4000;
+        const type = resolvedConfig.type ?? TnToastType.Info;
+        const position = resolvedConfig.position ?? TnToastPosition.Bottom;
+        // Create ref
+        const ref = new TnToastRef();
+        this.activeRef = ref;
+        // Create component
+        const componentRef = createComponent(TnToastComponent, {
+            environmentInjector: this.injector,
+        });
+        ref._componentRef = componentRef;
+        const instance = componentRef.instance;
+        instance.message.set(message);
+        instance.action.set(action ?? null);
+        instance.type.set(type);
+        instance.position.set(position);
+        instance.onAction = () => ref._triggerAction();
+        instance.onDismiss = () => ref.dismiss();
+        // Attach to DOM
+        this.appRef.attachView(componentRef.hostView);
+        document.body.appendChild(componentRef.location.nativeElement);
+        // Animate in
+        requestAnimationFrame(() => {
+            instance.visible.set(true);
+        });
+        // Auto-dismiss
+        let timeout = null;
+        if (duration > 0) {
+            timeout = setTimeout(() => ref.dismiss(), duration);
+        }
+        // Cleanup on dismiss
+        ref.afterDismissed().subscribe(() => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            instance.visible.set(false);
+            // Wait for animation to complete before removing
+            setTimeout(() => {
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                if (this.activeRef === ref) {
+                    this.activeRef = null;
+                }
+            }, 200);
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A mock implementation of TnToastService for unit testing.
+ *
+ * Records all `open()` calls so tests can assert on toast messages,
+ * types, and actions without rendering actual toast components.
+ *
+ * @example
+ * ```typescript
+ * import { TnToastTesting } from '@truenas/ui-components';
+ *
+ * let toastMock: TnToastMock;
+ *
+ * beforeEach(() => {
+ *   toastMock = new TnToastMock();
+ *   TestBed.configureTestingModule({
+ *     providers: [TnToastTesting.providers(toastMock)],
+ *   });
+ * });
+ *
+ * it('should show success toast', () => {
+ *   // ... trigger action that opens a toast
+ *   expect(toastMock.calls.length).toBe(1);
+ *   expect(toastMock.lastCall?.message).toBe('Saved successfully');
+ *   expect(toastMock.lastCall?.config.type).toBe(TnToastType.Success);
+ * });
+ *
+ * it('should handle action click', () => {
+ *   // ... trigger action that opens a toast with action
+ *   toastMock.lastCall?.ref._triggerAction();
+ *   // ... assert retry behavior
+ * });
+ * ```
+ */
+class TnToastMock {
+    /** All recorded toast open() calls. */
+    calls = [];
+    /** The most recent toast call, or undefined if none. */
+    get lastCall() {
+        return this.calls[this.calls.length - 1];
+    }
+    /** Clears all recorded calls. */
+    reset() {
+        this.calls = [];
+    }
+    open(message, actionOrConfig, config) {
+        let action;
+        let resolvedConfig = {};
+        if (typeof actionOrConfig === 'string') {
+            action = actionOrConfig;
+            resolvedConfig = config ?? {};
+        }
+        else if (actionOrConfig) {
+            resolvedConfig = actionOrConfig;
+        }
+        const ref = new TnToastRef();
+        this.calls.push({ message, action, config: resolvedConfig, ref });
+        return ref;
+    }
+}
+/**
+ * Test utilities for TnToastService.
+ *
+ * Provides a mock that records toast calls without rendering components,
+ * making tests fast and deterministic.
+ *
+ * @example
+ * ```typescript
+ * const toastMock = new TnToastMock();
+ *
+ * TestBed.configureTestingModule({
+ *   providers: [TnToastTesting.providers(toastMock)],
+ * });
+ * ```
+ */
+class TnToastTesting {
+    /**
+     * Returns providers that replace TnToastService with the given mock.
+     */
+    static providers(mock) {
+        return [{ provide: TnToastService, useValue: mock }];
+    }
+}
+
 class TnKeyboardShortcutService {
     shortcuts = new Map();
     globalEnabled = true;
@@ -11049,5 +11305,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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 { 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, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map