@truenas/ui-components 0.1.28 → 0.1.30

package/fesm2022/truenas-ui-components.mjs

@@ -4148,8 +4148,13 @@ class TnFormFieldComponent {
         if (errors['max']) {
             return `Maximum value is ${errors['max'].max}`;
         }
-        // Return custom error message if available
-        return Object.keys(errors)[0] || 'Invalid input';
+        // Return custom error message if the value is a string, otherwise use the key
+        const firstKey = Object.keys(errors)[0];
+        if (firstKey) {
+            const value = errors[firstKey];
+            return typeof value === 'string' ? value : firstKey;
+        }
+        return 'Invalid input';
     }
     showError = computed(() => {
         return this.hasError() && !!this.errorMessage();
@@ -4165,6 +4170,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'tn-form-field', standalone: true, imports: [], template: "<div class=\"tn-form-field\" [attr.data-testid]=\"testId()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"tn-form-field-label\" [class.required]=\"required()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required-asterisk\" aria-label=\"required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Form Control Content -->\n  <div class=\"tn-form-field-wrapper\">\n    <ng-content />\n  </div>\n\n  <!-- Hint or Error Message -->\n  <div class=\"tn-form-field-subscript\">\n    @if (showError()) {\n      <div\n        class=\"tn-form-field-error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorMessage() }}\n      </div>\n    }\n    @if (showHint()) {\n      <div class=\"tn-form-field-hint\">\n        {{ hint() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".tn-form-field{display:block;width:100%;margin-bottom:1rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-form-field-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-form-field-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-form-field-wrapper{position:relative;width:100%;overflow:visible}.tn-form-field-wrapper :ng-deep .tn-select-container,.tn-form-field-wrapper :ng-deep .tn-input-container{margin-bottom:0}.tn-form-field-wrapper :ng-deep .tn-select-label,.tn-form-field-wrapper :ng-deep .tn-input-label{display:none}.tn-form-field-wrapper :ng-deep .tn-select-error,.tn-form-field-wrapper :ng-deep .tn-input-error{display:none}.tn-form-field-wrapper :ng-deep .tn-select-dropdown{z-index:1000}.tn-form-field-subscript{min-height:1.25rem;margin-top:.25rem;font-size:.75rem;line-height:1.4}.tn-form-field-error{color:var(--tn-error, #dc3545);margin:0}.tn-form-field-hint{color:var(--tn-fg2, #6c757d);margin:0}.tn-form-field-wrapper:has(:focus-visible) .tn-form-field-label{color:var(--tn-primary, #007bff)}.tn-form-field-wrapper:has(.error) .tn-form-field-label{color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-form-field-label{transition:none}}@media(prefers-contrast:high){.tn-form-field-label,.tn-form-field-error{font-weight:600}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
 
+/**
+ * Harness for interacting with `tn-form-field` in tests.
+ * Provides methods for querying label, hint, error state, and accessing
+ * the projected form control.
+ *
+ * @example
+ * ```typescript
+ * // Find a form field by label
+ * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Email' }));
+ * expect(await field.getLabel()).toBe('Email');
+ *
+ * // Check for validation errors
+ * expect(await field.hasError()).toBe(true);
+ * expect(await field.getErrorMessage()).toBe('This field is required');
+ *
+ * // Check hint text
+ * const hinted = await loader.getHarness(TnFormFieldHarness.with({ label: 'Port' }));
+ * expect(await hinted.getHint()).toBe('Default port is 443');
+ *
+ * // Find by testId
+ * const field = await loader.getHarness(TnFormFieldHarness.with({ testId: 'email-field' }));
+ * ```
+ */
+class TnFormFieldHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnFormFieldComponent` instance.
+     */
+    static hostSelector = 'tn-form-field';
+    _label = this.locatorForOptional('.tn-form-field-label');
+    _error = this.locatorForOptional('.tn-form-field-error');
+    _hint = this.locatorForOptional('.tn-form-field-hint');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a form field
+     * with specific attributes.
+     *
+     * @param options Options for filtering which form field instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find by label text
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Name' }));
+     *
+     * // Find by label regex
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: /email/i }));
+     *
+     * // Find by testId
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ testId: 'name-field' }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnFormFieldHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))
+            .addOption('testId', options.testId, async (harness, testId) => {
+            return (await harness.getTestId()) === testId;
+        });
+    }
+    /**
+     * Gets the form field label text.
+     *
+     * @returns Promise resolving to the label text, or empty string if no label.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Name' }));
+     * expect(await field.getLabel()).toBe('Name');
+     * ```
+     */
+    async getLabel() {
+        const label = await this._label();
+        if (!label) {
+            return '';
+        }
+        const text = await label.text();
+        // Strip the required asterisk from the label text
+        return text.replace(/\s*\*\s*$/, '').trim();
+    }
+    /**
+     * Gets the error message text, if visible.
+     *
+     * @returns Promise resolving to the error message, or null if no error is shown.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Email' }));
+     * expect(await field.getErrorMessage()).toBe('Please enter a valid email address');
+     * ```
+     */
+    async getErrorMessage() {
+        const error = await this._error();
+        return error ? (await error.text()).trim() : null;
+    }
+    /**
+     * Checks whether the form field is currently showing an error.
+     *
+     * @returns Promise resolving to true if an error message is visible.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Email' }));
+     * expect(await field.hasError()).toBe(true);
+     * ```
+     */
+    async hasError() {
+        const error = await this._error();
+        return error !== null;
+    }
+    /**
+     * Gets the hint text, if visible.
+     *
+     * @returns Promise resolving to the hint text, or null if no hint is shown.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Port' }));
+     * expect(await field.getHint()).toBe('Default port is 443');
+     * ```
+     */
+    async getHint() {
+        const hint = await this._hint();
+        return hint ? (await hint.text()).trim() : null;
+    }
+    /**
+     * Checks whether the form field is marked as required.
+     *
+     * @returns Promise resolving to true if the required asterisk is present.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness.with({ label: 'Name' }));
+     * expect(await field.isRequired()).toBe(true);
+     * ```
+     */
+    async isRequired() {
+        const label = await this._label();
+        if (!label) {
+            return false;
+        }
+        return label.hasClass('required');
+    }
+    /**
+     * Gets the test ID attribute value.
+     *
+     * @returns Promise resolving to the data-testid string, or null.
+     *
+     * @example
+     * ```typescript
+     * const field = await loader.getHarness(TnFormFieldHarness);
+     * expect(await field.getTestId()).toBe('email-field');
+     * ```
+     */
+    async getTestId() {
+        const root = await this.locatorFor('.tn-form-field')();
+        return root.getAttribute('data-testid');
+    }
+}
+
 class TnSelectComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionGroups = input([], ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
@@ -10892,5 +11054,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map