@truenas/ui-components 0.3.11 → 0.3.13

package/package.json

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

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

@@ -2175,6 +2175,188 @@ declare class TnInputDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnInputDirective, "input[tnInput], textarea[tnInput], div[tnInput]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * A minimal file-selection form control. Renders a styled "Choose File" button
+ * that opens the native file dialog and exposes the picked `File`(s) both as a
+ * `(change)` output and as the value of an Angular form control.
+ *
+ * The selected file name(s) are shown next to the button (toggle with
+ * `showFileName`). Use inside a `<tn-form-field>` to get a label, required
+ * asterisk and help tooltip.
+ *
+ * Like every native file input, the browser forbids programmatically setting
+ * the chosen files for security reasons. Writing a non-empty value via a form
+ * control therefore only updates the displayed name; writing `null` (or an empty
+ * array) clears the control. User selection is the only way to populate real
+ * `File` objects.
+ *
+ * @example
+ * ```html
+ * <tn-form-field label="Update File" [required]="true" tooltip="Upload a .tar file">
+ *   <tn-file-input accept=".tar" formControlName="update" (change)="onFile($event)" />
+ * </tn-form-field>
+ * ```
+ */
+declare class TnFileInputComponent implements ControlValueAccessor {
+    fileInputEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** Label rendered inside the trigger button. */
+    buttonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Native `accept` attribute forwarded to the file input — a comma-separated
+     * list of extensions and/or MIME types (e.g. `".tar,.txt"`, `"image/*"`).
+     */
+    accept: _angular_core.InputSignal<string | undefined>;
+    /** Allow selecting more than one file. The value becomes a `File[]`. */
+    multiple: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Whether to render the selected file name(s) beside the button. */
+    showFileName: _angular_core.InputSignal<boolean>;
+    /** Text shown beside the button when no file is selected. */
+    noFileText: _angular_core.InputSignal<string>;
+    /**
+     * Accessible label for the trigger button, forwarded to `tn-button`. Set this
+     * when the visible "Choose File" text alone doesn't convey what is being
+     * uploaded — e.g. pass the field label so a screen reader announces
+     * "Update File" rather than just "Choose File". (`tn-form-field`'s `<label>`
+     * is not programmatically associated with the projected control.)
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Semantic test-id base. Rendered under whichever attribute name is configured
+     * via `TN_TEST_ATTR` (default `data-testid`).
+     */
+    testId: _angular_core.InputSignal<TnTestIdValue>;
+    /**
+     * Emitted whenever the selection changes. `null` when the input is cleared.
+     * Named `selectionChange` (not `change`) to avoid colliding with the native
+     * `change` event bubbling from the inner file input.
+     */
+    selectionChange: _angular_core.OutputEmitterRef<File | File[] | null>;
+    protected selectedFiles: _angular_core.WritableSignal<File[]>;
+    private formDisabled;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected fileNames: _angular_core.Signal<string>;
+    protected hasFiles: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    writeValue(value: File | File[] | null): void;
+    registerOnChange(fn: (value: File | File[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected openFileDialog(): void;
+    /** Marks the control as touched when focus leaves it (e.g. for validation). */
+    protected onBlur(): void;
+    protected onFilesSelected(event: Event): void;
+    private toValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnFileInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFileInputComponent, "tn-file-input", never, { "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showFileName": { "alias": "showFileName"; "required": false; "isSignal": true; }; "noFileText": { "alias": "noFileText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+/**
+ * Harness for interacting with `tn-file-input` in tests.
+ *
+ * @example
+ * ```typescript
+ * const fileInput = await loader.getHarness(TnFileInputHarness.with({ testId: 'update' }));
+ * expect(await fileInput.getButtonText()).toBe('Choose File');
+ * expect(await fileInput.hasFile()).toBe(false);
+ * expect(await fileInput.getFileName()).toBe('No file chosen');
+ * ```
+ */
+declare class TnFileInputHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnFileInputComponent` instance. */
+    static hostSelector: string;
+    private _button;
+    private _native;
+    private _filename;
+    /**
+     * Gets a `HarnessPredicate` to search for a file input with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * const fileInput = await loader.getHarness(TnFileInputHarness.with({ testId: 'update' }));
+     * ```
+     */
+    static with(options?: FileInputHarnessFilters): HarnessPredicate<TnFileInputHarness>;
+    /**
+     * Gets the trigger button's text.
+     *
+     * @returns Promise resolving to the button label.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.getButtonText()).toBe('Choose File');
+     * ```
+     */
+    getButtonText(): Promise<string>;
+    /**
+     * Gets the displayed file-name text (or the empty-state text).
+     *
+     * @returns Promise resolving to the text, or null when the name is hidden.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.getFileName()).toBe('No file chosen');
+     * ```
+     */
+    getFileName(): Promise<string | null>;
+    /**
+     * Whether a file is currently selected. A native file input reports an empty
+     * `value` until the user picks a file, so this reflects real user selection.
+     *
+     * @returns Promise resolving to true when a file has been chosen.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.hasFile()).toBe(false);
+     * ```
+     */
+    hasFile(): Promise<boolean>;
+    /**
+     * Whether the control is disabled.
+     *
+     * @returns Promise resolving to true if the button is disabled.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.isDisabled()).toBe(true);
+     * ```
+     */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Opens the native file dialog by clicking the trigger button. The browser
+     * does not let tests pick a real file, so this is mainly useful for asserting
+     * click handling and focus behaviour.
+     *
+     * @example
+     * ```typescript
+     * await fileInput.open();
+     * ```
+     */
+    open(): Promise<void>;
+    /**
+     * Gets the test-id attribute value from the container.
+     *
+     * @returns Promise resolving to the test-id, or null when unset.
+     *
+     * @example
+     * ```typescript
+     * expect(await fileInput.getTestId()).toBe('file-input-update');
+     * ```
+     */
+    getTestId(): Promise<string | null>;
+}
+/** A set of criteria for filtering a list of `TnFileInputHarness` instances. */
+interface FileInputHarnessFilters extends BaseHarnessFilters {
+    /** Filters by the trigger button's text. Supports string or regex matching. */
+    buttonText?: string | RegExp;
+    /** Filters by data-testid attribute. */
+    testId?: string;
+}
+
 type ChipColor = 'primary' | 'secondary' | 'accent';
 declare class TnChipComponent implements AfterViewInit, OnDestroy {
     chipEl: _angular_core.Signal<ElementRef<HTMLElement>>;
@@ -8490,5 +8672,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, 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 type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, 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 };
+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 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 };