@truenas/ui-components 0.1.13 → 0.1.14

package/fesm2022/truenas-ui-components.mjs

@@ -1119,6 +1119,15 @@ class TnInputComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline" }] : []));
     rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    // Icon inputs
+    prefixIcon = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
+    prefixIconLibrary = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIconLibrary" }] : []));
+    suffixIcon = input(undefined, ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
+    suffixIconLibrary = input(undefined, ...(ngDevMode ? [{ debugName: "suffixIconLibrary" }] : []));
+    suffixIconAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "suffixIconAriaLabel" }] : []));
+    onSuffixAction = output();
+    hasPrefixIcon = computed(() => !!this.prefixIcon(), ...(ngDevMode ? [{ debugName: "hasPrefixIcon" }] : []));
+    hasSuffixIcon = computed(() => !!this.suffixIcon(), ...(ngDevMode ? [{ debugName: "hasSuffixIcon" }] : []));
     id = 'tn-input';
     value = '';
     // CVA disabled state management
@@ -1153,24 +1162,425 @@ class TnInputComponent {
         this.onTouched();
     }
     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 } }, 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 }, 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),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-input-container\">\n  <!-- Regular input field -->\n  @if (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);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;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-input.error{border-color:var(--tn-error, #dc3545)}.tn-input.error:focus{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input{transition:none}}@media(prefers-contrast:high){.tn-input{border-width:2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, 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 (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-input', standalone: true, imports: [FormsModule, A11yModule], providers: [
