@truenas/ui-components 0.1.75 → 0.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.75",
+  "version": "0.1.76",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -26,6 +26,7 @@
     "@types/svg-sprite": "~0.0.39",
     "@types/vinyl": "~2.0.12",
     "cheerio": "~1.0.0",
+    "filesize": "~11.0.17",
     "svg-sprite": "~2.0.4",
     "tslib": "^2.3.0",
     "tsx": "~4.19.1",

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

@@ -1148,9 +1148,52 @@ declare enum InputType {
     Email = "email",
     Number = "number",
     Password = "password",
-    PlainText = "text"
+    PlainText = "text",
+    /**
+     * Data-size field: the form model holds a raw byte count (a number), while the
+     * field displays/accepts a human-readable string (e.g. `2 GiB`, `500M`, `2 TB`).
+     * See `tn-input`'s `sizeStandard` / `sizeDefaultUnit` inputs to tune formatting
+     * and bare-number parsing.
+     */
+    Size = "size"
 }
 
+/**
+ * Unit standard used to format and parse data sizes.
+ *
+ * - `iec` — base-2 with `KiB`/`MiB`/`GiB` symbols (1 KiB = 1024 B). The TrueNAS
+ *   convention and `tn-input`'s default.
+ * - `si`  — base-10 with `kB`/`MB`/`GB` symbols (1 kB = 1000 B).
+ */
+type SizeStandard = 'iec' | 'si';
+/**
+ * Formats a raw byte count into a human-readable string (e.g. `2 GiB`).
+ *
+ * Returns an empty string for `null`/`undefined`/empty/non-numeric input so the
+ * field renders blank rather than `NaN`.
+ *
+ * @param bytes The byte count to format.
+ * @param standard Unit standard (defaults to IEC base-2).
+ * @param round Decimal places to round to (defaults to 2).
+ */
+declare function formatSize(bytes: number | string | null | undefined, standard?: SizeStandard, round?: number): string;
+/**
+ * Parses a human-readable size string into a raw byte count.
+ *
+ * Lenient by design: accepts IEC (`KiB`), short (`KB`), and human (`K`) unit
+ * spellings, optional whitespace, and a bare number (which is interpreted using
+ * `defaultUnit`). The chosen `standard` decides the multiplier — under `iec`,
+ * `MB`/`M`/`MiB` are all treated as 1024-based; under `si` they are 1000-based.
+ *
+ * Returns `null` for empty, malformed, or unrecognized-unit input so callers can
+ * map invalid entries to a null form-model value (never `0`).
+ *
+ * @param raw The human-readable string to parse.
+ * @param defaultUnit Unit assumed when the input carries no unit (defaults to `MiB`).
+ * @param standard Unit standard (defaults to IEC base-2).
+ */
+declare function parseSize(raw: string | number | null | undefined, defaultUnit?: string, standard?: SizeStandard): number | null;
+
 declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
     inputEl: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement>>;
     inputType: _angular_core.InputSignal<InputType>;
@@ -1178,6 +1221,24 @@ declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValue
      * (e.g. `Validators.min`/`max`), which work because the control emits real numbers.
      */
     allowDecimals: _angular_core.InputSignal<boolean>;
+    /**
+     * Unit standard for the `Size` input type — `iec` (base-2, `KiB`/`MiB`) or
+     * `si` (base-10, `kB`/`MB`). Drives both the formatted display and how bare
+     * numbers are scaled when parsing. Ignored unless `inputType` is `Size`.
+     */
+    sizeStandard: _angular_core.InputSignal<SizeStandard>;
+    /**
+     * Unit assumed when a user types a bare number (no unit) into a `Size` field —
+     * e.g. with the default `MiB`, typing `200` yields 200 MiB. Accepts IEC
+     * (`KiB`), short (`KB`), or human (`K`) spellings. Ignored unless `inputType`
+     * is `Size`.
+     */
+    sizeDefaultUnit: _angular_core.InputSignal<string>;
+    /**
+     * Decimal places used when formatting a `Size` field's value for display
+     * (e.g. `1.5 GiB`). Ignored unless `inputType` is `Size`.
+     */
+    sizeRound: _angular_core.InputSignal<number>;
     prefixIcon: _angular_core.InputSignal<string | undefined>;
     prefixIconLibrary: _angular_core.InputSignal<IconLibraryType | undefined>;
     suffixIcon: _angular_core.InputSignal<string | undefined>;
