@truenas/ui-components 0.1.75 → 0.1.76

package/fesm2022/truenas-ui-components.mjs

@@ -15,6 +15,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, BehaviorSubject, merge, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
+import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
@@ -2478,8 +2479,109 @@ var InputType;
     InputType["Number"] = "number";
     InputType["Password"] = "password";
     InputType["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.
+     */
+    InputType["Size"] = "size";
 })(InputType || (InputType = {}));
 
+// Ordered binary/decimal prefixes; the array index doubles as the power applied
+// to the base (B = base^0, K = base^1, M = base^2, ...).
+const UNIT_PREFIXES = ['B', 'K', 'M', 'G', 'T', 'P', 'E'];
+/**
+ * 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).
+ */
+function formatSize(bytes, standard = 'iec', round = 2) {
+    if (bytes === null || bytes === undefined || bytes === '') {
+        return '';
+    }
+    const num = Number(bytes);
+    if (Number.isNaN(num)) {
+        return '';
+    }
+    // `standard: 'iec'` implies base 2 and KiB-style symbols; `'si'` implies base
+    // 10 and kB-style symbols. filesize derives the base from the standard.
+    return filesize(num, { standard, round });
+}
+/**
+ * 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).
+ */
+function parseSize(raw, defaultUnit = 'MiB', standard = 'iec') {
+    if (raw === null || raw === undefined) {
+        return null;
+    }
+    const str = String(raw).trim();
+    if (str === '') {
+        return null;
+    }
+    // Leading non-negative number (sizes are never negative), optional whitespace,
+    // then an optional unit. Anything trailing the unit makes the whole match fail.
+    const match = str.match(/^(\d+(?:\.\d+)?)\s*([a-zA-Z]*)$/);
+    if (!match) {
+        return null;
+    }
+    const num = parseFloat(match[1]);
+    if (Number.isNaN(num)) {
+        return null;
+    }
+    const exponent = unitExponent(match[2] || defaultUnit);
+    if (exponent === null) {
+        return null;
+    }
+    const base = standard === 'si' ? 1000 : 1024;
+    // Round to whole bytes: a byte count is an integer, and rounding absorbs the
+    // floating-point drift of e.g. 1.1 * 1024.
+    return Math.round(num * base ** exponent);
+}
+/**
+ * Resolves a unit spelling to its prefix power (B → 0, K → 1, M → 2, ...).
+ *
+ * Accepts the prefix alone (`K`), the short form (`KB`), or the IEC form (`KiB`),
+ * case-insensitively. Returns `null` for anything unrecognized.
+ */
+function unitExponent(unit) {
+    const normalized = unit.trim().toUpperCase();
+    if (normalized === '') {
+        return null;
+    }
+    if (normalized === 'B' || normalized === 'BYTE' || normalized === 'BYTES') {
+        return 0;
+    }
+    const index = UNIT_PREFIXES.indexOf(normalized.charAt(0));
+    // index 0 is 'B', already handled above; a leading 'B' here (e.g. "BB") is invalid.
+    if (index <= 0) {
+        return null;
+    }
+    // Allow the bare prefix ("K"), the short unit ("KB"), or the IEC unit ("KIB").
+    const suffix = normalized.slice(1);
+    if (suffix === '' || suffix === 'B' || suffix === 'IB') {
+        return index;
+    }
+    return null;
+}
+
 // Module-level counter for deterministic, unique instance ids (matches the
 // tn-autocomplete convention). Deterministic ids are SSR/hydration-safe and
 // stable across snapshots, unlike a Math.random() seed.