+            args: [{ selector: 'tn-input', standalone: true, imports: [FormsModule, A11yModule, TnIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TnInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"tn-input-container\">\n  <!-- Regular input field -->\n  @if (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [rows]=\"rows()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    ></textarea>\n  }\n</div>\n", styles: [".tn-input-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);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;outline:none;box-sizing:border-box}.tn-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-input.error{border-color:var(--tn-error, #dc3545)}.tn-input.error:focus{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-textarea{min-height:6rem;resize:vertical;line-height:1.4}@media(prefers-reduced-motion:reduce){.tn-input{transition:none}}@media(prefers-contrast:high){.tn-input{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 }] }] } });
+                    ], 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 (!multiline()) {\n    <input\n      #inputEl\n      class=\"tn-input\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [type]=\"inputType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"testId()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n\n  <!-- Textarea field -->\n  @if (multiline()) {\n    <textarea\n      #inputEl\n      class=\"tn-input tn-textarea\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.data-testid]=\"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 }] }], 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.
+ * Provides filtering by icon name and library for existence checks, as well as click interaction.
+ *
+ * @example
+ * ```typescript
+ * // Check for existence
+ * const icon = await loader.getHarness(TnIconHarness);
+ *
+ * // Find icon by name
+ * const folderIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'folder' })
+ * );
+ *
+ * // Find icon by name and library
+ * const mdiIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'account-circle', library: 'mdi' })
+ * );
+ *
+ * // Check if icon exists
+ * const hasIcon = await loader.hasHarness(
+ *   TnIconHarness.with({ name: 'check' })
+ * );
+ *
+ * // Click an icon
+ * const closeIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'close' })
+ * );
+ * await closeIcon.click();
+ * ```
+ */
+class TnIconHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnIconComponent` instance.
+     */
+    static hostSelector = 'tn-icon';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an icon
+     * with specific attributes.
+     *
+     * @param options Options for filtering which icon instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find icon by name
+     * const icon = await loader.getHarness(
+     *   TnIconHarness.with({ name: 'home' })
+     * );
+     *
+     * // Find icon by library
+     * const customIcon = await loader.getHarness(
+     *   TnIconHarness.with({ library: 'custom' })
+     * );
+     *
+     * // Find icon with specific size
+     * const largeIcon = await loader.getHarness(
+     *   TnIconHarness.with({ size: 'lg' })
+     * );
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnIconHarness, options)
+            .addOption('name', options.name, async (harness, name) => {
+            return (await harness.getName()) === name;
+        })
+            .addOption('library', options.library, async (harness, library) => {
+            return (await harness.getLibrary()) === library;
+        })
+            .addOption('size', options.size, async (harness, size) => {
+            return (await harness.getSize()) === size;
+        })
+            .addOption('fullSize', options.fullSize, async (harness, fullSize) => {
+            return (await harness.isFullSize()) === fullSize;
+        })
+            .addOption('customSize', options.customSize, async (harness, customSize) => {
+            return (await harness.getCustomSize()) === customSize;
+        });
+    }
+    /**
+     * Gets the icon name.
+     *
+     * @returns Promise resolving to the icon name.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const name = await icon.getName();
+     * expect(name).toBe('folder');
+     * ```
+     */
+    async getName() {
+        const host = await this.host();
+        return host.getAttribute('name');
+    }
+    /**
+     * Gets the icon library.
+     *
+     * @returns Promise resolving to the icon library.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const library = await icon.getLibrary();
+     * expect(library).toBe('mdi');
+     * ```
+     */
+    async getLibrary() {
+        const host = await this.host();
+        return host.getAttribute('library');
+    }
+    /**
+     * Gets the icon size.
+     *
+     * @returns Promise resolving to the icon size.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const size = await icon.getSize();
+     * expect(size).toBe('lg');
+     * ```
+     */
+    async getSize() {
+        const host = await this.host();
+        return host.getAttribute('size');
+    }
+    /**
+     * Gets the icon color.
+     *
+     * @returns Promise resolving to the icon color.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const color = await icon.getColor();
+     * expect(color).toBe('primary');
+     * ```
+     */
+    async getColor() {
+        const host = await this.host();
+        return host.getAttribute('color');
+    }
+    /**
+     * Checks if the icon is in full-size mode.
+     *
+     * @returns Promise resolving to true if the icon is full-size, false otherwise.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const isFullSize = await icon.isFullSize();
+     * expect(isFullSize).toBe(true);
+     * ```
+     */
+    async isFullSize() {
+        const host = await this.host();
+        const fullSizeAttr = await host.getAttribute('full-size');
+        return fullSizeAttr === 'true';
+    }
+    /**
+     * Gets the icon custom size.
+     *
+     * @returns Promise resolving to the custom size value, or null if not set.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const customSize = await icon.getCustomSize();
+     * expect(customSize).toBe('64px');
+     * ```
+     */
+    async getCustomSize() {
+        const host = await this.host();
+        return host.getAttribute('custom-size');
+    }
+    /**
+     * Checks if the icon is using a custom size.
+     *
+     * @returns Promise resolving to true if a custom size is set, false otherwise.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness);
+     * const hasCustomSize = await icon.hasCustomSize();
+     * expect(hasCustomSize).toBe(true);
+     * ```
+     */
+    async hasCustomSize() {
+        const customSize = await this.getCustomSize();
+        return customSize !== null;
+    }
+    /**
+     * Clicks the icon.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness.with({ name: 'close' }));
+     * await icon.click();
+     * ```
+     */
+    async click() {
+        const host = await this.host();
+        return host.click();
+    }
+}
+
+/**
+ * Harness for interacting with tn-input in tests.
+ * Provides methods for querying state, setting values, and interacting with prefix/suffix icons.
+ *
+ * @example
+ * ```typescript
+ * // Get the input harness
+ * const input = await loader.getHarness(TnInputHarness);
+ *
+ * // Set and read a value
+ * await input.setValue('hello');
+ * expect(await input.getValue()).toBe('hello');
+ *
+ * // Check for prefix icon
+ * expect(await input.hasPrefixIcon()).toBe(true);
+ *
+ * // Click suffix action
+ * await input.clickSuffixAction();
+ * ```
+ */
+class TnInputHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnInputComponent` instance.
+     */
+    static hostSelector = 'tn-input';
+    inputEl = this.locatorFor('input.tn-input');
+    textareaEl = this.locatorFor('textarea.tn-input');
+    prefixIconEl = this.locatorForOptional('tn-icon.tn-input__prefix-icon');
+    suffixButton = this.locatorForOptional('.tn-input__suffix-action');
+    suffixIconEl = this.locatorForOptional(TnIconHarness.with({ ancestor: '.tn-input__suffix-action' }));
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an input
+     * with specific attributes.
+     *
+     * @param options Options for filtering which input instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnInputHarness, options)
+            .addOption('placeholder', options.placeholder, async (harness, placeholder) => {
+            return (await harness.getPlaceholder()) === placeholder;
+        });
+    }
+    /**
+     * Gets the current value of the input.
+     *
+     * @returns Promise resolving to the input value.
+     */
+    async getValue() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return (await textarea.getProperty('value')) ?? '';
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('value')) ?? '';
+    }
+    /**
+     * Sets the value of the input by clearing and typing.
+     *
+     * @param value The value to set.
+     */
+    async setValue(value) {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            await textarea.clear();
+            await textarea.sendKeys(value);
+            return;
+        }
+        const input = await this.inputEl();
+        await input.clear();
+        await input.sendKeys(value);
+    }
+    /**
+     * Gets the placeholder text.
+     *
+     * @returns Promise resolving to the placeholder string.
+     */
+    async getPlaceholder() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.getAttribute('placeholder');
+        }
+        const input = await this.inputEl();
+        return input.getAttribute('placeholder');
+    }
+    /**
+     * Checks whether the input is disabled.
+     *
+     * @returns Promise resolving to true if the input is disabled.
+     */
+    async isDisabled() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return (await textarea.getProperty('disabled')) ?? false;
+        }
+        const input = await this.inputEl();
+        return (await input.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Checks whether the input renders as a textarea.
+     *
+     * @returns Promise resolving to true if multiline.
+     */
+    async isMultiline() {
+        const textareas = await this.locatorForAll('textarea.tn-input')();
+        return textareas.length > 0;
+    }
+    /**
+     * Checks whether a prefix icon is present.
+     *
+     * @returns Promise resolving to true if a prefix icon exists.
+     */
+    async hasPrefixIcon() {
+        const icon = await this.prefixIconEl();
+        return icon !== null;
+    }
+    /**
+     * Gets the prefix icon harness for further inspection.
+     *
+     * @returns Promise resolving to the prefix TnIconHarness, or null if not present.
+     */
+    async getPrefixIcon() {
+        const el = await this.prefixIconEl();
+        if (!el) {
+            return null;
+        }
+        const allIcons = await this.locatorForAll(TnIconHarness)();
+        for (const icon of allIcons) {
+            const host = await icon.host();
+            if (await host.hasClass('tn-input__prefix-icon')) {
+                return icon;
+            }
+        }
+        return null;
+    }
+    /**
+     * Checks whether a suffix action button is present.
+     *
+     * @returns Promise resolving to true if a suffix action exists.
+     */
+    async hasSuffixAction() {
+        const button = await this.suffixButton();
+        return button !== null;
+    }
+    /**
+     * Gets the suffix icon harness for further inspection.
+     *
+     * @returns Promise resolving to the suffix TnIconHarness, or null if not present.
+     */
+    async getSuffixIcon() {
+        return this.suffixIconEl();
+    }
+    /**
+     * Clicks the suffix action button.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     */
+    async clickSuffixAction() {
+        const button = await this.suffixButton();
+        if (!button) {
+            throw new Error('No suffix action button found on this input.');
+        }
+        return button.click();
+    }
+    /**
+     * Focuses the input element.
+     *
+     * @returns Promise that resolves when the input is focused.
+     */
+    async focus() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.focus();
+        }
+        const input = await this.inputEl();
+        return input.focus();
+    }
+    /**
+     * Blurs the input element.
+     *
+     * @returns Promise that resolves when the input is blurred.
+     */
+    async blur() {
+        if (await this.isMultiline()) {
+            const textarea = await this.textareaEl();
+            return textarea.blur();
+        }
+        const input = await this.inputEl();
+        return input.blur();
+    }
+}
 
 class TnInputDirective {
     constructor() { }
@@ -2762,215 +3172,6 @@ class TnSelectHarness extends ComponentHarness {
     }
 }
 
-/**
- * Harness for interacting with tn-icon in tests.
- * Provides filtering by icon name and library for existence checks, as well as click interaction.
- *
- * @example
- * ```typescript
- * // Check for existence
- * const icon = await loader.getHarness(TnIconHarness);
- *
- * // Find icon by name
- * const folderIcon = await loader.getHarness(
- *   TnIconHarness.with({ name: 'folder' })
- * );
- *
- * // Find icon by name and library
- * const mdiIcon = await loader.getHarness(
- *   TnIconHarness.with({ name: 'account-circle', library: 'mdi' })
- * );
- *
- * // Check if icon exists
- * const hasIcon = await loader.hasHarness(
- *   TnIconHarness.with({ name: 'check' })
- * );
- *
- * // Click an icon
- * const closeIcon = await loader.getHarness(
- *   TnIconHarness.with({ name: 'close' })
- * );
- * await closeIcon.click();
- * ```
- */
-class TnIconHarness extends ComponentHarness {
-    /**
-     * The selector for the host element of a `TnIconComponent` instance.
-     */
-    static hostSelector = 'tn-icon';
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for an icon
-     * with specific attributes.
-     *
-     * @param options Options for filtering which icon instances are considered a match.
-     * @returns A `HarnessPredicate` configured with the given options.
-     *
-     * @example
-     * ```typescript
-     * // Find icon by name
-     * const icon = await loader.getHarness(
-     *   TnIconHarness.with({ name: 'home' })
-     * );
-     *
-     * // Find icon by library
-     * const customIcon = await loader.getHarness(
-     *   TnIconHarness.with({ library: 'custom' })
-     * );
-     *
-     * // Find icon with specific size
-     * const largeIcon = await loader.getHarness(
-     *   TnIconHarness.with({ size: 'lg' })
-     * );
-     * ```
-     */
-    static with(options = {}) {
-        return new HarnessPredicate(TnIconHarness, options)
-            .addOption('name', options.name, async (harness, name) => {
-            return (await harness.getName()) === name;
-        })
-            .addOption('library', options.library, async (harness, library) => {
-            return (await harness.getLibrary()) === library;
-        })
-            .addOption('size', options.size, async (harness, size) => {
-            return (await harness.getSize()) === size;
-        })
-            .addOption('fullSize', options.fullSize, async (harness, fullSize) => {
-            return (await harness.isFullSize()) === fullSize;
-        })
-            .addOption('customSize', options.customSize, async (harness, customSize) => {
-            return (await harness.getCustomSize()) === customSize;
-        });
-    }
-    /**
-     * Gets the icon name.
-     *
-     * @returns Promise resolving to the icon name.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const name = await icon.getName();
-     * expect(name).toBe('folder');
-     * ```
-     */
-    async getName() {
-        const host = await this.host();
-        return host.getAttribute('name');
-    }
-    /**
-     * Gets the icon library.
-     *
-     * @returns Promise resolving to the icon library.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const library = await icon.getLibrary();
-     * expect(library).toBe('mdi');
-     * ```
-     */
-    async getLibrary() {
-        const host = await this.host();
-        return host.getAttribute('library');
-    }
-    /**
-     * Gets the icon size.
-     *
-     * @returns Promise resolving to the icon size.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const size = await icon.getSize();
-     * expect(size).toBe('lg');
-     * ```
-     */
-    async getSize() {
-        const host = await this.host();
-        return host.getAttribute('size');
-    }
-    /**
-     * Gets the icon color.
-     *
-     * @returns Promise resolving to the icon color.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const color = await icon.getColor();
-     * expect(color).toBe('primary');
-     * ```
-     */
-    async getColor() {
-        const host = await this.host();
-        return host.getAttribute('color');
-    }
-    /**
-     * Checks if the icon is in full-size mode.
-     *
-     * @returns Promise resolving to true if the icon is full-size, false otherwise.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const isFullSize = await icon.isFullSize();
-     * expect(isFullSize).toBe(true);
-     * ```
-     */
-    async isFullSize() {
-        const host = await this.host();
-        const fullSizeAttr = await host.getAttribute('full-size');
-        return fullSizeAttr === 'true';
-    }
-    /**
-     * Gets the icon custom size.
-     *
-     * @returns Promise resolving to the custom size value, or null if not set.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const customSize = await icon.getCustomSize();
-     * expect(customSize).toBe('64px');
-     * ```
-     */
-    async getCustomSize() {
-        const host = await this.host();
-        return host.getAttribute('custom-size');
-    }
-    /**
-     * Checks if the icon is using a custom size.
-     *
-     * @returns Promise resolving to true if a custom size is set, false otherwise.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness);
-     * const hasCustomSize = await icon.hasCustomSize();
-     * expect(hasCustomSize).toBe(true);
-     * ```
-     */
-    async hasCustomSize() {
-        const customSize = await this.getCustomSize();
-        return customSize !== null;
-    }
-    /**
-     * Clicks the icon.
-     *
-     * @returns Promise that resolves when the click action is complete.
-     *
-     * @example
-     * ```typescript
-     * const icon = await loader.getHarness(TnIconHarness.with({ name: 'close' }));
-     * await icon.click();
-     * ```
-     */
-    async click() {
-        const host = await this.host();
-        return host.click();
-    }
-}
-
 /**
  * Marks an icon name for inclusion in the TrueNAS UI sprite generation.
  *
@@ -8711,5 +8912,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map