@raintonic/formaui 0.4.0 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +80 -35
- package/README.md +22 -26
- package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs +39 -41
- package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-form-field.mjs +207 -3
- package/fesm2022/raintonic-formaui-cdk-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs +19 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs +5 -12
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-accordion.mjs +8 -5
- package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-alert.mjs +16 -2
- package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs +255 -462
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-avatar.mjs +34 -59
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-badge.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button-group.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button.mjs +15 -20
- package/fesm2022/raintonic-formaui-components-button.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-chip.mjs +97 -0
- package/fesm2022/raintonic-formaui-components-chip.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-data-table.mjs +69 -29
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +223 -144
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs +888 -0
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs +774 -0
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-file-upload.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +81 -50
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-icon.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-icon.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs +47 -12
- package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-number-input.mjs +20 -12
- package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-password-input.mjs +35 -110
- package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +3 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-progressbar.mjs +3 -2
- package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +5 -6
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +257 -412
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs +525 -0
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-skeleton.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-skeleton.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-slider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-spinner.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-stepper.mjs +50 -45
- package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-strength-meter.mjs +149 -0
- package/fesm2022/raintonic-formaui-components-strength-meter.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-tab.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +194 -154
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs +302 -0
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-toggle.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toggle.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +10 -4
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-topbar.mjs +60 -0
- package/fesm2022/raintonic-formaui-components-topbar.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-tree-select.mjs +59 -69
- package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-table.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree.mjs +31 -5
- package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-core.mjs +279 -1
- package/fesm2022/raintonic-formaui-core.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-breakpoint.mjs +93 -0
- package/fesm2022/raintonic-formaui-services-breakpoint.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-services-dialog.mjs +314 -16
- package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-notification.mjs +93 -29
- package/fesm2022/raintonic-formaui-services-notification.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-theme.mjs +46 -196
- package/fesm2022/raintonic-formaui-services-theme.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +2329 -450
- package/llms.txt +36 -33
- package/package.json +42 -19
- package/styles/fonts/Geist-Bold.woff2 +0 -0
- package/styles/fonts/Geist-Italic.woff2 +0 -0
- package/styles/fonts/Geist-Light.woff2 +0 -0
- package/styles/fonts/Geist-Medium.woff2 +0 -0
- package/styles/fonts/Geist-Regular.woff2 +0 -0
- package/styles/fonts/Geist-SemiBold.woff2 +0 -0
- package/styles/fonts/GeistMono-Regular.woff2 +0 -0
- package/styles/generated/_tokens.scss +906 -0
- package/styles/index.scss +11 -10
- package/styles/partials/_brand.scss +46 -0
- package/styles/partials/_constants.scss +22 -20
- package/styles/partials/_fonts.scss +54 -10
- package/styles/partials/_grid.scss +29 -18
- package/styles/partials/_mixins.scss +69 -27
- package/styles/partials/_motion.scss +28 -33
- package/styles/partials/_theme.scss +28 -255
- package/styles/partials/_type.scss +117 -0
- package/styles/partials/_typography.scss +45 -45
- package/styles/partials/_utilities.scss +198 -98
- package/styles/partials/components/_button.scss +144 -75
- package/styles/partials/components/_dialog.scss +181 -180
- package/styles/partials/components/_overlay.scss +87 -87
- package/styles/partials/themes/_dark.scss +3 -268
- package/styles/partials/themes/_light.scss +4 -268
- package/styles/styles.css +7744 -0
- package/styles/styles.entry.scss +3 -0
- package/styles/utilities.css +4802 -0
- package/styles/utilities.entry.scss +3 -0
- package/types/raintonic-formaui-cdk-drag-drop.d.ts +0 -1
- package/types/raintonic-formaui-cdk-drag-drop.d.ts.map +1 -1
- package/types/raintonic-formaui-cdk-form-field.d.ts +118 -2
- package/types/raintonic-formaui-cdk-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-cdk-overlay.d.ts +2 -0
- package/types/raintonic-formaui-cdk-overlay.d.ts.map +1 -1
- package/types/raintonic-formaui-cdk-virtual-scroll.d.ts +0 -1
- package/types/raintonic-formaui-cdk-virtual-scroll.d.ts.map +1 -1
- package/types/raintonic-formaui-components-accordion.d.ts +1 -1
- package/types/raintonic-formaui-components-accordion.d.ts.map +1 -1
- package/types/raintonic-formaui-components-alert.d.ts +6 -1
- package/types/raintonic-formaui-components-alert.d.ts.map +1 -1
- package/types/raintonic-formaui-components-autocomplete.d.ts +73 -116
- package/types/raintonic-formaui-components-autocomplete.d.ts.map +1 -1
- package/types/raintonic-formaui-components-avatar.d.ts +13 -31
- package/types/raintonic-formaui-components-avatar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-button.d.ts +4 -10
- package/types/raintonic-formaui-components-button.d.ts.map +1 -1
- package/types/raintonic-formaui-components-chip.d.ts +43 -0
- package/types/raintonic-formaui-components-chip.d.ts.map +1 -0
- package/types/raintonic-formaui-components-data-table.d.ts +48 -11
- package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-date-picker.d.ts +59 -23
- package/types/raintonic-formaui-components-date-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-dropdown-menu.d.ts +394 -0
- package/types/raintonic-formaui-components-dropdown-menu.d.ts.map +1 -0
- package/types/raintonic-formaui-components-dual-tier-navigation.d.ts +87 -0
- package/types/raintonic-formaui-components-dual-tier-navigation.d.ts.map +1 -0
- package/types/raintonic-formaui-components-form-field.d.ts +51 -21
- package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-components-input.d.ts +20 -11
- package/types/raintonic-formaui-components-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-number-input.d.ts +5 -3
- package/types/raintonic-formaui-components-number-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-password-input.d.ts +18 -32
- package/types/raintonic-formaui-components-password-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-popover.d.ts.map +1 -1
- package/types/raintonic-formaui-components-progressbar.d.ts +1 -1
- package/types/raintonic-formaui-components-progressbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-radio.d.ts +1 -2
- package/types/raintonic-formaui-components-radio.d.ts.map +1 -1
- package/types/raintonic-formaui-components-select.d.ts +107 -76
- package/types/raintonic-formaui-components-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-sidebar-nav-menu.d.ts +223 -0
- package/types/raintonic-formaui-components-sidebar-nav-menu.d.ts.map +1 -0
- package/types/raintonic-formaui-components-stepper.d.ts +4 -2
- package/types/raintonic-formaui-components-stepper.d.ts.map +1 -1
- package/types/raintonic-formaui-components-strength-meter.d.ts +78 -0
- package/types/raintonic-formaui-components-strength-meter.d.ts.map +1 -0
- package/types/raintonic-formaui-components-time-picker.d.ts +44 -24
- package/types/raintonic-formaui-components-time-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toggle-group.d.ts +100 -0
- package/types/raintonic-formaui-components-toggle-group.d.ts.map +1 -0
- package/types/raintonic-formaui-components-tooltip.d.ts +2 -1
- package/types/raintonic-formaui-components-tooltip.d.ts.map +1 -1
- package/types/raintonic-formaui-components-topbar.d.ts +48 -0
- package/types/raintonic-formaui-components-topbar.d.ts.map +1 -0
- package/types/raintonic-formaui-components-tree-select.d.ts +25 -9
- package/types/raintonic-formaui-components-tree-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tree.d.ts +12 -1
- package/types/raintonic-formaui-components-tree.d.ts.map +1 -1
- package/types/raintonic-formaui-core.d.ts +243 -5
- package/types/raintonic-formaui-core.d.ts.map +1 -1
- package/types/raintonic-formaui-services-breakpoint.d.ts +44 -0
- package/types/raintonic-formaui-services-breakpoint.d.ts.map +1 -0
- package/types/raintonic-formaui-services-dialog.d.ts +141 -2
- package/types/raintonic-formaui-services-dialog.d.ts.map +1 -1
- package/types/raintonic-formaui-services-notification.d.ts +24 -2
- package/types/raintonic-formaui-services-notification.d.ts.map +1 -1
- package/types/raintonic-formaui-services-theme.d.ts +13 -103
- package/types/raintonic-formaui-services-theme.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
- package/fesm2022/raintonic-formaui-components-big-menu.mjs +0 -86
- package/fesm2022/raintonic-formaui-components-big-menu.mjs.map +0 -1
- package/fesm2022/raintonic-formaui-components-menu.mjs +0 -896
- package/fesm2022/raintonic-formaui-components-menu.mjs.map +0 -1
- package/fesm2022/raintonic-formaui-components-sidebar.mjs +0 -275
- package/fesm2022/raintonic-formaui-components-sidebar.mjs.map +0 -1
- package/fesm2022/raintonic-formaui-components-tag.mjs +0 -95
- package/fesm2022/raintonic-formaui-components-tag.mjs.map +0 -1
- package/styles/_fonts-entry.scss +0 -3
- package/styles/fonts/inter-tight-latin-italic.woff2 +0 -0
- package/styles/fonts/inter-tight-latin.woff2 +0 -0
- package/types/raintonic-formaui-components-big-menu.d.ts +0 -73
- package/types/raintonic-formaui-components-big-menu.d.ts.map +0 -1
- package/types/raintonic-formaui-components-menu.d.ts +0 -403
- package/types/raintonic-formaui-components-menu.d.ts.map +0 -1
- package/types/raintonic-formaui-components-sidebar.d.ts +0 -185
- package/types/raintonic-formaui-components-sidebar.d.ts.map +0 -1
- package/types/raintonic-formaui-components-tag.d.ts +0 -43
- package/types/raintonic-formaui-components-tag.d.ts.map +0 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Injectable, inject, ChangeDetectorRef, input, contentChild, computed, signal, effect, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { Directive, Injectable, InjectionToken, inject, ChangeDetectorRef, ElementRef, input, contentChild, booleanAttribute, computed, signal, effect, forwardRef, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
|
-
import { FuiIntlBase, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
|
|
4
|
+
import { FuiIntlBase, FUI_FORM_FIELD_CONTROL, FUI_STRENGTH_METER } from '@raintonic/formaui/core';
|
|
5
5
|
import { FuiIconComponent } from '@raintonic/formaui/components/icon';
|
|
6
|
+
import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Prefix directive for content to be placed before the input in fui-form-field
|
|
@@ -61,6 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
61
62
|
class FuiFormFieldIntl extends FuiIntlBase {
|
|
62
63
|
copyAriaLabel = 'Copy value';
|
|
63
64
|
copiedAriaLabel = 'Copied';
|
|
65
|
+
copyTooltip = 'Copy';
|
|
66
|
+
copiedTooltip = 'Copied';
|
|
64
67
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
65
68
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldIntl, providedIn: 'root' });
|
|
66
69
|
}
|
|
@@ -69,6 +72,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
69
72
|
args: [{ providedIn: 'root' }]
|
|
70
73
|
}] });
|
|
71
74
|
|
|
75
|
+
/**
|
|
76
|
+
* Injection token for the parent form-field component.
|
|
77
|
+
* Child controls inject this (via @Optional()) to coordinate with the
|
|
78
|
+
* containing form-field without coupling to the component class directly.
|
|
79
|
+
*/
|
|
80
|
+
const FUI_FORM_FIELD = new InjectionToken('FuiFormField');
|
|
81
|
+
|
|
72
82
|
/**
|
|
73
83
|
* # FormField Component
|
|
74
84
|
*
|
|
@@ -150,17 +160,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
150
160
|
class FuiFormFieldComponent {
|
|
151
161
|
intl = inject(FuiFormFieldIntl);
|
|
152
162
|
_cdr = inject(ChangeDetectorRef);
|
|
153
|
-
|
|
154
|
-
* Whether the form field is in read-only mode.
|
|
155
|
-
* When true, hides the input and shows a plain text value instead.
|
|
156
|
-
* @default false
|
|
157
|
-
*/
|
|
158
|
-
readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
163
|
+
_elementRef = inject((ElementRef));
|
|
159
164
|
/**
|
|
160
165
|
* Visual appearance variant.
|
|
161
166
|
* - `'outline'` (default): bordered input with label above
|
|
162
167
|
* - `'fill'`: filled background with bottom-border accent
|
|
163
|
-
* - `'float'`: label floats from inside the input to above it on focus/value
|
|
164
168
|
*/
|
|
165
169
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
166
170
|
/**
|
|
@@ -173,7 +177,10 @@ class FuiFormFieldComponent {
|
|
|
173
177
|
_prefixes;
|
|
174
178
|
_suffixes;
|
|
175
179
|
_connectionContainerRef;
|
|
176
|
-
|
|
180
|
+
_wrapperRef;
|
|
181
|
+
hideSubscript = input(false, { ...(ngDevMode ? { debugName: "hideSubscript" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
182
|
+
// Strength meter content child — used to determine whether hints should be suppressed
|
|
183
|
+
strengthMeter = contentChild(FUI_STRENGTH_METER, ...(ngDevMode ? [{ debugName: "strengthMeter" }] : /* istanbul ignore next */ []));
|
|
177
184
|
// Read-only display value derived from the control's value
|
|
178
185
|
// For select/autocomplete controls, uses their displayValue signal to show the label
|
|
179
186
|
displayValue = computed(() => {
|
|
@@ -201,70 +208,82 @@ class FuiFormFieldComponent {
|
|
|
201
208
|
isDisabled = computed(() => {
|
|
202
209
|
return this.control()?.disabled() ?? false;
|
|
203
210
|
}, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
211
|
+
isReadonly = computed(() => {
|
|
212
|
+
return this.control()?.readonly() ?? false;
|
|
213
|
+
}, ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
|
|
204
214
|
isEmpty = computed(() => {
|
|
205
215
|
return this.control()?.empty() ?? false;
|
|
206
216
|
}, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
|
|
207
217
|
isRequired = computed(() => {
|
|
208
218
|
return this.control()?.required() ?? false;
|
|
209
219
|
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
|
|
210
|
-
/**
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
*/
|
|
215
|
-
shouldFloat = computed(() => {
|
|
216
|
-
if (this.appearance() !== 'float')
|
|
217
|
-
return false;
|
|
218
|
-
return this.isFocused() || !this.isEmpty();
|
|
219
|
-
}, ...(ngDevMode ? [{ debugName: "shouldFloat" }] : /* istanbul ignore next */ []));
|
|
220
|
+
/** Whether the projected control is a fui-number-input (needs zero horizontal padding) */
|
|
221
|
+
isNumberInput = computed(() => {
|
|
222
|
+
return this.control()?.controlType === 'fui-number-input';
|
|
223
|
+
}, ...(ngDevMode ? [{ debugName: "isNumberInput" }] : /* istanbul ignore next */ []));
|
|
220
224
|
/** Whether control-specific icons (dropdown caret, calendar) should be hidden in readOnly mode */
|
|
221
225
|
hideControlIcons = computed(() => {
|
|
222
|
-
if (!this.
|
|
226
|
+
if (!this.isReadonly())
|
|
223
227
|
return false;
|
|
224
228
|
const ct = this.control()?.controlType;
|
|
225
229
|
return ct === 'fui-select' || ct === 'fui-autocomplete' || ct === 'fui-date-picker';
|
|
226
230
|
}, ...(ngDevMode ? [{ debugName: "hideControlIcons" }] : /* istanbul ignore next */ []));
|
|
231
|
+
/** Whether the copy button should appear in read-only mode.
|
|
232
|
+
* Delegates to the control's `readonlyCopyEnabled()` method.
|
|
233
|
+
* Only plain inputs (`fuiInput`) opt in — defaults to `false`. */
|
|
234
|
+
showCopyButton = computed(() => {
|
|
235
|
+
const control = this.control();
|
|
236
|
+
return this.isReadonly() && (control?.readonlyCopyEnabled?.() ?? false);
|
|
237
|
+
}, ...(ngDevMode ? [{ debugName: "showCopyButton" }] : /* istanbul ignore next */ []));
|
|
227
238
|
/** Whether the "copied" feedback indicator is active */
|
|
228
239
|
copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
|
|
229
240
|
_copiedTimeout = null;
|
|
230
241
|
// Generate unique IDs
|
|
231
242
|
labelId = `fui-form-field-label-${Math.random().toString(36).substring(2, 11)}`;
|
|
232
243
|
hintId = `fui-form-field-hint-${Math.random().toString(36).substring(2, 11)}`;
|
|
244
|
+
/** Whether the strength meter should be shown. Visible only when the control
|
|
245
|
+
* has a non-empty value (i.e. the user has typed something). */
|
|
246
|
+
showStrengthMeter = computed(() => {
|
|
247
|
+
const ctrl = this.control();
|
|
248
|
+
if (!ctrl)
|
|
249
|
+
return false;
|
|
250
|
+
return !ctrl.empty() && !!this.strengthMeter();
|
|
251
|
+
}, ...(ngDevMode ? [{ debugName: "showStrengthMeter" }] : /* istanbul ignore next */ []));
|
|
233
252
|
errorId = `fui-form-field-error-${Math.random().toString(36).substring(2, 11)}`;
|
|
234
253
|
constructor() {
|
|
235
|
-
this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
254
|
+
this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
255
|
+
this._cdr.markForCheck();
|
|
256
|
+
});
|
|
236
257
|
// Effect to update aria-describedby when state changes
|
|
237
258
|
effect(() => {
|
|
238
259
|
const control = this.control();
|
|
239
|
-
if (control) {
|
|
240
|
-
|
|
241
|
-
if (this.hasError()) {
|
|
242
|
-
ids.push(this.errorId);
|
|
243
|
-
}
|
|
244
|
-
else {
|
|
245
|
-
ids.push(this.hintId);
|
|
246
|
-
}
|
|
247
|
-
control.setDescribedByIds(ids);
|
|
260
|
+
if (!control) {
|
|
261
|
+
return;
|
|
248
262
|
}
|
|
249
|
-
|
|
250
|
-
|
|
263
|
+
const ids = [];
|
|
264
|
+
if (this.hasError()) {
|
|
265
|
+
ids.push(this.errorId);
|
|
251
266
|
}
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
effect(() => {
|
|
255
|
-
const control = this.control();
|
|
256
|
-
const ro = this.readOnly();
|
|
257
|
-
if (control?.setReadOnly) {
|
|
258
|
-
control.setReadOnly(ro);
|
|
267
|
+
else {
|
|
268
|
+
ids.push(this.hintId);
|
|
259
269
|
}
|
|
270
|
+
control.setDescribedByIds(ids);
|
|
260
271
|
});
|
|
261
272
|
}
|
|
273
|
+
/**
|
|
274
|
+
* Returns the element that overlay panels (select, autocomplete, date-picker)
|
|
275
|
+
* should use as their width reference. This is the form-field wrapper which
|
|
276
|
+
* spans the full width including prefix/suffix areas.
|
|
277
|
+
*/
|
|
278
|
+
getConnectedOverlayOrigin() {
|
|
279
|
+
return this._wrapperRef ?? this._connectionContainerRef ?? this._elementRef;
|
|
280
|
+
}
|
|
262
281
|
/**
|
|
263
282
|
* Handles click on the form field container
|
|
264
283
|
*/
|
|
265
284
|
onContainerClick(event) {
|
|
266
285
|
const control = this.control();
|
|
267
|
-
if (control && !this.isDisabled() && !this.
|
|
286
|
+
if (control && !this.isDisabled() && !this.isReadonly()) {
|
|
268
287
|
control.onContainerClick(event);
|
|
269
288
|
}
|
|
270
289
|
}
|
|
@@ -335,25 +354,34 @@ class FuiFormFieldComponent {
|
|
|
335
354
|
return (this._suffixes?.length ?? 0) > 0;
|
|
336
355
|
}
|
|
337
356
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFormFieldComponent, isStandalone: true, selector: "fui-form-field", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null }, hideSubscript: { classPropertyName: "hideSubscript", publicName: "hideSubscript", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class.fui-form-field--disabled": "isDisabled()", "class.fui-form-field--focused": "isFocused()", "class.fui-form-field--error": "hasError()", "class.fui-form-field--empty": "isEmpty()", "class.fui-form-field--readonly": "readOnly()", "class.fui-form-field--float": "appearance() === \"float\"", "class.fui-form-field--fill": "appearance() === \"fill\"", "class.fui-form-field--float-active": "shouldFloat()", "attr.aria-labelledby": "labelId", "attr.aria-disabled": "isDisabled() || null" }, classAttribute: "fui-form-field" }, queries: [{ propertyName: "control", first: true, predicate: FUI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_prefixes", predicate: FuiPrefixDirective, descendants: true }, { propertyName: "_suffixes", predicate: FuiSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "_connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) \u2014 hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-font-size-02);--fui-form-field-border-radius: var(--fui-border-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-04);--fui-form-field-bg: var(--fui-surface-02);--fui-form-field-border-color: var(--fui-border-color);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-font-size-01);--fui-form-field-label-spacing: var(--fui-spacing-02);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-family-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition:background-color,border-color,box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-01)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__wrapper{background-color:var(--fui-surface-01);border-color:var(--fui-primary)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-state-error);box-shadow:0 0 0 4px var(--fui-danger-50)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-field-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(input:focus) .fui-form-field__input input:-webkit-autofill,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary)}.fui-form-field--disabled:not(.fui-form-field--readonly){opacity:.5}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__label{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__wrapper{cursor:default;background-color:var(--fui-surface-02);border-color:var(--fui-border-color);box-shadow:none}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-color)!important;box-shadow:none;background-color:var(--fui-surface-00)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:transparent;-webkit-text-fill-color:transparent}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-02);color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field__select-icon{display:flex;align-items:center;justify-content:center;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);margin-left:var(--fui-spacing-02);color:var(--fui-icon-secondary);pointer-events:none;transition:color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field:has(.fui-select--open) .fui-form-field__select-icon{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-form-field--error .fui-form-field__select-icon{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__select-icon{color:var(--fui-text-secondary)}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;text-transform:uppercase;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-wide);color:var(--fui-form-field-label-color);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__required-marker{color:var(--fui-state-error);margin-left:var(--fui-spacing-02);font-weight:var(--fui-font-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-secondary);-webkit-text-fill-color:var(--fui-text-secondary)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-02) 0 0;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-03);letter-spacing:var(--fui-letter-spacing-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field--error .fui-form-field__hint{opacity:0}.fui-form-field--float .fui-form-field__container{position:relative}.fui-form-field--float .fui-form-field__label{position:absolute;left:var(--fui-spacing-04);top:50%;transform:translateY(-50%);transform-origin:left center;pointer-events:none;z-index:3;margin-bottom:0;font-size:var(--fui-font-size-02);text-transform:none;color:var(--fui-text-secondary);transition:transform,font-size,top,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--float.fui-form-field--float-active .fui-form-field__label{top:-.5em;transform:translateY(0) scale(.75);font-size:var(--fui-font-size-01);color:var(--fui-primary);background-color:var(--fui-surface-00);padding:0 var(--fui-spacing-02)}.fui-form-field--float.fui-form-field--error.fui-form-field--float-active .fui-form-field__label{color:var(--fui-state-error)}.fui-form-field--float .fui-form-field__wrapper{margin-top:var(--fui-spacing-03)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-surface-03);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-border-radius-sm) var(--fui-border-radius-sm) 0 0;box-shadow:none}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-surface-04);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-primary);border-top:none!important;border-left:none!important;border-right:none!important;box-shadow:none}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-state-error);border-top:none;border-left:none;border-right:none;box-shadow:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-03) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-06)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-02);background-color:var(--fui-surface-00);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFormFieldComponent, isStandalone: true, selector: "fui-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null }, hideSubscript: { classPropertyName: "hideSubscript", publicName: "hideSubscript", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class.fui-form-field--disabled": "isDisabled()", "class.fui-form-field--focused": "isFocused()", "class.fui-form-field--error": "hasError()", "class.fui-form-field--empty": "isEmpty()", "class.fui-form-field--readonly": "isReadonly()", "class.fui-form-field--fill": "appearance() === \"fill\"", "class.fui-form-field--number-input": "isNumberInput()", "attr.aria-labelledby": "labelId", "attr.aria-disabled": "isDisabled() || null" }, classAttribute: "fui-form-field" }, providers: [
|
|
358
|
+
{
|
|
359
|
+
provide: FUI_FORM_FIELD,
|
|
360
|
+
useExisting: forwardRef(() => FuiFormFieldComponent),
|
|
361
|
+
},
|
|
362
|
+
], queries: [{ propertyName: "control", first: true, predicate: FUI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "strengthMeter", first: true, predicate: FUI_STRENGTH_METER, descendants: true, isSignal: true }, { propertyName: "_prefixes", predicate: FuiPrefixDirective, descendants: true }, { propertyName: "_suffixes", predicate: FuiSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "_connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }, { propertyName: "_wrapperRef", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !isReadonly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n #wrapper\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || showCopyButton()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (showCopyButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n fuiTooltipPosition=\"top\"\r\n fuiTooltipSize=\"sm\"\r\n [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n fuiTooltipTrigger=\"manual\"\r\n [fuiTooltipShow]=\"copied()\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n <!-- The strength meter and the error are exclusive -->\r\n @if (hasError() && !showStrengthMeter()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (showStrengthMeter()) {\r\n <ng-content select=\"fui-strength-meter\"></ng-content>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-text-base);--fui-form-field-border-radius: var(--fui-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-6);--fui-form-field-bg: var(--fui-bg-subtle);--fui-form-field-border-color: var(--fui-border-default);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-text-sm);--fui-form-field-label-spacing: var(--fui-spacing-2);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition-property:background-color,border-color,box-shadow;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-xs);overflow:hidden}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly):not(.fui-form-field--error) .fui-form-field__wrapper{background-color:var(--fui-bg-default);border-color:var(--fui-border-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error);outline:2px solid var(--fui-error-20)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;outline:2px solid var(--fui-primary-10)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary-fg)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__label{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed;color:var(--fui-text-disabled);background-color:var(--fui-bg-muted)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__prefix,.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__suffix{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__wrapper{box-shadow:none;cursor:default;color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default)!important;box-shadow:none;background-color:var(--fui-bg-default)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-2);color:var(--fui-text-secondary);font-size:var(--fui-text-base);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--number-input .fui-form-field__wrapper{padding:0}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-form-field-label-color);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__required-marker{color:var(--fui-text-error);margin-left:var(--fui-spacing-2);font-weight:var(--fui-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__input:has(input[type=color]){height:20px}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary-fg)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-2) 0 0;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-radius-sm) var(--fui-radius-sm) 0 0}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-border-primary);border-top:none!important;border-left:none!important;border-right:none!important}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-border-error);border-top:none;border-left:none;border-right:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-4) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-9)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-2);background-color:var(--fui-bg-default);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary-fg)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
339
363
|
}
|
|
340
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldComponent, decorators: [{
|
|
341
365
|
type: Component,
|
|
342
|
-
args: [{ selector: 'fui-form-field', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None,
|
|
366
|
+
args: [{ selector: 'fui-form-field', standalone: true, imports: [FuiIconComponent, FuiTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
367
|
+
{
|
|
368
|
+
provide: FUI_FORM_FIELD,
|
|
369
|
+
useExisting: forwardRef(() => FuiFormFieldComponent),
|
|
370
|
+
},
|
|
371
|
+
], host: {
|
|
343
372
|
class: 'fui-form-field',
|
|
344
373
|
'[class.fui-form-field--disabled]': 'isDisabled()',
|
|
345
374
|
'[class.fui-form-field--focused]': 'isFocused()',
|
|
346
375
|
'[class.fui-form-field--error]': 'hasError()',
|
|
347
376
|
'[class.fui-form-field--empty]': 'isEmpty()',
|
|
348
|
-
'[class.fui-form-field--readonly]': '
|
|
349
|
-
'[class.fui-form-field--float]': 'appearance() === "float"',
|
|
377
|
+
'[class.fui-form-field--readonly]': 'isReadonly()',
|
|
350
378
|
'[class.fui-form-field--fill]': 'appearance() === "fill"',
|
|
351
|
-
'[class.fui-form-field--
|
|
379
|
+
'[class.fui-form-field--number-input]': 'isNumberInput()',
|
|
352
380
|
role: 'group',
|
|
353
381
|
'[attr.aria-labelledby]': 'labelId',
|
|
354
382
|
'[attr.aria-disabled]': 'isDisabled() || null',
|
|
355
|
-
}, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) \u2014 hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-font-size-02);--fui-form-field-border-radius: var(--fui-border-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-04);--fui-form-field-bg: var(--fui-surface-02);--fui-form-field-border-color: var(--fui-border-color);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-font-size-01);--fui-form-field-label-spacing: var(--fui-spacing-02);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-family-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition:background-color,border-color,box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-01)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__wrapper{background-color:var(--fui-surface-01);border-color:var(--fui-primary)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-state-error);box-shadow:0 0 0 4px var(--fui-danger-50)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-field-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(input:focus) .fui-form-field__input input:-webkit-autofill,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary)}.fui-form-field--disabled:not(.fui-form-field--readonly){opacity:.5}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__label{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__wrapper{cursor:default;background-color:var(--fui-surface-02);border-color:var(--fui-border-color);box-shadow:none}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-color)!important;box-shadow:none;background-color:var(--fui-surface-00)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:transparent;-webkit-text-fill-color:transparent}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-02);color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field__select-icon{display:flex;align-items:center;justify-content:center;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);margin-left:var(--fui-spacing-02);color:var(--fui-icon-secondary);pointer-events:none;transition:color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field:has(.fui-select--open) .fui-form-field__select-icon{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-form-field--error .fui-form-field__select-icon{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__select-icon{color:var(--fui-text-secondary)}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;text-transform:uppercase;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-wide);color:var(--fui-form-field-label-color);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__required-marker{color:var(--fui-state-error);margin-left:var(--fui-spacing-02);font-weight:var(--fui-font-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-secondary);-webkit-text-fill-color:var(--fui-text-secondary)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-02) 0 0;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-03);letter-spacing:var(--fui-letter-spacing-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field--error .fui-form-field__hint{opacity:0}.fui-form-field--float .fui-form-field__container{position:relative}.fui-form-field--float .fui-form-field__label{position:absolute;left:var(--fui-spacing-04);top:50%;transform:translateY(-50%);transform-origin:left center;pointer-events:none;z-index:3;margin-bottom:0;font-size:var(--fui-font-size-02);text-transform:none;color:var(--fui-text-secondary);transition:transform,font-size,top,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--float.fui-form-field--float-active .fui-form-field__label{top:-.5em;transform:translateY(0) scale(.75);font-size:var(--fui-font-size-01);color:var(--fui-primary);background-color:var(--fui-surface-00);padding:0 var(--fui-spacing-02)}.fui-form-field--float.fui-form-field--error.fui-form-field--float-active .fui-form-field__label{color:var(--fui-state-error)}.fui-form-field--float .fui-form-field__wrapper{margin-top:var(--fui-spacing-03)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-surface-03);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-border-radius-sm) var(--fui-border-radius-sm) 0 0;box-shadow:none}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-surface-04);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-primary);border-top:none!important;border-left:none!important;border-right:none!important;box-shadow:none}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-state-error);border-top:none;border-left:none;border-right:none;box-shadow:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-03) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-06)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-02);background-color:var(--fui-surface-00);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary)}\n"] }]
|
|
356
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
383
|
+
}, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !isReadonly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n #wrapper\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || showCopyButton()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (showCopyButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n fuiTooltipPosition=\"top\"\r\n fuiTooltipSize=\"sm\"\r\n [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n fuiTooltipTrigger=\"manual\"\r\n [fuiTooltipShow]=\"copied()\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n <!-- The strength meter and the error are exclusive -->\r\n @if (hasError() && !showStrengthMeter()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (showStrengthMeter()) {\r\n <ng-content select=\"fui-strength-meter\"></ng-content>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-text-base);--fui-form-field-border-radius: var(--fui-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-6);--fui-form-field-bg: var(--fui-bg-subtle);--fui-form-field-border-color: var(--fui-border-default);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-text-sm);--fui-form-field-label-spacing: var(--fui-spacing-2);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition-property:background-color,border-color,box-shadow;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-xs);overflow:hidden}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly):not(.fui-form-field--error) .fui-form-field__wrapper{background-color:var(--fui-bg-default);border-color:var(--fui-border-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error);outline:2px solid var(--fui-error-20)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;outline:2px solid var(--fui-primary-10)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary-fg)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__label{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed;color:var(--fui-text-disabled);background-color:var(--fui-bg-muted)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__prefix,.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__suffix{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__wrapper{box-shadow:none;cursor:default;color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default)!important;box-shadow:none;background-color:var(--fui-bg-default)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-2);color:var(--fui-text-secondary);font-size:var(--fui-text-base);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--number-input .fui-form-field__wrapper{padding:0}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-form-field-label-color);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__required-marker{color:var(--fui-text-error);margin-left:var(--fui-spacing-2);font-weight:var(--fui-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__input:has(input[type=color]){height:20px}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary-fg)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-2) 0 0;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-radius-sm) var(--fui-radius-sm) 0 0}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-border-primary);border-top:none!important;border-left:none!important;border-right:none!important}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-border-error);border-top:none;border-left:none;border-right:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-4) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-9)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-2);background-color:var(--fui-bg-default);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary-fg)}\n"] }]
|
|
384
|
+
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FUI_FORM_FIELD_CONTROL), { isSignal: true }] }], _prefixes: [{
|
|
357
385
|
type: ContentChildren,
|
|
358
386
|
args: [FuiPrefixDirective, { descendants: true }]
|
|
359
387
|
}], _suffixes: [{
|
|
@@ -362,7 +390,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
362
390
|
}], _connectionContainerRef: [{
|
|
363
391
|
type: ViewChild,
|
|
364
392
|
args: ['connectionContainer', { static: true }]
|
|
365
|
-
}],
|
|
393
|
+
}], _wrapperRef: [{
|
|
394
|
+
type: ViewChild,
|
|
395
|
+
args: ['wrapper', { static: true }]
|
|
396
|
+
}], hideSubscript: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSubscript", required: false }] }], strengthMeter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FUI_STRENGTH_METER), { isSignal: true }] }] } });
|
|
366
397
|
|
|
367
398
|
/**
|
|
368
399
|
* FuiErrorComponent
|
|
@@ -493,5 +524,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
493
524
|
* Generated bundle index. Do not edit.
|
|
494
525
|
*/
|
|
495
526
|
|
|
496
|
-
export { FuiErrorComponent, FuiFormFieldComponent, FuiFormFieldIntl, FuiHintComponent, FuiLabelComponent, FuiPrefixDirective, FuiSuffixDirective };
|
|
527
|
+
export { FUI_FORM_FIELD, FuiErrorComponent, FuiFormFieldComponent, FuiFormFieldIntl, FuiHintComponent, FuiLabelComponent, FuiPrefixDirective, FuiSuffixDirective };
|
|
497
528
|
//# sourceMappingURL=raintonic-formaui-components-form-field.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-form-field.mjs","sources":["../../../lib/components/form-field/prefix.directive.ts","../../../lib/components/form-field/suffix.directive.ts","../../../lib/components/form-field/form-field.intl.ts","../../../lib/components/form-field/form-field.component.ts","../../../lib/components/form-field/form-field.component.html","../../../lib/components/form-field/error.component.ts","../../../lib/components/form-field/hint.component.ts","../../../lib/components/form-field/label.component.ts","../../../lib/components/form-field/raintonic-formaui-components-form-field.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n/**\r\n * Prefix directive for content to be placed before the input in fui-form-field\r\n *\r\n * @example\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Price</fui-label>\r\n * <span fuiPrefix>$</span>\r\n * <input fuiInput type=\"number\">\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Directive({\r\n selector: '[fuiPrefix]',\r\n standalone: true,\r\n host: {\r\n class: 'fui-prefix',\r\n },\r\n})\r\nexport class FuiPrefixDirective {}\r\n","import { Directive } from '@angular/core';\r\n\r\n/**\r\n * Suffix directive for content to be placed after the input in fui-form-field\r\n *\r\n * @example\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Weight</fui-label>\r\n * <input fuiInput type=\"number\">\r\n * <span fuiSuffix>kg</span>\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Directive({\r\n selector: '[fuiSuffix]',\r\n standalone: true,\r\n host: {\r\n class: 'fui-suffix',\r\n },\r\n})\r\nexport class FuiSuffixDirective {}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiFormFieldIntl extends FuiIntlBase {\r\n copyAriaLabel = 'Copy value';\r\n copiedAriaLabel = 'Copied';\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n computed,\r\n contentChild,\r\n ContentChildren,\r\n effect,\r\n ElementRef,\r\n inject,\r\n input,\r\n InputSignal,\r\n QueryList,\r\n Signal,\r\n signal,\r\n ViewChild,\r\n ViewEncapsulation,\r\n WritableSignal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiPrefixDirective } from './prefix.directive';\r\nimport { FuiSuffixDirective } from './suffix.directive';\r\nimport { FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiFormFieldIntl } from './form-field.intl';\r\n\r\n/**\r\n * Available form field appearance modes.\r\n * - `'outline'` — default bordered appearance (Carbon Design System style)\r\n * - `'fill'` — filled background with bottom-border only\r\n * - `'float'` — floating-label that animates above the input on focus / value\r\n */\r\nexport type FormFieldAppearance = 'outline' | 'fill' | 'float';\r\n\r\n/**\r\n * # FormField Component\r\n *\r\n * A form field wrapper component that provides consistent styling and behavior\r\n * for form controls. Follows Angular Material patterns with Carbon Design System styling.\r\n *\r\n * ## Features\r\n * - Floating labels with configurable behavior\r\n * - Error message display with animations\r\n * - Helper text support\r\n * - Prefix and suffix support\r\n * - Outline appearance with Carbon Design System styling\r\n * - Full accessibility support\r\n * - Automatic integration with form controls\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Form Field\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Email</fui-label>\r\n * <input fuiInput type=\"email\" placeholder=\"Enter your email\">\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Error Messages\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Username</fui-label>\r\n * <input fuiInput formControlName=\"username\">\r\n * <fui-error key=\"required\">Username is required</fui-error>\r\n * <fui-error key=\"minlength\">Username must be at least 3 characters</fui-error>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Helper Text and Icons\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Password</fui-label>\r\n * <fui-icon fuiPrefix name=\"lock\"></fui-icon>\r\n * <input fuiInput type=\"password\">\r\n * <button fuiSuffix fuiButton variant=\"tertiary\" (click)=\"togglePasswordVisibility()\">\r\n * <fui-icon [name]=\"showPassword ? 'eye-slash' : 'eye'\"></fui-icon>\r\n * </button>\r\n * <fui-hint>Must be at least 8 characters</fui-hint>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';\r\n * import { FuiInputDirective } from '@raintonic/formaui/components/input';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiFormFieldComponent, FuiInputDirective, ReactiveFormsModule],\r\n * template: `\r\n * <form [formGroup]=\"form\">\r\n * <fui-form-field>\r\n * <fui-label>Email Address</fui-label>\r\n * <input fuiInput type=\"email\" formControlName=\"email\">\r\n * <fui-error key=\"required\">Email is required</fui-error>\r\n * <fui-error key=\"email\">Please enter a valid email</fui-error>\r\n * </fui-form-field>\r\n * </form>\r\n * `\r\n * })\r\n * export class MyFormComponent {\r\n * form = this.fb.group({\r\n * email: ['', [Validators.required, Validators.email]]\r\n * });\r\n *\r\n * get emailControl() {\r\n * return this.form.get('email');\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-form-field',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './form-field.component.html',\r\n styleUrls: ['./form-field.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-form-field',\r\n '[class.fui-form-field--disabled]': 'isDisabled()',\r\n '[class.fui-form-field--focused]': 'isFocused()',\r\n '[class.fui-form-field--error]': 'hasError()',\r\n '[class.fui-form-field--empty]': 'isEmpty()',\r\n '[class.fui-form-field--readonly]': 'readOnly()',\r\n '[class.fui-form-field--float]': 'appearance() === \"float\"',\r\n '[class.fui-form-field--fill]': 'appearance() === \"fill\"',\r\n '[class.fui-form-field--float-active]': 'shouldFloat()',\r\n role: 'group',\r\n '[attr.aria-labelledby]': 'labelId',\r\n '[attr.aria-disabled]': 'isDisabled() || null',\r\n },\r\n})\r\nexport class FuiFormFieldComponent {\r\n readonly intl = inject(FuiFormFieldIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n /**\r\n * Whether the form field is in read-only mode.\r\n * When true, hides the input and shows a plain text value instead.\r\n * @default false\r\n */\r\n readonly readOnly: InputSignal<boolean> = input(false);\r\n\r\n /**\r\n * Visual appearance variant.\r\n * - `'outline'` (default): bordered input with label above\r\n * - `'fill'`: filled background with bottom-border accent\r\n * - `'float'`: label floats from inside the input to above it on focus/value\r\n */\r\n readonly appearance = input<FormFieldAppearance>('outline');\r\n\r\n /**\r\n * Whether to hide the required marker\r\n * @default false\r\n */\r\n readonly hideRequiredMarker: InputSignal<boolean> = input(false);\r\n\r\n // Content children\r\n control = contentChild(FUI_FORM_FIELD_CONTROL);\r\n\r\n @ContentChildren(FuiPrefixDirective, { descendants: true }) _prefixes?: QueryList<FuiPrefixDirective>;\r\n @ContentChildren(FuiSuffixDirective, { descendants: true }) _suffixes?: QueryList<FuiSuffixDirective>;\r\n @ViewChild('connectionContainer', { static: true }) _connectionContainerRef?: ElementRef<HTMLElement>;\r\n\r\n hideSubscript = input(false);\r\n\r\n // Read-only display value derived from the control's value\r\n // For select/autocomplete controls, uses their displayValue signal to show the label\r\n readonly displayValue: Signal<string> = computed(() => {\r\n const control = this.control();\r\n if (!control) return '\\u2014';\r\n\r\n // Select and autocomplete controls expose a displayValue signal with the option label\r\n if (\r\n 'displayValue' in control &&\r\n typeof (control as unknown as Record<string, unknown>)['displayValue'] === 'function'\r\n ) {\r\n const label = ((control as unknown as Record<string, unknown>)['displayValue'] as () => string)();\r\n return label || '\\u2014';\r\n }\r\n\r\n const val = control.value();\r\n if (val == null || val === '') return '\\u2014';\r\n return String(val);\r\n });\r\n\r\n // State signals\r\n readonly isFocused: Signal<boolean> = computed(() => {\r\n return this.control()?.focused() ?? false;\r\n });\r\n readonly hasError: Signal<boolean> = computed(() => {\r\n return this.control()?.errorState() ?? false;\r\n });\r\n readonly isDisabled: Signal<boolean> = computed(() => {\r\n return this.control()?.disabled() ?? false;\r\n });\r\n readonly isEmpty: Signal<boolean> = computed(() => {\r\n return this.control()?.empty() ?? false;\r\n });\r\n readonly isRequired: Signal<boolean> = computed(() => {\r\n return this.control()?.required() ?? false;\r\n });\r\n\r\n /**\r\n * Whether the floating label should be in its \"floated\" (raised) position.\r\n * Only meaningful when `appearance === 'float'`. True when the field is\r\n * focused or contains a non-empty value.\r\n */\r\n readonly shouldFloat: Signal<boolean> = computed(() => {\r\n if (this.appearance() !== 'float') return false;\r\n return this.isFocused() || !this.isEmpty();\r\n });\r\n\r\n /** Whether control-specific icons (dropdown caret, calendar) should be hidden in readOnly mode */\r\n readonly hideControlIcons: Signal<boolean> = computed(() => {\r\n if (!this.readOnly()) return false;\r\n const ct = this.control()?.controlType;\r\n return ct === 'fui-select' || ct === 'fui-autocomplete' || ct === 'fui-date-picker';\r\n });\r\n\r\n /** Whether the \"copied\" feedback indicator is active */\r\n readonly copied: WritableSignal<boolean> = signal(false);\r\n private _copiedTimeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n // Generate unique IDs\r\n readonly labelId = `fui-form-field-label-${Math.random().toString(36).substring(2, 11)}`;\r\n readonly hintId = `fui-form-field-hint-${Math.random().toString(36).substring(2, 11)}`;\r\n readonly errorId = `fui-form-field-error-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n\r\n // Effect to update aria-describedby when state changes\r\n effect(() => {\r\n const control = this.control();\r\n if (control) {\r\n const ids: string[] = [];\r\n\r\n if (this.hasError()) {\r\n ids.push(this.errorId);\r\n } else {\r\n ids.push(this.hintId);\r\n }\r\n\r\n control.setDescribedByIds(ids);\r\n } else {\r\n // FuiFormField must contain an FuiFormFieldControl\r\n }\r\n });\r\n\r\n // Effect to propagate readOnly state to child controls\r\n effect(() => {\r\n const control = this.control();\r\n const ro = this.readOnly();\r\n if (control?.setReadOnly) {\r\n control.setReadOnly(ro);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Handles click on the form field container\r\n */\r\n onContainerClick(event: MouseEvent): void {\r\n const control = this.control();\r\n if (control && !this.isDisabled() && !this.readOnly()) {\r\n control.onContainerClick(event);\r\n }\r\n }\r\n\r\n /**\r\n * Copies the display value to the clipboard\r\n */\r\n copyValue(): void {\r\n const text = this.displayValue();\r\n if (!text || text === '\\u2014') return;\r\n\r\n void navigator.clipboard.writeText(text).then(() => {\r\n this.copied.set(true);\r\n if (this._copiedTimeout) clearTimeout(this._copiedTimeout);\r\n this._copiedTimeout = setTimeout(() => {\r\n this.copied.set(false);\r\n this._copiedTimeout = null;\r\n }, 1500);\r\n });\r\n }\r\n\r\n /**\r\n * Gets the current error messages\r\n */\r\n getErrorMessages(): string[] {\r\n // This would be populated by projected fui-error components\r\n // Implementation would query ContentChildren for error components\r\n return [];\r\n }\r\n\r\n /**\r\n * Checks if the form field contains a select control\r\n */\r\n hasSelectControl(): boolean {\r\n const control = this.control();\r\n if (!control) return false;\r\n\r\n // Check if it's the full fui-select component\r\n if (control.controlType === 'fui-select') {\r\n return true;\r\n }\r\n\r\n // Check if it's fuiInput directive on a select element\r\n if (\r\n control.controlType === 'fui-input' &&\r\n typeof (control as unknown as Record<string, unknown>)['isSelect'] === 'function'\r\n ) {\r\n return ((control as unknown as Record<string, unknown>)['isSelect'] as () => boolean)();\r\n }\r\n\r\n return false;\r\n }\r\n\r\n /**\r\n * Checks if the select control is a multiple select\r\n */\r\n isMultipleSelect(): boolean {\r\n if (!this.hasSelectControl()) {\r\n return false;\r\n }\r\n // Check if the control has a multiple property and it's true\r\n const ctrl = this.control() as unknown as Record<string, unknown> | undefined;\r\n return typeof ctrl?.['multiple'] === 'function' ? (ctrl['multiple'] as () => boolean)() : false;\r\n }\r\n\r\n /**\r\n * Whether there is projected prefix content\r\n */\r\n hasPrefix(): boolean {\r\n return (this._prefixes?.length ?? 0) > 0;\r\n }\r\n\r\n /**\r\n * Whether there is projected suffix content\r\n */\r\n hasSuffix(): boolean {\r\n return (this._suffixes?.length ?? 0) > 0;\r\n }\r\n}\r\n","<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper — always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) — hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button — visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n","import { Component, computed, inject, input, Signal } from '@angular/core';\r\nimport { FuiFormFieldComponent } from './form-field.component';\r\n\r\n/**\r\n * FuiErrorComponent\r\n *\r\n * Validation error message shown under the form field. Can automatically show/hide\r\n * based on a specific error key, or use with *ngIf for custom control logic.\r\n * The component provides proper accessibility roles and live region behavior.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Automatic error key handling -->\r\n * <fui-error key=\"required\">This field is required</fui-error>\r\n * <fui-error key=\"email\">Please enter a valid email</fui-error>\r\n *\r\n * <!-- Manual control (backward compatible) -->\r\n * <fui-error *ngIf=\"control.hasError('custom')\">Custom error</fui-error>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-error',\r\n standalone: true,\r\n template: ` <ng-content></ng-content> `,\r\n host: {\r\n class: 'fui-error',\r\n role: 'alert',\r\n 'aria-live': 'assertive',\r\n '[style.display]': '_shouldHide() ? \"none\" : null',\r\n },\r\n})\r\nexport class FuiErrorComponent {\r\n /**\r\n * Optional error key to match against form control errors.\r\n * When provided, the error will only show if the control has this specific error.\r\n * When not provided, the error will always show (backward compatible behavior).\r\n */\r\n readonly key = input<string>();\r\n\r\n private readonly _parent = inject(FuiFormFieldComponent, { host: true });\r\n\r\n /**\r\n * Computed signal to determine if this error should be hidden\r\n */\r\n protected readonly _shouldHide: Signal<boolean> = computed(() => {\r\n if (!this._parent.control()?.errorState()) {\r\n return true;\r\n }\r\n const errorKey = this.key();\r\n // If no key is provided, always show (backward compatible)\r\n if (!errorKey) {\r\n return false;\r\n }\r\n\r\n // If no form field control is available, show the error\r\n const formFieldControl = this._parent.control();\r\n if (!formFieldControl) {\r\n return false;\r\n }\r\n\r\n // Get the ngControl from the form field control\r\n const ngControl = formFieldControl.ngControl;\r\n if (!ngControl?.control) {\r\n return false;\r\n }\r\n\r\n // Hide if the control doesn't have this specific error\r\n return !ngControl.control.hasError(errorKey);\r\n });\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n/**\r\n * @component FuiHintComponent\r\n * @selector fui-hint\r\n * @description Helper text displayed below the form field input when there is no error.\r\n * Automatically hidden when the parent form field is in an error state.\r\n *\r\n * @example\r\n * <fui-form-field>\r\n * <fui-label>Email</fui-label>\r\n * <input fuiInput type=\"email\">\r\n * <fui-hint>We will never share your email</fui-hint>\r\n * </fui-form-field>\r\n */\r\n@Component({\r\n selector: 'fui-hint',\r\n standalone: true,\r\n template: ` <ng-content></ng-content> `,\r\n host: {\r\n class: 'fui-hint',\r\n },\r\n})\r\nexport class FuiHintComponent {}\r\n","import { Component } from '@angular/core';\r\n\r\n/**\r\n * @component FuiLabelComponent\r\n * @selector fui-label\r\n * @description Label element projected inside `fui-form-field` to provide an accessible\r\n * field label. Automatically linked to the form control via `aria-labelledby`.\r\n *\r\n * @example\r\n * <fui-form-field>\r\n * <fui-label>Email</fui-label>\r\n * <input fuiInput type=\"email\">\r\n * </fui-form-field>\r\n */\r\n@Component({\r\n selector: 'fui-label',\r\n standalone: true,\r\n template: ` <ng-content></ng-content> `,\r\n host: {\r\n class: 'fui-label',\r\n },\r\n})\r\nexport class FuiLabelComponent {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAEA;;;;;;;;;;;AAWG;MAQU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,YAAY;AACpB,qBAAA;AACF,iBAAA;;;AClBD;;;;;;;;;;;AAWG;MAQU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,YAAY;AACpB,qBAAA;AACF,iBAAA;;;AChBK,MAAO,gBAAiB,SAAQ,WAAW,CAAA;IAC/C,aAAa,GAAG,YAAY;IAC5B,eAAe,GAAG,QAAQ;uGAFf,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,cADH,MAAM,EAAA,CAAA;;2FACnB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACgClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EG;MAwBU,qBAAqB,CAAA;AACvB,IAAA,IAAI,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACvB,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEjD;;;;AAIG;AACM,IAAA,QAAQ,GAAyB,KAAK,CAAC,KAAK,+EAAC;AAEtD;;;;;AAKG;AACM,IAAA,UAAU,GAAG,KAAK,CAAsB,SAAS,iFAAC;AAE3D;;;AAGG;AACM,IAAA,kBAAkB,GAAyB,KAAK,CAAC,KAAK,yFAAC;;AAGhE,IAAA,OAAO,GAAG,YAAY,CAAC,sBAAsB,8EAAC;AAEc,IAAA,SAAS;AACT,IAAA,SAAS;AACjB,IAAA,uBAAuB;AAE3E,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,oFAAC;;;AAInB,IAAA,YAAY,GAAmB,QAAQ,CAAC,MAAK;AACpD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,QAAQ;;QAG7B,IACE,cAAc,IAAI,OAAO;AACzB,YAAA,OAAQ,OAA8C,CAAC,cAAc,CAAC,KAAK,UAAU,EACrF;AACA,YAAA,MAAM,KAAK,GAAK,OAA8C,CAAC,cAAc,CAAkB,EAAE;YACjG,OAAO,KAAK,IAAI,QAAQ;QAC1B;AAEA,QAAA,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,EAAE;AAC3B,QAAA,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,EAAE;AAAE,YAAA,OAAO,QAAQ;AAC9C,QAAA,OAAO,MAAM,CAAC,GAAG,CAAC;AACpB,IAAA,CAAC,mFAAC;;AAGO,IAAA,SAAS,GAAoB,QAAQ,CAAC,MAAK;QAClD,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,KAAK;AAC3C,IAAA,CAAC,gFAAC;AACO,IAAA,QAAQ,GAAoB,QAAQ,CAAC,MAAK;QACjD,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,KAAK;AAC9C,IAAA,CAAC,+EAAC;AACO,IAAA,UAAU,GAAoB,QAAQ,CAAC,MAAK;QACnD,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,KAAK;AAC5C,IAAA,CAAC,iFAAC;AACO,IAAA,OAAO,GAAoB,QAAQ,CAAC,MAAK;QAChD,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,KAAK;AACzC,IAAA,CAAC,8EAAC;AACO,IAAA,UAAU,GAAoB,QAAQ,CAAC,MAAK;QACnD,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,KAAK;AAC5C,IAAA,CAAC,iFAAC;AAEF;;;;AAIG;AACM,IAAA,WAAW,GAAoB,QAAQ,CAAC,MAAK;AACpD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,OAAO;AAAE,YAAA,OAAO,KAAK;QAC/C,OAAO,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AAC5C,IAAA,CAAC,kFAAC;;AAGO,IAAA,gBAAgB,GAAoB,QAAQ,CAAC,MAAK;AACzD,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,OAAO,KAAK;QAClC,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,WAAW;QACtC,OAAO,EAAE,KAAK,YAAY,IAAI,EAAE,KAAK,kBAAkB,IAAI,EAAE,KAAK,iBAAiB;AACrF,IAAA,CAAC,uFAAC;;AAGO,IAAA,MAAM,GAA4B,MAAM,CAAC,KAAK,6EAAC;IAChD,cAAc,GAAyC,IAAI;;AAG1D,IAAA,OAAO,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;AAC/E,IAAA,MAAM,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;AAC7E,IAAA,OAAO,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;AAExF,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,MAAK,EAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;;QAG3F,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;YAC9B,IAAI,OAAO,EAAE;gBACX,MAAM,GAAG,GAAa,EAAE;AAExB,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,oBAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;gBACxB;qBAAO;AACL,oBAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;gBACvB;AAEA,gBAAA,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC;YAChC;iBAAO;;YAEP;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC1B,YAAA,IAAI,OAAO,EAAE,WAAW,EAAE;AACxB,gBAAA,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;YACzB;AACF,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;AACH,IAAA,gBAAgB,CAAC,KAAiB,EAAA;AAChC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;AACrD,YAAA,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC;QACjC;IACF;AAEA;;AAEG;IACH,SAAS,GAAA;AACP,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;AAChC,QAAA,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,QAAQ;YAAE;AAEhC,QAAA,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAK;AACjD,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;YACrB,IAAI,IAAI,CAAC,cAAc;AAAE,gBAAA,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC;AAC1D,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,MAAK;AACpC,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;YAC5B,CAAC,EAAE,IAAI,CAAC;AACV,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;IACH,gBAAgB,GAAA;;;AAGd,QAAA,OAAO,EAAE;IACX;AAEA;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,KAAK;;AAG1B,QAAA,IAAI,OAAO,CAAC,WAAW,KAAK,YAAY,EAAE;AACxC,YAAA,OAAO,IAAI;QACb;;AAGA,QAAA,IACE,OAAO,CAAC,WAAW,KAAK,WAAW;AACnC,YAAA,OAAQ,OAA8C,CAAC,UAAU,CAAC,KAAK,UAAU,EACjF;AACA,YAAA,OAAS,OAA8C,CAAC,UAAU,CAAmB,EAAE;QACzF;AAEA,QAAA,OAAO,KAAK;IACd;AAEA;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE;AAC5B,YAAA,OAAO,KAAK;QACd;;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAoD;QAC7E,OAAO,OAAO,IAAI,GAAG,UAAU,CAAC,KAAK,UAAU,GAAI,IAAI,CAAC,UAAU,CAAmB,EAAE,GAAG,KAAK;IACjG;AAEA;;AAEG;IACH,SAAS,GAAA;QACP,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;IAC1C;AAEA;;AAEG;IACH,SAAS,GAAA;QACP,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;IAC1C;uGAnNW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gCAAA,EAAA,cAAA,EAAA,+BAAA,EAAA,aAAA,EAAA,6BAAA,EAAA,YAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,YAAA,EAAA,6BAAA,EAAA,4BAAA,EAAA,4BAAA,EAAA,2BAAA,EAAA,oCAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA0BT,sBAAsB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,EAE5B,kBAAkB,+DAClB,kBAAkB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrKrC,4gGA+EA,EAAA,MAAA,EAAA,CAAA,s8bAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDqCY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAoBf,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAvBjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,gBAAgB;AACvB,wBAAA,kCAAkC,EAAE,cAAc;AAClD,wBAAA,iCAAiC,EAAE,aAAa;AAChD,wBAAA,+BAA+B,EAAE,YAAY;AAC7C,wBAAA,+BAA+B,EAAE,WAAW;AAC5C,wBAAA,kCAAkC,EAAE,YAAY;AAChD,wBAAA,+BAA+B,EAAE,0BAA0B;AAC3D,wBAAA,8BAA8B,EAAE,yBAAyB;AACzD,wBAAA,sCAAsC,EAAE,eAAe;AACvD,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,wBAAwB,EAAE,SAAS;AACnC,wBAAA,sBAAsB,EAAE,sBAAsB;AAC/C,qBAAA,EAAA,QAAA,EAAA,4gGAAA,EAAA,MAAA,EAAA,CAAA,s8bAAA,CAAA,EAAA;8aA4BsB,sBAAsB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA;sBAE5C,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;;sBACzD,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;;sBACzD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,qBAAqB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;;AEnKpD;;;;;;;;;;;;;;;;AAgBG;MAYU,iBAAiB,CAAA;AAC5B;;;;AAIG;IACM,GAAG,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,KAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IAEb,OAAO,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAExE;;AAEG;AACgB,IAAA,WAAW,GAAoB,QAAQ,CAAC,MAAK;QAC9D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE;AACzC,YAAA,OAAO,IAAI;QACb;AACA,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;;QAE3B,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAO,KAAK;QACd;;QAGA,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;QAC/C,IAAI,CAAC,gBAAgB,EAAE;AACrB,YAAA,OAAO,KAAK;QACd;;AAGA,QAAA,MAAM,SAAS,GAAG,gBAAgB,CAAC,SAAS;AAC5C,QAAA,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE;AACvB,YAAA,OAAO,KAAK;QACd;;QAGA,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAC9C,IAAA,CAAC,kFAAC;uGArCS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,yWARlB,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAQ5B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,CAAA,2BAAA,CAA6B;AACvC,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,WAAW;AAClB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,WAAW,EAAE,WAAW;AACxB,wBAAA,iBAAiB,EAAE,+BAA+B;AACnD,qBAAA;AACF,iBAAA;;;AC5BD;;;;;;;;;;;;AAYG;MASU,gBAAgB,CAAA;uGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,0GALjB,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAK5B,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,CAAA,2BAAA,CAA6B;AACvC,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,UAAU;AAClB,qBAAA;AACF,iBAAA;;;ACpBD;;;;;;;;;;;AAWG;MASU,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4GALlB,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAK5B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,CAAA,2BAAA,CAA6B;AACvC,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,WAAW;AACnB,qBAAA;AACF,iBAAA;;;ACrBD;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-form-field.mjs","sources":["../../../lib/components/form-field/prefix.directive.ts","../../../lib/components/form-field/suffix.directive.ts","../../../lib/components/form-field/form-field.intl.ts","../../../lib/components/form-field/form-field-tokens.ts","../../../lib/components/form-field/form-field.component.ts","../../../lib/components/form-field/form-field.component.html","../../../lib/components/form-field/error.component.ts","../../../lib/components/form-field/hint.component.ts","../../../lib/components/form-field/label.component.ts","../../../lib/components/form-field/raintonic-formaui-components-form-field.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n/**\r\n * Prefix directive for content to be placed before the input in fui-form-field\r\n *\r\n * @example\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Price</fui-label>\r\n * <span fuiPrefix>$</span>\r\n * <input fuiInput type=\"number\">\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Directive({\r\n selector: '[fuiPrefix]',\r\n standalone: true,\r\n host: {\r\n class: 'fui-prefix',\r\n },\r\n})\r\nexport class FuiPrefixDirective {}\r\n","import { Directive } from '@angular/core';\r\n\r\n/**\r\n * Suffix directive for content to be placed after the input in fui-form-field\r\n *\r\n * @example\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Weight</fui-label>\r\n * <input fuiInput type=\"number\">\r\n * <span fuiSuffix>kg</span>\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Directive({\r\n selector: '[fuiSuffix]',\r\n standalone: true,\r\n host: {\r\n class: 'fui-suffix',\r\n },\r\n})\r\nexport class FuiSuffixDirective {}\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiFormFieldIntl extends FuiIntlBase {\r\n copyAriaLabel = 'Copy value';\r\n copiedAriaLabel = 'Copied';\r\n copyTooltip = 'Copy';\r\n copiedTooltip = 'Copied';\r\n}\r\n","import { InjectionToken } from '@angular/core';\r\nimport { ElementRef } from '@angular/core';\r\n\r\n/**\r\n * Interface exposed by FuiFormFieldComponent for child controls.\r\n *\r\n * Child controls (select, autocomplete, date-picker) inject this token to\r\n * access the form-field's overlay origin element — typically the wrapper\r\n * container whose width the overlay panel should match.\r\n */\r\nexport interface FuiFormFieldParent {\r\n /**\r\n * Returns the element that should be used as the width reference for\r\n * overlay panels (e.g. select dropdown, autocomplete panel).\r\n * This is typically the form-field wrapper element so the overlay\r\n * correctly spans prefix/suffix areas.\r\n */\r\n getConnectedOverlayOrigin(): ElementRef<HTMLElement>;\r\n}\r\n\r\n/**\r\n * Injection token for the parent form-field component.\r\n * Child controls inject this (via @Optional()) to coordinate with the\r\n * containing form-field without coupling to the component class directly.\r\n */\r\nexport const FUI_FORM_FIELD = new InjectionToken<FuiFormFieldParent>('FuiFormField');\r\n","import {\r\n booleanAttribute,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n computed,\r\n contentChild,\r\n ContentChildren,\r\n effect,\r\n ElementRef,\r\n forwardRef,\r\n inject,\r\n input,\r\n InputSignal,\r\n QueryList,\r\n Signal,\r\n signal,\r\n ViewChild,\r\n ViewEncapsulation,\r\n WritableSignal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiPrefixDirective } from './prefix.directive';\r\nimport { FuiSuffixDirective } from './suffix.directive';\r\nimport { FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';\r\nimport { FuiFormFieldIntl } from './form-field.intl';\r\nimport { FUI_STRENGTH_METER } from '@raintonic/formaui/core';\r\nimport { FUI_FORM_FIELD, FuiFormFieldParent } from './form-field-tokens';\r\n\r\n/**\r\n * Available form field appearance modes.\r\n * - `'outline'` — default bordered appearance (Carbon Design System style)\r\n * - `'fill'` — filled background with bottom-border only\r\n */\r\nexport type FormFieldAppearance = 'outline' | 'fill';\r\n\r\n/**\r\n * # FormField Component\r\n *\r\n * A form field wrapper component that provides consistent styling and behavior\r\n * for form controls. Follows Angular Material patterns with Carbon Design System styling.\r\n *\r\n * ## Features\r\n * - Floating labels with configurable behavior\r\n * - Error message display with animations\r\n * - Helper text support\r\n * - Prefix and suffix support\r\n * - Outline appearance with Carbon Design System styling\r\n * - Full accessibility support\r\n * - Automatic integration with form controls\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Form Field\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Email</fui-label>\r\n * <input fuiInput type=\"email\" placeholder=\"Enter your email\">\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Error Messages\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Username</fui-label>\r\n * <input fuiInput formControlName=\"username\">\r\n * <fui-error key=\"required\">Username is required</fui-error>\r\n * <fui-error key=\"minlength\">Username must be at least 3 characters</fui-error>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Helper Text and Icons\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Password</fui-label>\r\n * <fui-icon fuiPrefix name=\"lock\"></fui-icon>\r\n * <input fuiInput type=\"password\">\r\n * <button fuiSuffix fuiButton variant=\"tertiary\" (click)=\"togglePasswordVisibility()\">\r\n * <fui-icon [name]=\"showPassword ? 'eye-slash' : 'eye'\"></fui-icon>\r\n * </button>\r\n * <fui-hint>Must be at least 8 characters</fui-hint>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';\r\n * import { FuiInputDirective } from '@raintonic/formaui/components/input';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiFormFieldComponent, FuiInputDirective, ReactiveFormsModule],\r\n * template: `\r\n * <form [formGroup]=\"form\">\r\n * <fui-form-field>\r\n * <fui-label>Email Address</fui-label>\r\n * <input fuiInput type=\"email\" formControlName=\"email\">\r\n * <fui-error key=\"required\">Email is required</fui-error>\r\n * <fui-error key=\"email\">Please enter a valid email</fui-error>\r\n * </fui-form-field>\r\n * </form>\r\n * `\r\n * })\r\n * export class MyFormComponent {\r\n * form = this.fb.group({\r\n * email: ['', [Validators.required, Validators.email]]\r\n * });\r\n *\r\n * get emailControl() {\r\n * return this.form.get('email');\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-form-field',\r\n standalone: true,\r\n imports: [FuiIconComponent, FuiTooltipDirective],\r\n templateUrl: './form-field.component.html',\r\n styleUrls: ['./form-field.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n providers: [\r\n {\r\n provide: FUI_FORM_FIELD,\r\n useExisting: forwardRef(() => FuiFormFieldComponent),\r\n },\r\n ],\r\n host: {\r\n class: 'fui-form-field',\r\n '[class.fui-form-field--disabled]': 'isDisabled()',\r\n '[class.fui-form-field--focused]': 'isFocused()',\r\n '[class.fui-form-field--error]': 'hasError()',\r\n '[class.fui-form-field--empty]': 'isEmpty()',\r\n '[class.fui-form-field--readonly]': 'isReadonly()',\r\n '[class.fui-form-field--fill]': 'appearance() === \"fill\"',\r\n '[class.fui-form-field--number-input]': 'isNumberInput()',\r\n role: 'group',\r\n '[attr.aria-labelledby]': 'labelId',\r\n '[attr.aria-disabled]': 'isDisabled() || null',\r\n },\r\n})\r\nexport class FuiFormFieldComponent implements FuiFormFieldParent {\r\n readonly intl = inject(FuiFormFieldIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\r\n\r\n /**\r\n * Visual appearance variant.\r\n * - `'outline'` (default): bordered input with label above\r\n * - `'fill'`: filled background with bottom-border accent\r\n */\r\n readonly appearance = input<FormFieldAppearance>('outline');\r\n\r\n /**\r\n * Whether to hide the required marker\r\n * @default false\r\n */\r\n readonly hideRequiredMarker: InputSignal<boolean> = input(false);\r\n\r\n // Content children\r\n control = contentChild(FUI_FORM_FIELD_CONTROL);\r\n\r\n @ContentChildren(FuiPrefixDirective, { descendants: true }) _prefixes?: QueryList<FuiPrefixDirective>;\r\n @ContentChildren(FuiSuffixDirective, { descendants: true }) _suffixes?: QueryList<FuiSuffixDirective>;\r\n @ViewChild('connectionContainer', { static: true }) _connectionContainerRef?: ElementRef<HTMLElement>;\r\n @ViewChild('wrapper', { static: true }) private readonly _wrapperRef?: ElementRef<HTMLElement>;\r\n\r\n hideSubscript = input(false, { transform: booleanAttribute });\r\n\r\n // Strength meter content child — used to determine whether hints should be suppressed\r\n readonly strengthMeter = contentChild(FUI_STRENGTH_METER);\r\n\r\n // Read-only display value derived from the control's value\r\n // For select/autocomplete controls, uses their displayValue signal to show the label\r\n readonly displayValue: Signal<string> = computed(() => {\r\n const control = this.control();\r\n if (!control) return '\\u2014';\r\n\r\n // Select and autocomplete controls expose a displayValue signal with the option label\r\n if (\r\n 'displayValue' in control &&\r\n typeof (control as unknown as Record<string, unknown>)['displayValue'] === 'function'\r\n ) {\r\n const label = ((control as unknown as Record<string, unknown>)['displayValue'] as () => string)();\r\n return label || '\\u2014';\r\n }\r\n\r\n const val = control.value();\r\n if (val == null || val === '') return '\\u2014';\r\n return String(val);\r\n });\r\n\r\n // State signals\r\n readonly isFocused: Signal<boolean> = computed(() => {\r\n return this.control()?.focused() ?? false;\r\n });\r\n readonly hasError: Signal<boolean> = computed(() => {\r\n return this.control()?.errorState() ?? false;\r\n });\r\n readonly isDisabled: Signal<boolean> = computed(() => {\r\n return this.control()?.disabled() ?? false;\r\n });\r\n readonly isReadonly: Signal<boolean> = computed(() => {\r\n return this.control()?.readonly() ?? false;\r\n });\r\n readonly isEmpty: Signal<boolean> = computed(() => {\r\n return this.control()?.empty() ?? false;\r\n });\r\n readonly isRequired: Signal<boolean> = computed(() => {\r\n return this.control()?.required() ?? false;\r\n });\r\n\r\n /** Whether the projected control is a fui-number-input (needs zero horizontal padding) */\r\n readonly isNumberInput: Signal<boolean> = computed(() => {\r\n return this.control()?.controlType === 'fui-number-input';\r\n });\r\n\r\n /** Whether control-specific icons (dropdown caret, calendar) should be hidden in readOnly mode */\r\n readonly hideControlIcons: Signal<boolean> = computed(() => {\r\n if (!this.isReadonly()) return false;\r\n const ct = this.control()?.controlType;\r\n return ct === 'fui-select' || ct === 'fui-autocomplete' || ct === 'fui-date-picker';\r\n });\r\n\r\n /** Whether the copy button should appear in read-only mode.\r\n * Delegates to the control's `readonlyCopyEnabled()` method.\r\n * Only plain inputs (`fuiInput`) opt in — defaults to `false`. */\r\n readonly showCopyButton: Signal<boolean> = computed(() => {\r\n const control = this.control();\r\n return this.isReadonly() && (control?.readonlyCopyEnabled?.() ?? false);\r\n });\r\n\r\n /** Whether the \"copied\" feedback indicator is active */\r\n readonly copied: WritableSignal<boolean> = signal(false);\r\n private _copiedTimeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n // Generate unique IDs\r\n readonly labelId = `fui-form-field-label-${Math.random().toString(36).substring(2, 11)}`;\r\n readonly hintId = `fui-form-field-hint-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n /** Whether the strength meter should be shown. Visible only when the control\r\n * has a non-empty value (i.e. the user has typed something). */\r\n readonly showStrengthMeter: Signal<boolean> = computed(() => {\r\n const ctrl = this.control();\r\n if (!ctrl) return false;\r\n return !ctrl.empty() && !!this.strengthMeter();\r\n });\r\n\r\n readonly errorId = `fui-form-field-error-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._cdr.markForCheck();\r\n });\r\n\r\n // Effect to update aria-describedby when state changes\r\n effect(() => {\r\n const control = this.control();\r\n if (!control) {\r\n return;\r\n }\r\n const ids: string[] = [];\r\n if (this.hasError()) {\r\n ids.push(this.errorId);\r\n } else {\r\n ids.push(this.hintId);\r\n }\r\n\r\n control.setDescribedByIds(ids);\r\n });\r\n }\r\n\r\n /**\r\n * Returns the element that overlay panels (select, autocomplete, date-picker)\r\n * should use as their width reference. This is the form-field wrapper which\r\n * spans the full width including prefix/suffix areas.\r\n */\r\n getConnectedOverlayOrigin(): ElementRef<HTMLElement> {\r\n return this._wrapperRef ?? this._connectionContainerRef ?? this._elementRef;\r\n }\r\n\r\n /**\r\n * Handles click on the form field container\r\n */\r\n onContainerClick(event: MouseEvent): void {\r\n const control = this.control();\r\n if (control && !this.isDisabled() && !this.isReadonly()) {\r\n control.onContainerClick(event);\r\n }\r\n }\r\n\r\n /**\r\n * Copies the display value to the clipboard\r\n */\r\n copyValue(): void {\r\n const text = this.displayValue();\r\n if (!text || text === '\\u2014') return;\r\n\r\n void navigator.clipboard.writeText(text).then(() => {\r\n this.copied.set(true);\r\n if (this._copiedTimeout) clearTimeout(this._copiedTimeout);\r\n this._copiedTimeout = setTimeout(() => {\r\n this.copied.set(false);\r\n this._copiedTimeout = null;\r\n }, 1500);\r\n });\r\n }\r\n\r\n /**\r\n * Gets the current error messages\r\n */\r\n getErrorMessages(): string[] {\r\n // This would be populated by projected fui-error components\r\n // Implementation would query ContentChildren for error components\r\n return [];\r\n }\r\n\r\n /**\r\n * Checks if the form field contains a select control\r\n */\r\n hasSelectControl(): boolean {\r\n const control = this.control();\r\n if (!control) return false;\r\n\r\n // Check if it's the full fui-select component\r\n if (control.controlType === 'fui-select') {\r\n return true;\r\n }\r\n\r\n // Check if it's fuiInput directive on a select element\r\n if (\r\n control.controlType === 'fui-input' &&\r\n typeof (control as unknown as Record<string, unknown>)['isSelect'] === 'function'\r\n ) {\r\n return ((control as unknown as Record<string, unknown>)['isSelect'] as () => boolean)();\r\n }\r\n\r\n return false;\r\n }\r\n\r\n /**\r\n * Checks if the select control is a multiple select\r\n */\r\n isMultipleSelect(): boolean {\r\n if (!this.hasSelectControl()) {\r\n return false;\r\n }\r\n // Check if the control has a multiple property and it's true\r\n const ctrl = this.control() as unknown as Record<string, unknown> | undefined;\r\n return typeof ctrl?.['multiple'] === 'function' ? (ctrl['multiple'] as () => boolean)() : false;\r\n }\r\n\r\n /**\r\n * Whether there is projected prefix content\r\n */\r\n hasPrefix(): boolean {\r\n return (this._prefixes?.length ?? 0) > 0;\r\n }\r\n\r\n /**\r\n * Whether there is projected suffix content\r\n */\r\n hasSuffix(): boolean {\r\n return (this._suffixes?.length ?? 0) > 0;\r\n }\r\n}\r\n","<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !isReadonly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper — always visible, styled as read-only when applicable -->\r\n <div\r\n #wrapper\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || showCopyButton()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n <!-- Copy button — visible only in readOnly on hover -->\r\n @if (showCopyButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n fuiTooltipPosition=\"top\"\r\n fuiTooltipSize=\"sm\"\r\n [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n fuiTooltipTrigger=\"manual\"\r\n [fuiTooltipShow]=\"copied()\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n <!-- The strength meter and the error are exclusive -->\r\n @if (hasError() && !showStrengthMeter()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (showStrengthMeter()) {\r\n <ng-content select=\"fui-strength-meter\"></ng-content>\r\n }\r\n</div>\r\n","import { Component, computed, inject, input, Signal } from '@angular/core';\r\nimport { FuiFormFieldComponent } from './form-field.component';\r\n\r\n/**\r\n * FuiErrorComponent\r\n *\r\n * Validation error message shown under the form field. Can automatically show/hide\r\n * based on a specific error key, or use with *ngIf for custom control logic.\r\n * The component provides proper accessibility roles and live region behavior.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Automatic error key handling -->\r\n * <fui-error key=\"required\">This field is required</fui-error>\r\n * <fui-error key=\"email\">Please enter a valid email</fui-error>\r\n *\r\n * <!-- Manual control (backward compatible) -->\r\n * <fui-error *ngIf=\"control.hasError('custom')\">Custom error</fui-error>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-error',\r\n standalone: true,\r\n template: ` <ng-content></ng-content> `,\r\n host: {\r\n class: 'fui-error',\r\n role: 'alert',\r\n 'aria-live': 'assertive',\r\n '[style.display]': '_shouldHide() ? \"none\" : null',\r\n },\r\n})\r\nexport class FuiErrorComponent {\r\n /**\r\n * Optional error key to match against form control errors.\r\n * When provided, the error will only show if the control has this specific error.\r\n * When not provided, the error will always show (backward compatible behavior).\r\n */\r\n readonly key = input<string>();\r\n\r\n private readonly _parent = inject(FuiFormFieldComponent, { host: true });\r\n\r\n /**\r\n * Computed signal to determine if this error should be hidden\r\n */\r\n protected readonly _shouldHide: Signal<boolean> = computed(() => {\r\n if (!this._parent.control()?.errorState()) {\r\n return true;\r\n }\r\n const errorKey = this.key();\r\n // If no key is provided, always show (backward compatible)\r\n if (!errorKey) {\r\n return false;\r\n }\r\n\r\n // If no form field control is available, show the error\r\n const formFieldControl = this._parent.control();\r\n if (!formFieldControl) {\r\n return false;\r\n }\r\n\r\n // Get the ngControl from the form field control\r\n const ngControl = formFieldControl.ngControl;\r\n if (!ngControl?.control) {\r\n return false;\r\n }\r\n\r\n // Hide if the control doesn't have this specific error\r\n return !ngControl.control.hasError(errorKey);\r\n });\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n/**\r\n * @component FuiHintComponent\r\n * @selector fui-hint\r\n * @description Helper text displayed below the form field input when there is no error.\r\n * Automatically hidden when the parent form field is in an error state.\r\n *\r\n * @example\r\n * <fui-form-field>\r\n * <fui-label>Email</fui-label>\r\n * <input fuiInput type=\"email\">\r\n * <fui-hint>We will never share your email</fui-hint>\r\n * </fui-form-field>\r\n */\r\n@Component({\r\n selector: 'fui-hint',\r\n standalone: true,\r\n template: ` <ng-content></ng-content> `,\r\n host: {\r\n class: 'fui-hint',\r\n },\r\n})\r\nexport class FuiHintComponent {}\r\n","import { Component } from '@angular/core';\r\n\r\n/**\r\n * @component FuiLabelComponent\r\n * @selector fui-label\r\n * @description Label element projected inside `fui-form-field` to provide an accessible\r\n * field label. Automatically linked to the form control via `aria-labelledby`.\r\n *\r\n * @example\r\n * <fui-form-field>\r\n * <fui-label>Email</fui-label>\r\n * <input fuiInput type=\"email\">\r\n * </fui-form-field>\r\n */\r\n@Component({\r\n selector: 'fui-label',\r\n standalone: true,\r\n template: ` <ng-content></ng-content> `,\r\n host: {\r\n class: 'fui-label',\r\n },\r\n})\r\nexport class FuiLabelComponent {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|