@@ -2511,6 +2613,24 @@ class TnInputComponent {
      * (e.g. `Validators.min`/`max`), which work because the control emits real numbers.
      */
     allowDecimals = input(true, ...(ngDevMode ? [{ debugName: "allowDecimals" }] : []));
+    /**
+     * 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 = input('iec', ...(ngDevMode ? [{ debugName: "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 = input('MiB', ...(ngDevMode ? [{ debugName: "sizeDefaultUnit" }] : []));
+    /**
+     * Decimal places used when formatting a `Size` field's value for display
+     * (e.g. `1.5 GiB`). Ignored unless `inputType` is `Size`.
+     */
+    sizeRound = input(2, ...(ngDevMode ? [{ debugName: "sizeRound" }] : []));
     // Icon inputs
     prefixIcon = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
     prefixIconLibrary = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIconLibrary" }] : []));
@@ -2522,19 +2642,21 @@ class TnInputComponent {
     hasSuffixIcon = computed(() => !!this.suffixIcon(), ...(ngDevMode ? [{ debugName: "hasSuffixIcon" }] : []));
     // Numeric mode state
     isNumeric = computed(() => this.inputType() === InputType.Number, ...(ngDevMode ? [{ debugName: "isNumeric" }] : []));
+    /** True when the field is in data-size mode (human-readable string ⇄ byte-count model). */
+    isSize = computed(() => this.inputType() === InputType.Size, ...(ngDevMode ? [{ debugName: "isSize" }] : []));
     /** True when the field only accepts whole numbers (i.e. `allowDecimals` is false). */
     integerOnly = computed(() => !this.allowDecimals(), ...(ngDevMode ? [{ debugName: "integerOnly" }] : []));
-    /** The `type` attribute actually rendered. Number mode uses a text input + inputmode to avoid the native type="number" footguns. */
-    resolvedType = computed(() => (this.isNumeric() ? InputType.PlainText : this.inputType()), ...(ngDevMode ? [{ debugName: "resolvedType" }] : []));
-    /** `inputmode` hint: numeric keypad for integers, decimal keypad otherwise. Null (omitted) when not in number mode. */
+    /** 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 = computed(() => (this.isNumeric() || this.isSize() ? InputType.PlainText : this.inputType()), ...(ngDevMode ? [{ debugName: "resolvedType" }] : []));
+    /** `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 = computed(() => {
         if (!this.isNumeric()) {
             return null;
         }
         return this.integerOnly() ? 'numeric' : 'decimal';
     }, ...(ngDevMode ? [{ debugName: "numericInputMode" }] : []));
-    /** Number mode is always single-line; it wins over `multiline` if both are set. */
-    showTextarea = computed(() => this.multiline() && !this.isNumeric(), ...(ngDevMode ? [{ debugName: "showTextarea" }] : []));
+    /** Number and size modes are always single-line; they win over `multiline` if both are set. */
+    showTextarea = computed(() => this.multiline() && !this.isNumeric() && !this.isSize(), ...(ngDevMode ? [{ debugName: "showTextarea" }] : []));
     // Unique per instance: a hard-coded id produced duplicate ids when multiple
     // tn-inputs share a page (invalid HTML, and it breaks any future label `for=`,
     // aria-describedby, or getElementById targeting this input).
@@ -2567,6 +2689,12 @@ class TnInputComponent {
     // Accepts undefined as well as the declared types: Angular may hand writeValue an
     // undefined model at init, and it maps to the empty display like null.
     writeValue(value) {
+        if (this.isSize()) {
+            // The model is a byte count; show it as a human-readable string. Empty/null
+            // stays blank, and a non-numeric model maps to blank (formatSize returns '').
+            this.value = formatSize(value, this.sizeStandard(), this.sizeRound());
+            return;
+        }
         // Display the model verbatim via String(); do NOT sanitize here. Sanitizing a
         // canonical number string would corrupt fractions in integer mode (3.5 -> "35"),
         // silently diverging the display from the form model.
@@ -2587,6 +2715,13 @@ class TnInputComponent {
     // Component methods (template-bound; protected — not part of the public API)
     onValueChange(event) {
         const target = event.target;
+        if (this.isSize()) {
+            // Keep the raw text in the field as the user types (unit letters and all);
+            // emit the parsed byte count, mapping invalid/partial input to null (never 0).
+            this.value = target.value;
+            this.onChange(parseSize(this.value, this.sizeDefaultUnit(), this.sizeStandard()));
+            return;
+        }
         if (this.isNumeric()) {
             const el = target;
             const sanitized = this.sanitizeNumeric(el.value);
@@ -2607,6 +2742,26 @@ class TnInputComponent {
         this.onChange(this.value);
     }
     onBlur() {
+        if (this.isSize() && this.value !== '') {
+            // Canonicalize the display on blur: "2048 KiB" -> "2 MiB", "200tib" -> "200 TiB".
+            // Leave unparseable text in place so the consumer's validators can flag it.
+            const bytes = parseSize(this.value, this.sizeDefaultUnit(), this.sizeStandard());
+            if (bytes !== null) {
+                const canonical = formatSize(bytes, this.sizeStandard(), this.sizeRound());
+                // Only rewrite + re-emit when the canonical form actually differs from what
+                // the user left in the field. This both:
+                //  (a) skips a no-op onChange that would mark an untouched, pre-filled
+                //      control dirty (falsely tripping "unsaved changes" guards), and
+                //  (b) still re-syncs the model when rounding is lossy — e.g. an edited
+                //      "1.755 GiB" canonicalizes to a different string, so it emits the
+                //      byte count parsed back from the rounded display, keeping
+                //      parseSize(display) === model.
+                if (canonical !== this.value) {
+                    this.value = canonical;
+                    this.onChange(parseSize(canonical, this.sizeDefaultUnit(), this.sizeStandard()));
+                }
+            }
+        }
         this.onTouched();
     }
     /** Strips any character that can't appear in the current numeric mode (single leading '-', single '.' for decimals). */
@@ -2637,7 +2792,7 @@ class TnInputComponent {
         return Number.isNaN(parsed) ? null : parsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnInputComponent, isStandalone: true, selector: "tn-input", inputs: { inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, allowDecimals: { classPropertyName: "allowDecimals", publicName: "allowDecimals", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIconLibrary: { classPropertyName: "prefixIconLibrary", publicName: "prefixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIconLibrary: { classPropertyName: "suffixIconLibrary", publicName: "suffixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIconAriaLabel: { classPropertyName: "suffixIconAriaLabel", publicName: "suffixIconAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuffixAction: "onSuffixAction" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnInputComponent, isStandalone: true, selector: "tn-input", inputs: { inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, allowDecimals: { classPropertyName: "allowDecimals", publicName: "allowDecimals", isSignal: true, isRequired: false, transformFunction: null }, sizeStandard: { classPropertyName: "sizeStandard", publicName: "sizeStandard", isSignal: true, isRequired: false, transformFunction: null }, sizeDefaultUnit: { classPropertyName: "sizeDefaultUnit", publicName: "sizeDefaultUnit", isSignal: true, isRequired: false, transformFunction: null }, sizeRound: { classPropertyName: "sizeRound", publicName: "sizeRound", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIconLibrary: { classPropertyName: "prefixIconLibrary", publicName: "prefixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIconLibrary: { classPropertyName: "suffixIconLibrary", publicName: "suffixIconLibrary", isSignal: true, isRequired: false, transformFunction: null }, suffixIconAriaLabel: { classPropertyName: "suffixIconAriaLabel", publicName: "suffixIconAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuffixAction: "onSuffixAction" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnInputComponent),
@@ -2654,7 +2809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             multi: true
                         }
                     ], template: "<div\n  class=\"tn-input-container\"\n  [class.tn-input-container--has-prefix]=\"hasPrefixIcon()\"\n  [class.tn-input-container--has-suffix]=\"hasSuffixIcon()\"\n>\n  <!-- Prefix icon -->\n  @if (hasPrefixIcon()) {\n    <tn-icon\n      class=\"tn-input__prefix-icon\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n      [name]=\"prefixIcon()!\"\n      [library]=\"prefixIconLibrary()\"\n    />\n  }\n\n  <!-- Regular input field -->\n  @if (!showTextarea()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      tnTestIdType=\"input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"resolvedType()\"\n      [attr.inputmode]=\"numericInputMode()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.placeholder]=\"placeholder()\"\n      [tnTestId]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (showTextarea()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      tnTestIdType=\"textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.placeholder]=\"placeholder()\"\n      [tnTestId]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n\n  <!-- Suffix icon action button -->\n  @if (hasSuffixIcon()) {\n    <button\n      type=\"button\"\n      class=\"tn-input__suffix-action\"\n      [attr.aria-label]=\"suffixIconAriaLabel()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onSuffixAction.emit($event)\"\n    >\n      <tn-icon\n        size=\"sm\"\n        [name]=\"suffixIcon()!\"\n        [library]=\"suffixIconLibrary()\"\n      />\n    </button>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;display:flex;align-items:center;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-input-container:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input-container:has(.tn-input:disabled){background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-input-container:has(.tn-input.error){border-color:var(--tn-error, #dc3545)}.tn-input-container:has(.tn-input.error):focus-within{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-input{display:block;flex:1;min-width:0;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;border-radius:.375rem;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed}.tn-input-container--has-prefix .tn-input{padding-left:.75rem;border-left:1px solid var(--tn-lines, #d1d5db);border-top-left-radius:0;border-bottom-left-radius:0}.tn-input-container--has-suffix .tn-input{padding-right:.25rem}.tn-input__prefix-icon{flex-shrink:0;margin-left:.75rem;margin-right:.75rem;color:var(--tn-fg2, #6c757d);pointer-events:none}.tn-input__suffix-action{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.375rem;padding:.25rem;border:none;border-radius:.25rem;background:transparent;color:var(--tn-fg2, #6c757d);cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.tn-input__suffix-action:hover:not(:disabled){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-input__suffix-action:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:1px}.tn-input__suffix-action:disabled{cursor:not-allowed;pointer-events:none}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input-container,.tn-input__suffix-action{transition:none}}@media(prefers-contrast:high){.tn-input-container{border-width:2px}}\n"] }]
-        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], allowDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDecimals", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], prefixIconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIconLibrary", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], suffixIconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconLibrary", required: false }] }], suffixIconAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconAriaLabel", required: false }] }], onSuffixAction: [{ type: i0.Output, args: ["onSuffixAction"] }] } });
+        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], allowDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDecimals", required: false }] }], sizeStandard: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeStandard", required: false }] }], sizeDefaultUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeDefaultUnit", required: false }] }], sizeRound: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeRound", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], prefixIconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIconLibrary", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], suffixIconLibrary: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconLibrary", required: false }] }], suffixIconAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconAriaLabel", required: false }] }], onSuffixAction: [{ type: i0.Output, args: ["onSuffixAction"] }] } });
 
 /**
  * Harness for interacting with tn-icon in tests.
@@ -2976,6 +3131,22 @@ class TnInputHarness extends ComponentHarness {
         const parsed = integerMode ? parseInt(raw, 10) : parseFloat(raw);
         return Number.isNaN(parsed) ? null : parsed;
     }
+    /**
+     * 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.
+     */
+    async getByteValue(standard = 'iec', defaultUnit = 'MiB') {
+        return parseSize(await this.getValue(), defaultUnit, standard);
+    }
     /**
      * Gets the `inputmode` attribute (e.g. 'numeric' or 'decimal' in number mode).
      *
@@ -15177,5 +15348,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_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 { 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 };
 //# sourceMappingURL=truenas-ui-components.mjs.map