@@ -1187,13 +1248,15 @@ declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValue
     hasPrefixIcon: _angular_core.Signal<boolean>;
     hasSuffixIcon: _angular_core.Signal<boolean>;
     isNumeric: _angular_core.Signal<boolean>;
+    /** True when the field is in data-size mode (human-readable string ⇄ byte-count model). */
+    isSize: _angular_core.Signal<boolean>;
     /** True when the field only accepts whole numbers (i.e. `allowDecimals` is false). */
     integerOnly: _angular_core.Signal<boolean>;
-    /** The `type` attribute actually rendered. Number mode uses a text input + inputmode to avoid the native type="number" footguns. */
+    /** The `type` attribute actually rendered. Number and size modes use a text input: number avoids the native type="number" footguns, size must accept unit letters. */
     resolvedType: _angular_core.Signal<InputType>;
-    /** `inputmode` hint: numeric keypad for integers, decimal keypad otherwise. Null (omitted) when not in number mode. */
+    /** `inputmode` hint: numeric keypad for integers, decimal keypad otherwise. Null (omitted) outside number mode — size fields accept unit letters, so they keep the full keyboard. */
     numericInputMode: _angular_core.Signal<"numeric" | "decimal" | null>;
-    /** Number mode is always single-line; it wins over `multiline` if both are set. */
+    /** Number and size modes are always single-line; they win over `multiline` if both are set. */
     showTextarea: _angular_core.Signal<boolean>;
     id: string;
     protected value: string;
@@ -1216,7 +1279,7 @@ declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValue
     /** Parses a sanitized string to a number, mapping empty/partial input to null (never 0). */
     private parseNumeric;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnInputComponent, "tn-input", never, { "inputType": { "alias": "inputType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "allowDecimals": { "alias": "allowDecimals"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "prefixIconLibrary": { "alias": "prefixIconLibrary"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "suffixIconLibrary": { "alias": "suffixIconLibrary"; "required": false; "isSignal": true; }; "suffixIconAriaLabel": { "alias": "suffixIconAriaLabel"; "required": false; "isSignal": true; }; }, { "onSuffixAction": "onSuffixAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnInputComponent, "tn-input", never, { "inputType": { "alias": "inputType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "allowDecimals": { "alias": "allowDecimals"; "required": false; "isSignal": true; }; "sizeStandard": { "alias": "sizeStandard"; "required": false; "isSignal": true; }; "sizeDefaultUnit": { "alias": "sizeDefaultUnit"; "required": false; "isSignal": true; }; "sizeRound": { "alias": "sizeRound"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "prefixIconLibrary": { "alias": "prefixIconLibrary"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "suffixIconLibrary": { "alias": "suffixIconLibrary"; "required": false; "isSignal": true; }; "suffixIconAriaLabel": { "alias": "suffixIconAriaLabel"; "required": false; "isSignal": true; }; }, { "onSuffixAction": "onSuffixAction"; }, never, never, true, never>;
 }
 
 /**
@@ -1473,6 +1536,20 @@ declare class TnInputHarness extends ComponentHarness {
      * @returns Promise resolving to the numeric value, or null.
      */
     getNumericValue(): Promise<number | null>;
+    /**
+     * Gets the displayed value of a `Size`-type input parsed into a byte count,
+     * mirroring what the control emits to the form model.
+     *
+     * The harness reads only the DOM, so it can't see the component's configured
+     * `sizeStandard`/`sizeDefaultUnit` — pass them here to match the field under
+     * test. Defaults to IEC base-2 with a `MiB` default unit (the component
+     * defaults). Empty/invalid input resolves to `null`.
+     *
+     * @param standard Unit standard the field uses (defaults to `'iec'`).
+     * @param defaultUnit Unit assumed for bare numbers (defaults to `'MiB'`).
+     * @returns Promise resolving to the byte count, or null.
+     */
+    getByteValue(standard?: SizeStandard, defaultUnit?: string): Promise<number | null>;
     /**
      * Gets the `inputmode` attribute (e.g. 'numeric' or 'decimal' in number mode).
      *
@@ -7332,5 +7409,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_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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, 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, 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, kebabTestSegment, libIconMarker, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
-export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, 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, 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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, 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, 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, libIconMarker, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, 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 };