@ng-forge/dynamic-forms-material 0.1.0
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.
|
@@ -0,0 +1,701 @@
|
|
|
1
|
+
import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
|
|
2
|
+
import { CheckboxField, DynamicText, CheckedFieldComponent, ValidationMessages, DatepickerField, DatepickerProps, ValueFieldComponent, InputField, InputProps, MultiCheckboxField, ValueType, FieldOption, RadioField, SelectField, SelectProps, SliderField, FormEvent, ButtonField, FieldDef, LogicConfig, FieldComponent, FormEventConstructor, EventArgs, ArrayItemContext, TextareaField, TextareaProps, ToggleField, FieldTypeDefinition } from '@ng-forge/dynamic-forms';
|
|
3
|
+
import * as _angular_core from '@angular/core';
|
|
4
|
+
import { InjectionToken, Provider } from '@angular/core';
|
|
5
|
+
import { FieldTree } from '@angular/forms/signals';
|
|
6
|
+
import { ThemePalette } from '@angular/material/core';
|
|
7
|
+
import * as _angular_material_form_field from '@angular/material/form-field';
|
|
8
|
+
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
|
|
9
|
+
|
|
10
|
+
interface MatCheckboxProps {
|
|
11
|
+
color?: ThemePalette;
|
|
12
|
+
disableRipple?: boolean;
|
|
13
|
+
labelPosition?: 'before' | 'after';
|
|
14
|
+
hint?: DynamicText;
|
|
15
|
+
indeterminate?: boolean;
|
|
16
|
+
}
|
|
17
|
+
type MatCheckboxField = CheckboxField<MatCheckboxProps>;
|
|
18
|
+
type MatCheckboxComponent = CheckedFieldComponent<MatCheckboxField>;
|
|
19
|
+
|
|
20
|
+
declare class MatCheckboxFieldComponent implements MatCheckboxComponent {
|
|
21
|
+
private materialConfig;
|
|
22
|
+
readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
|
|
23
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
24
|
+
/**
|
|
25
|
+
* Host element reference for DOM queries.
|
|
26
|
+
* Used to find the internal checkbox input for accessibility workarounds.
|
|
27
|
+
*/
|
|
28
|
+
private readonly hostEl;
|
|
29
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
30
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
31
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
32
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
33
|
+
readonly props: _angular_core.InputSignal<MatCheckboxProps | undefined>;
|
|
34
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
35
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
36
|
+
readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
|
|
37
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
38
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
39
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
40
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
41
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
42
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
43
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
44
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
45
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
46
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
47
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
48
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
49
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string>;
|
|
50
|
+
/**
|
|
51
|
+
* Workaround: Angular Material's MatCheckbox does NOT set aria-required on its internal
|
|
52
|
+
* input element when [required] is passed, even though it sets the native required attribute.
|
|
53
|
+
* This effect imperatively sets/removes aria-required on the internal input.
|
|
54
|
+
*
|
|
55
|
+
* Bug: MatCheckbox sets `required` attribute but not `aria-required` for screen readers.
|
|
56
|
+
* @see https://github.com/angular/components/issues/XXXXX (TODO: file issue)
|
|
57
|
+
*/
|
|
58
|
+
private readonly syncAriaRequiredToDom;
|
|
59
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatCheckboxFieldComponent, never>;
|
|
60
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatCheckboxFieldComponent, "df-mat-checkbox", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
interface MatDatepickerProps extends DatepickerProps {
|
|
64
|
+
appearance?: MatFormFieldAppearance;
|
|
65
|
+
color?: 'primary' | 'accent' | 'warn';
|
|
66
|
+
disableRipple?: boolean;
|
|
67
|
+
subscriptSizing?: SubscriptSizing;
|
|
68
|
+
startView?: 'month' | 'year' | 'multi-year';
|
|
69
|
+
touchUi?: boolean;
|
|
70
|
+
hint?: DynamicText;
|
|
71
|
+
}
|
|
72
|
+
type MatDatepickerField = DatepickerField<MatDatepickerProps>;
|
|
73
|
+
type MatDatepickerComponent = ValueFieldComponent<MatDatepickerField>;
|
|
74
|
+
|
|
75
|
+
declare class MatDatepickerFieldComponent implements MatDatepickerComponent {
|
|
76
|
+
private materialConfig;
|
|
77
|
+
readonly field: _angular_core.InputSignal<FieldTree<string>>;
|
|
78
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
79
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
80
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
81
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
82
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
83
|
+
readonly minDate: _angular_core.InputSignal<Date | null>;
|
|
84
|
+
readonly maxDate: _angular_core.InputSignal<Date | null>;
|
|
85
|
+
readonly startAt: _angular_core.InputSignal<Date | null>;
|
|
86
|
+
readonly props: _angular_core.InputSignal<MatDatepickerProps | undefined>;
|
|
87
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
88
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
89
|
+
readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
|
|
90
|
+
readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
|
|
91
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
92
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
93
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
94
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
95
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
96
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
97
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
98
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
99
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
100
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
101
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
102
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
103
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
104
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatDatepickerFieldComponent, never>;
|
|
105
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatDatepickerFieldComponent, "df-mat-datepicker", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
interface MatInputProps extends InputProps {
|
|
109
|
+
appearance?: MatFormFieldAppearance;
|
|
110
|
+
disableRipple?: boolean;
|
|
111
|
+
subscriptSizing?: SubscriptSizing;
|
|
112
|
+
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
|
|
113
|
+
hint?: DynamicText;
|
|
114
|
+
}
|
|
115
|
+
type MatInputField = InputField<MatInputProps>;
|
|
116
|
+
type MatInputComponent = ValueFieldComponent<MatInputField>;
|
|
117
|
+
|
|
118
|
+
declare class MatInputFieldComponent implements MatInputComponent {
|
|
119
|
+
private materialConfig;
|
|
120
|
+
readonly field: _angular_core.InputSignal<FieldTree<string>>;
|
|
121
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
122
|
+
/**
|
|
123
|
+
* Reference to the native input element.
|
|
124
|
+
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
125
|
+
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
126
|
+
*/
|
|
127
|
+
private readonly inputRef;
|
|
128
|
+
/**
|
|
129
|
+
* Computed signal that extracts the readonly state from the field.
|
|
130
|
+
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
131
|
+
*/
|
|
132
|
+
private readonly isReadonly;
|
|
133
|
+
/**
|
|
134
|
+
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
135
|
+
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
136
|
+
* This effect imperatively sets/removes the readonly attribute on the native input
|
|
137
|
+
* element whenever the readonly state changes.
|
|
138
|
+
*
|
|
139
|
+
* Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
|
|
140
|
+
* NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
|
|
141
|
+
*
|
|
142
|
+
* @see https://github.com/angular/angular/issues/65897
|
|
143
|
+
*/
|
|
144
|
+
private readonly syncReadonlyToDom;
|
|
145
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
146
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
147
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
148
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
149
|
+
readonly props: _angular_core.InputSignal<MatInputProps | undefined>;
|
|
150
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
151
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
152
|
+
readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
|
|
153
|
+
readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
|
|
154
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
155
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
156
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
157
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
158
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
159
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
160
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
161
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
162
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
163
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
164
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
165
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
166
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
167
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatInputFieldComponent, never>;
|
|
168
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatInputFieldComponent, "df-mat-input", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
interface MatMultiCheckboxProps {
|
|
172
|
+
disableRipple?: boolean;
|
|
173
|
+
tabIndex?: number;
|
|
174
|
+
hint?: DynamicText;
|
|
175
|
+
labelPosition?: 'before' | 'after';
|
|
176
|
+
color?: ThemePalette;
|
|
177
|
+
}
|
|
178
|
+
type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
|
|
179
|
+
type MatMultiCheckboxComponent<T> = ValueFieldComponent<MatMultiCheckboxField<T>>;
|
|
180
|
+
|
|
181
|
+
declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements MatMultiCheckboxComponent<T> {
|
|
182
|
+
readonly field: _angular_core.InputSignal<FieldTree<T[]>>;
|
|
183
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
184
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
185
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
186
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
187
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
188
|
+
readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
|
|
189
|
+
readonly props: _angular_core.InputSignal<MatMultiCheckboxProps | undefined>;
|
|
190
|
+
valueViewModel: _angular_core.WritableSignal<FieldOption<T>[]>;
|
|
191
|
+
constructor();
|
|
192
|
+
onCheckboxChange(option: FieldOption<T>, checked: boolean): void;
|
|
193
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
194
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
195
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
196
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
197
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
198
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
199
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
200
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
201
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
202
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
203
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
204
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
205
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
206
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
207
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
208
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatMultiCheckboxFieldComponent<any>, never>;
|
|
209
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatMultiCheckboxFieldComponent<any>, "df-mat-multi-checkbox", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
interface MatRadioProps {
|
|
213
|
+
disableRipple?: boolean;
|
|
214
|
+
color?: ThemePalette;
|
|
215
|
+
labelPosition?: 'before' | 'after';
|
|
216
|
+
hint?: DynamicText;
|
|
217
|
+
}
|
|
218
|
+
type MatRadioField<T> = RadioField<T, MatRadioProps>;
|
|
219
|
+
type MatRadioComponent<T> = ValueFieldComponent<MatRadioField<T>>;
|
|
220
|
+
|
|
221
|
+
declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
|
|
222
|
+
readonly field: _angular_core.InputSignal<FieldTree<T>>;
|
|
223
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
224
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
225
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
226
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
227
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
228
|
+
readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
|
|
229
|
+
readonly props: _angular_core.InputSignal<MatRadioProps | undefined>;
|
|
230
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
231
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
232
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
233
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
234
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
235
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
236
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
237
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
238
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
239
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
240
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
241
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
242
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
243
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
244
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
245
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatRadioFieldComponent<any>, never>;
|
|
246
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatRadioFieldComponent<any>, "df-mat-radio", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
interface MatSelectProps<T> extends SelectProps {
|
|
250
|
+
appearance?: MatFormFieldAppearance;
|
|
251
|
+
multiple?: boolean;
|
|
252
|
+
panelMaxHeight?: string;
|
|
253
|
+
subscriptSizing?: SubscriptSizing;
|
|
254
|
+
compareWith?: (o1: T, o2: T) => boolean;
|
|
255
|
+
hint?: DynamicText;
|
|
256
|
+
}
|
|
257
|
+
type MatSelectField<T> = SelectField<T, MatSelectProps<T>>;
|
|
258
|
+
type MatSelectComponent<T> = ValueFieldComponent<MatSelectField<T>>;
|
|
259
|
+
|
|
260
|
+
declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
|
|
261
|
+
private materialConfig;
|
|
262
|
+
readonly field: _angular_core.InputSignal<FieldTree<T>>;
|
|
263
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
264
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
265
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
266
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
267
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
268
|
+
readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
|
|
269
|
+
readonly props: _angular_core.InputSignal<MatSelectProps<T> | undefined>;
|
|
270
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
271
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
272
|
+
readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
|
|
273
|
+
readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
|
|
274
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
275
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
276
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
277
|
+
defaultCompare: (value1: any, value2: any) => boolean;
|
|
278
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
279
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
280
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
281
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
282
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
283
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
284
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
285
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
286
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
287
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
288
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent<any>, never>;
|
|
289
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent<any>, "df-mat-select", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
interface MatSliderProps {
|
|
293
|
+
hint?: DynamicText;
|
|
294
|
+
color?: 'primary' | 'accent' | 'warn';
|
|
295
|
+
appearance?: MatFormFieldAppearance;
|
|
296
|
+
thumbLabel?: boolean;
|
|
297
|
+
showThumbLabel?: boolean;
|
|
298
|
+
tickInterval?: number | 'auto';
|
|
299
|
+
step?: number;
|
|
300
|
+
}
|
|
301
|
+
type MatSliderField = SliderField<MatSliderProps>;
|
|
302
|
+
type MatSliderComponent = ValueFieldComponent<MatSliderField>;
|
|
303
|
+
|
|
304
|
+
declare class MatSliderFieldComponent implements MatSliderComponent {
|
|
305
|
+
readonly field: _angular_core.InputSignal<FieldTree<string>>;
|
|
306
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
307
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
308
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
309
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
310
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
311
|
+
readonly props: _angular_core.InputSignal<MatSliderProps | undefined>;
|
|
312
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
313
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
314
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
315
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
316
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
317
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
318
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
319
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
320
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
321
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
322
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
323
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
324
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
325
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSliderFieldComponent, never>;
|
|
326
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSliderFieldComponent, "df-mat-slider", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
interface MatButtonProps {
|
|
330
|
+
color?: 'primary' | 'accent' | 'warn';
|
|
331
|
+
type?: 'button' | 'submit' | 'reset';
|
|
332
|
+
}
|
|
333
|
+
type MatButtonField<TEvent extends FormEvent> = ButtonField<MatButtonProps, TEvent>;
|
|
334
|
+
type MatButtonComponent<TEvent extends FormEvent> = FieldComponent<MatButtonField<TEvent>>;
|
|
335
|
+
/**
|
|
336
|
+
* Specific button field types with preconfigured events
|
|
337
|
+
*/
|
|
338
|
+
/** Submit button field - automatically disabled when form is invalid */
|
|
339
|
+
interface MatSubmitButtonField extends Omit<FieldDef<MatButtonProps>, 'event'> {
|
|
340
|
+
type: 'submit';
|
|
341
|
+
key: string;
|
|
342
|
+
label: string;
|
|
343
|
+
disabled?: boolean;
|
|
344
|
+
className?: string;
|
|
345
|
+
props?: MatButtonProps;
|
|
346
|
+
/** Logic rules for dynamic disabled state (overrides form-level defaults) */
|
|
347
|
+
logic?: LogicConfig[];
|
|
348
|
+
}
|
|
349
|
+
/** Next page button field - with preconfigured NextPageEvent */
|
|
350
|
+
interface MatNextButtonField extends Omit<FieldDef<MatButtonProps>, 'event'> {
|
|
351
|
+
type: 'next';
|
|
352
|
+
key: string;
|
|
353
|
+
label: string;
|
|
354
|
+
disabled?: boolean;
|
|
355
|
+
className?: string;
|
|
356
|
+
props?: MatButtonProps;
|
|
357
|
+
/** Logic rules for dynamic disabled state (overrides form-level defaults) */
|
|
358
|
+
logic?: LogicConfig[];
|
|
359
|
+
}
|
|
360
|
+
/** Previous page button field - with preconfigured PreviousPageEvent */
|
|
361
|
+
interface MatPreviousButtonField extends Omit<FieldDef<MatButtonProps>, 'event'> {
|
|
362
|
+
type: 'previous';
|
|
363
|
+
key: string;
|
|
364
|
+
label: string;
|
|
365
|
+
disabled?: boolean;
|
|
366
|
+
className?: string;
|
|
367
|
+
props?: MatButtonProps;
|
|
368
|
+
}
|
|
369
|
+
/** Add array item button field - with preconfigured AddArrayItemEvent */
|
|
370
|
+
interface AddArrayItemButtonField extends Omit<FieldDef<MatButtonProps>, 'event'> {
|
|
371
|
+
type: 'addArrayItem';
|
|
372
|
+
key: string;
|
|
373
|
+
label: string;
|
|
374
|
+
disabled?: boolean;
|
|
375
|
+
className?: string;
|
|
376
|
+
props?: MatButtonProps;
|
|
377
|
+
/**
|
|
378
|
+
* The key of the array field to add items to.
|
|
379
|
+
* Required when the button is placed outside the array.
|
|
380
|
+
* When inside an array, this is automatically determined from context.
|
|
381
|
+
*/
|
|
382
|
+
arrayKey?: string;
|
|
383
|
+
}
|
|
384
|
+
/** Remove array item button field - with preconfigured RemoveArrayItemEvent */
|
|
385
|
+
interface RemoveArrayItemButtonField extends Omit<FieldDef<MatButtonProps>, 'event'> {
|
|
386
|
+
type: 'removeArrayItem';
|
|
387
|
+
key: string;
|
|
388
|
+
label: string;
|
|
389
|
+
disabled?: boolean;
|
|
390
|
+
className?: string;
|
|
391
|
+
props?: MatButtonProps;
|
|
392
|
+
/**
|
|
393
|
+
* The key of the array field to remove items from.
|
|
394
|
+
* Required when the button is placed outside the array.
|
|
395
|
+
* When inside an array, this is automatically determined from context.
|
|
396
|
+
*/
|
|
397
|
+
arrayKey?: string;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
declare class MatButtonFieldComponent<TEvent extends FormEvent> implements MatButtonComponent<TEvent> {
|
|
401
|
+
private readonly eventBus;
|
|
402
|
+
private readonly arrayContext;
|
|
403
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
404
|
+
readonly label: _angular_core.InputSignal<DynamicText>;
|
|
405
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
406
|
+
readonly hidden: _angular_core.InputSignal<boolean>;
|
|
407
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
408
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
409
|
+
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
410
|
+
readonly event: _angular_core.InputSignal<FormEventConstructor<TEvent> | undefined>;
|
|
411
|
+
readonly eventArgs: _angular_core.InputSignal<EventArgs | undefined>;
|
|
412
|
+
readonly props: _angular_core.InputSignal<MatButtonProps | undefined>;
|
|
413
|
+
readonly eventContext: _angular_core.InputSignal<ArrayItemContext | undefined>;
|
|
414
|
+
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
415
|
+
readonly buttonType: _angular_core.Signal<"submit" | "button" | "reset">;
|
|
416
|
+
readonly buttonTestId: _angular_core.Signal<string>;
|
|
417
|
+
/**
|
|
418
|
+
* Handle button click.
|
|
419
|
+
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
420
|
+
* - For other buttons: dispatch the configured event via EventBus
|
|
421
|
+
*/
|
|
422
|
+
onClick(): void;
|
|
423
|
+
private dispatchEvent;
|
|
424
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatButtonFieldComponent<any>, never>;
|
|
425
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatButtonFieldComponent<any>, "df-mat-button", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "event": { "alias": "event"; "required": false; "isSignal": true; }; "eventArgs": { "alias": "eventArgs"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "eventContext": { "alias": "eventContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
interface MatTextareaProps extends TextareaProps {
|
|
429
|
+
hint?: DynamicText;
|
|
430
|
+
appearance?: MatFormFieldAppearance;
|
|
431
|
+
subscriptSizing?: SubscriptSizing;
|
|
432
|
+
rows?: number;
|
|
433
|
+
cols?: number;
|
|
434
|
+
resize?: 'none' | 'both' | 'horizontal' | 'vertical';
|
|
435
|
+
maxLength?: number;
|
|
436
|
+
}
|
|
437
|
+
type MatTextareaField = TextareaField<MatTextareaProps>;
|
|
438
|
+
type MatTextareaComponent = ValueFieldComponent<MatTextareaField>;
|
|
439
|
+
|
|
440
|
+
declare class MatTextareaFieldComponent implements MatTextareaComponent {
|
|
441
|
+
private materialConfig;
|
|
442
|
+
readonly field: _angular_core.InputSignal<FieldTree<string>>;
|
|
443
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
444
|
+
/**
|
|
445
|
+
* Reference to the native textarea element.
|
|
446
|
+
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
447
|
+
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
448
|
+
*/
|
|
449
|
+
private readonly textareaRef;
|
|
450
|
+
/**
|
|
451
|
+
* Computed signal that extracts the readonly state from the field.
|
|
452
|
+
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
453
|
+
*/
|
|
454
|
+
private readonly isReadonly;
|
|
455
|
+
/**
|
|
456
|
+
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
457
|
+
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
458
|
+
* This effect imperatively sets/removes the readonly attribute on the native textarea
|
|
459
|
+
* element whenever the readonly state changes.
|
|
460
|
+
*
|
|
461
|
+
* Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
|
|
462
|
+
* NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
|
|
463
|
+
*
|
|
464
|
+
* @see https://github.com/angular/angular/issues/65897
|
|
465
|
+
*/
|
|
466
|
+
private readonly syncReadonlyToDom;
|
|
467
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
468
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
469
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
470
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
471
|
+
readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
|
|
472
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
473
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
474
|
+
readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
|
|
475
|
+
readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
|
|
476
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
477
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
478
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
479
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
480
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
481
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
482
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
483
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
484
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
485
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
486
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
487
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
488
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
489
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatTextareaFieldComponent, never>;
|
|
490
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatTextareaFieldComponent, "df-mat-textarea", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
interface MatToggleProps {
|
|
494
|
+
hint?: DynamicText;
|
|
495
|
+
appearance?: MatFormFieldAppearance;
|
|
496
|
+
color?: ThemePalette;
|
|
497
|
+
labelPosition?: 'before' | 'after';
|
|
498
|
+
disableRipple?: boolean;
|
|
499
|
+
hideIcon?: boolean;
|
|
500
|
+
}
|
|
501
|
+
type MatToggleField = ToggleField<MatToggleProps>;
|
|
502
|
+
type MatToggleComponent = CheckedFieldComponent<MatToggleField>;
|
|
503
|
+
|
|
504
|
+
declare class MatToggleFieldComponent implements MatToggleComponent {
|
|
505
|
+
private materialConfig;
|
|
506
|
+
readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
|
|
507
|
+
readonly key: _angular_core.InputSignal<string>;
|
|
508
|
+
readonly label: _angular_core.InputSignal<DynamicText | undefined>;
|
|
509
|
+
readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
|
|
510
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
511
|
+
readonly tabIndex: _angular_core.InputSignal<number | undefined>;
|
|
512
|
+
readonly props: _angular_core.InputSignal<MatToggleProps | undefined>;
|
|
513
|
+
readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
514
|
+
readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
|
|
515
|
+
readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
|
|
516
|
+
readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
517
|
+
readonly showErrors: _angular_core.Signal<boolean>;
|
|
518
|
+
readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms.ResolvedError[]>;
|
|
519
|
+
/** Unique ID for the hint element, used for aria-describedby */
|
|
520
|
+
protected readonly hintId: _angular_core.Signal<string>;
|
|
521
|
+
/** Base ID for error elements, used for aria-describedby */
|
|
522
|
+
protected readonly errorId: _angular_core.Signal<string>;
|
|
523
|
+
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
524
|
+
protected readonly ariaInvalid: _angular_core.Signal<boolean>;
|
|
525
|
+
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
526
|
+
protected readonly ariaRequired: _angular_core.Signal<true | null>;
|
|
527
|
+
/** aria-describedby: links to hint and error messages for screen readers */
|
|
528
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string>;
|
|
529
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatToggleFieldComponent, never>;
|
|
530
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatToggleFieldComponent, "df-mat-toggle", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
/**
|
|
534
|
+
* Material Design field type definitions
|
|
535
|
+
* Follows the FieldTypeDefinition interface for proper registry integration
|
|
536
|
+
*/
|
|
537
|
+
declare const MATERIAL_FIELD_TYPES: FieldTypeDefinition[];
|
|
538
|
+
|
|
539
|
+
/**
|
|
540
|
+
* Configuration options for Material Design form fields.
|
|
541
|
+
* These settings will be applied as defaults to all Material form fields
|
|
542
|
+
* unless overridden by individual field props.
|
|
543
|
+
*/
|
|
544
|
+
interface MaterialConfig {
|
|
545
|
+
/**
|
|
546
|
+
* Default appearance for Material form fields
|
|
547
|
+
* @default 'outline'
|
|
548
|
+
*/
|
|
549
|
+
appearance?: MatFormFieldAppearance;
|
|
550
|
+
/**
|
|
551
|
+
* Default subscript sizing for Material form fields
|
|
552
|
+
* @default 'dynamic'
|
|
553
|
+
*/
|
|
554
|
+
subscriptSizing?: SubscriptSizing;
|
|
555
|
+
/**
|
|
556
|
+
* Whether to disable ripple effects by default
|
|
557
|
+
* @default false
|
|
558
|
+
*/
|
|
559
|
+
disableRipple?: boolean;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
/**
|
|
563
|
+
* Injection token for Material Design form configuration.
|
|
564
|
+
* Use this to provide global configuration for Material form fields.
|
|
565
|
+
*
|
|
566
|
+
* @example
|
|
567
|
+
* ```typescript
|
|
568
|
+
* import { provideDynamicForm } from '@ng-forge/dynamic-forms';
|
|
569
|
+
* import { withMaterialFields } from '@ng-forge/dynamic-forms-material';
|
|
570
|
+
*
|
|
571
|
+
* export const appConfig: ApplicationConfig = {
|
|
572
|
+
* providers: [
|
|
573
|
+
* provideDynamicForm(
|
|
574
|
+
* ...withMaterialFields({
|
|
575
|
+
* appearance: 'fill',
|
|
576
|
+
* subscriptSizing: 'fixed'
|
|
577
|
+
* })
|
|
578
|
+
* )
|
|
579
|
+
* ]
|
|
580
|
+
* };
|
|
581
|
+
* ```
|
|
582
|
+
*/
|
|
583
|
+
declare const MATERIAL_CONFIG: InjectionToken<MaterialConfig>;
|
|
584
|
+
|
|
585
|
+
/**
|
|
586
|
+
* Material Design field type constants
|
|
587
|
+
* Based on available field components in the /fields folder
|
|
588
|
+
*/
|
|
589
|
+
declare const MatField: {
|
|
590
|
+
readonly Input: "input";
|
|
591
|
+
readonly Select: "select";
|
|
592
|
+
readonly Checkbox: "checkbox";
|
|
593
|
+
readonly Button: "button";
|
|
594
|
+
readonly Submit: "submit";
|
|
595
|
+
readonly Next: "next";
|
|
596
|
+
readonly Previous: "previous";
|
|
597
|
+
readonly AddArrayItem: "addArrayItem";
|
|
598
|
+
readonly RemoveArrayItem: "removeArrayItem";
|
|
599
|
+
readonly Textarea: "textarea";
|
|
600
|
+
readonly Radio: "radio";
|
|
601
|
+
readonly MultiCheckbox: "multi-checkbox";
|
|
602
|
+
readonly Datepicker: "datepicker";
|
|
603
|
+
readonly Slider: "slider";
|
|
604
|
+
readonly Toggle: "toggle";
|
|
605
|
+
};
|
|
606
|
+
type MatFieldType = (typeof MatField)[keyof typeof MatField];
|
|
607
|
+
|
|
608
|
+
/**
|
|
609
|
+
* Module augmentation for @ng-forge/dynamic-form
|
|
610
|
+
* This file augments the FieldRegistryLeaves interface to include
|
|
611
|
+
* all Material Design field types provided by this library.
|
|
612
|
+
*/
|
|
613
|
+
|
|
614
|
+
declare module '@ng-forge/dynamic-forms' {
|
|
615
|
+
interface FieldRegistryLeaves {
|
|
616
|
+
input: MatInputField;
|
|
617
|
+
select: MatSelectField<unknown>;
|
|
618
|
+
checkbox: MatCheckboxField;
|
|
619
|
+
button: MatButtonField<FormEvent>;
|
|
620
|
+
submit: MatSubmitButtonField;
|
|
621
|
+
next: MatNextButtonField;
|
|
622
|
+
previous: MatPreviousButtonField;
|
|
623
|
+
addArrayItem: AddArrayItemButtonField;
|
|
624
|
+
removeArrayItem: RemoveArrayItemButtonField;
|
|
625
|
+
textarea: MatTextareaField;
|
|
626
|
+
radio: MatRadioField<unknown>;
|
|
627
|
+
'multi-checkbox': MatMultiCheckboxField<unknown>;
|
|
628
|
+
datepicker: MatDatepickerField;
|
|
629
|
+
slider: MatSliderField;
|
|
630
|
+
toggle: MatToggleField;
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/**
|
|
635
|
+
* Field type definitions with optional config providers
|
|
636
|
+
*/
|
|
637
|
+
type FieldTypeDefinitionsWithConfig = FieldTypeDefinition[] & {
|
|
638
|
+
__configProviders?: Provider[];
|
|
639
|
+
};
|
|
640
|
+
/**
|
|
641
|
+
* Configure dynamic forms with Material Design field types.
|
|
642
|
+
* Provides all Material Design field types for use with provideDynamicForm.
|
|
643
|
+
*
|
|
644
|
+
* @param config - Optional global configuration for Material form fields
|
|
645
|
+
*
|
|
646
|
+
* @example
|
|
647
|
+
* ```typescript
|
|
648
|
+
* // Application-level setup
|
|
649
|
+
* import { ApplicationConfig } from '@angular/core';
|
|
650
|
+
* import { provideDynamicForm } from '@ng-forge/dynamic-form';
|
|
651
|
+
* import { withMaterialFields } from '@ng-forge/dynamic-form-material';
|
|
652
|
+
*
|
|
653
|
+
* export const appConfig: ApplicationConfig = {
|
|
654
|
+
* providers: [
|
|
655
|
+
* provideDynamicForm(...withMaterialFields())
|
|
656
|
+
* ]
|
|
657
|
+
* };
|
|
658
|
+
* ```
|
|
659
|
+
*
|
|
660
|
+
* @example
|
|
661
|
+
* ```typescript
|
|
662
|
+
* // With global configuration
|
|
663
|
+
* export const appConfig: ApplicationConfig = {
|
|
664
|
+
* providers: [
|
|
665
|
+
* provideDynamicForm(
|
|
666
|
+
* ...withMaterialFields({
|
|
667
|
+
* appearance: 'fill',
|
|
668
|
+
* subscriptSizing: 'fixed'
|
|
669
|
+
* })
|
|
670
|
+
* )
|
|
671
|
+
* ]
|
|
672
|
+
* };
|
|
673
|
+
* ```
|
|
674
|
+
*
|
|
675
|
+
* @returns Array of field type definitions for Material Design components
|
|
676
|
+
*/
|
|
677
|
+
declare function withMaterialFields(config?: MaterialConfig): FieldTypeDefinitionsWithConfig;
|
|
678
|
+
/**
|
|
679
|
+
* Module augmentation to extend the global DynamicFormFieldRegistry
|
|
680
|
+
* with Material Design field types
|
|
681
|
+
*/
|
|
682
|
+
declare module '@ng-forge/dynamic-forms' {
|
|
683
|
+
interface DynamicFormFieldRegistry {
|
|
684
|
+
input: MatInputField;
|
|
685
|
+
select: MatSelectField<any>;
|
|
686
|
+
checkbox: MatCheckboxField;
|
|
687
|
+
button: MatButtonField<any>;
|
|
688
|
+
submit: MatSubmitButtonField;
|
|
689
|
+
next: MatNextButtonField;
|
|
690
|
+
previous: MatPreviousButtonField;
|
|
691
|
+
textarea: MatTextareaField;
|
|
692
|
+
radio: MatRadioField<any>;
|
|
693
|
+
'multi-checkbox': MatMultiCheckboxField<any>;
|
|
694
|
+
datepicker: MatDatepickerField;
|
|
695
|
+
slider: MatSliderField;
|
|
696
|
+
toggle: MatToggleField;
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
export { MATERIAL_CONFIG, MATERIAL_FIELD_TYPES, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialFields };
|
|
701
|
+
export type { AddArrayItemButtonField, MatButtonField, MatButtonProps, MatCheckboxComponent, MatCheckboxField, MatCheckboxProps, MatDatepickerComponent, MatDatepickerField, MatDatepickerProps, MatFieldType, MatInputComponent, MatInputField, MatInputProps, MatMultiCheckboxComponent, MatMultiCheckboxField, MatMultiCheckboxProps, MatNextButtonField, MatPreviousButtonField, MatRadioComponent, MatRadioField, MatRadioProps, MatSelectComponent, MatSelectField, MatSelectProps, MatSliderComponent, MatSliderField, MatSliderProps, MatSubmitButtonField, MatTextareaComponent, MatTextareaField, MatTextareaProps, MatToggleComponent, MatToggleField, MatToggleProps, MaterialConfig, RemoveArrayItemButtonField };
|