@ng-forge/dynamic-forms-material 0.2.0 → 0.3.1

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.
Files changed (5) hide show
  1. package/README.md +4 -2
  2. package/fesm2022/ng-forge-dynamic-forms-material.mjs +209 -116
  3. package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
  4. package/package.json +5 -5
  5. package/types/ng-forge-dynamic-forms-material.d.ts +51 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-forge/dynamic-forms-material",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
4
4
  "description": "Angular Material integration for @ng-forge/dynamic-forms. Pre-built Material Design form components.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -28,11 +28,11 @@
28
28
  "node": ">=18"
29
29
  },
30
30
  "peerDependencies": {
31
- "@angular/common": ">=21.0.6",
32
- "@angular/core": ">=21.0.6",
33
- "@angular/forms": ">=21.0.6",
31
+ "@angular/common": ">=21.0.7",
32
+ "@angular/core": ">=21.0.7",
33
+ "@angular/forms": ">=21.0.7",
34
34
  "@angular/material": ">=21.0.5",
35
- "@ng-forge/dynamic-forms": "~0.2.0",
35
+ "@ng-forge/dynamic-forms": "~0.3.0",
36
36
  "rxjs": ">=7.0.0"
37
37
  },
38
38
  "module": "fesm2022/ng-forge-dynamic-forms-material.mjs",
package/types/ng-forge-dynamic-forms-material.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
2
- import { CheckboxField, DatepickerField, DatepickerProps, InputField, InputProps, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, EventArgs, TextareaField, TextareaProps, ToggleField } from '@ng-forge/dynamic-forms/integration';
2
+ import { CheckboxField, DatepickerField, DatepickerProps, InputMeta, InputField, InputProps, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, EventArgs, TextareaField, TextareaProps, TextareaMeta, ToggleField } from '@ng-forge/dynamic-forms/integration';
3
3
  import * as _angular_core from '@angular/core';
4
4
  import { InjectionToken, Provider } from '@angular/core';
5
5
  import { FieldTree } from '@angular/forms/signals';
6
- import { DynamicText, CheckedFieldComponent, ValidationMessages, ValueFieldComponent, ValueType, FieldOption, FormEvent, FieldDef, LogicConfig, FieldComponent, FormEventConstructor, ArrayItemContext, FieldTypeDefinition } from '@ng-forge/dynamic-forms';
6
+ import { DynamicText, CheckedFieldComponent, FieldMeta, ValidationMessages, ValueFieldComponent, ValueType, FieldOption, FormEvent, FieldDef, LogicConfig, FieldComponent, FormEventConstructor, ArrayItemContext, FieldTypeDefinition } from '@ng-forge/dynamic-forms';
7
7
  import { ThemePalette } from '@angular/material/core';
8
8
  import * as _angular_material_form_field from '@angular/material/form-field';
9
9
  import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
@@ -20,24 +20,22 @@ type MatCheckboxComponent = CheckedFieldComponent<MatCheckboxField>;
20
20
 
21
21
  declare class MatCheckboxFieldComponent implements MatCheckboxComponent {
22
22
  private materialConfig;
23
+ private readonly elementRef;
23
24
  readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
24
25
  readonly key: _angular_core.InputSignal<string>;
25
- /**
26
- * Host element reference for DOM queries.
27
- * Used to find the internal checkbox input for accessibility workarounds.
28
- */
29
- private readonly hostEl;
30
26
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
31
27
  readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
32
28
  readonly className: _angular_core.InputSignal<string>;
33
29
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
34
30
  readonly props: _angular_core.InputSignal<MatCheckboxProps | undefined>;
31
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
35
32
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
36
33
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
37
34
  readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
38
35
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
39
36
  readonly showErrors: _angular_core.Signal<boolean>;
40
37
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
38
+ constructor();
41
39
  /** Unique ID for the hint element, used for aria-describedby */
42
40
  protected readonly hintId: _angular_core.Signal<string>;
43
41
  /** Base ID for error elements, used for aria-describedby */
@@ -58,7 +56,7 @@ declare class MatCheckboxFieldComponent implements MatCheckboxComponent {
58
56
  */
59
57
  private readonly syncAriaRequiredToDom;
60
58
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatCheckboxFieldComponent, never>;
61
- 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>;
59
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
62
60
  }
63
61
 
64
62
  interface MatDatepickerProps extends DatepickerProps {
@@ -75,8 +73,10 @@ type MatDatepickerComponent = ValueFieldComponent<MatDatepickerField>;
75
73
 
76
74
  declare class MatDatepickerFieldComponent implements MatDatepickerComponent {
77
75
  private materialConfig;
76
+ private readonly elementRef;
78
77
  readonly field: _angular_core.InputSignal<FieldTree<string>>;
79
78
  readonly key: _angular_core.InputSignal<string>;
79
+ constructor();
80
80
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
81
81
  readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
82
82
  readonly className: _angular_core.InputSignal<string>;
@@ -85,6 +85,7 @@ declare class MatDatepickerFieldComponent implements MatDatepickerComponent {
85
85
  readonly maxDate: _angular_core.InputSignal<Date | null>;
86
86
  readonly startAt: _angular_core.InputSignal<Date | null>;
87
87
  readonly props: _angular_core.InputSignal<MatDatepickerProps | undefined>;
88
+ readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
88
89
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
89
90
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
90
91
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
@@ -103,7 +104,7 @@ declare class MatDatepickerFieldComponent implements MatDatepickerComponent {
103
104
  /** aria-describedby: links to hint and error messages for screen readers */
104
105
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
105
106
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatDatepickerFieldComponent, never>;
106
- 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>;
107
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
107
108
  }
108
109
 
109
110
  interface MatInputProps extends InputProps {
@@ -118,8 +119,18 @@ type MatInputComponent = ValueFieldComponent<MatInputField>;
118
119
 
119
120
  declare class MatInputFieldComponent implements MatInputComponent {
120
121
  private materialConfig;
122
+ private readonly elementRef;
121
123
  readonly field: _angular_core.InputSignal<FieldTree<string>>;
122
124
  readonly key: _angular_core.InputSignal<string>;
125
+ readonly label: _angular_core.InputSignal<DynamicText | undefined>;
126
+ readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
127
+ readonly className: _angular_core.InputSignal<string>;
128
+ readonly tabIndex: _angular_core.InputSignal<number | undefined>;
129
+ readonly props: _angular_core.InputSignal<MatInputProps | undefined>;
130
+ readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
131
+ readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
132
+ readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
133
+ constructor();
123
134
  /**
124
135
  * Reference to the native input element.
125
136
  * Used to imperatively sync the readonly attribute since Angular Signal Forms'
@@ -145,17 +156,8 @@ declare class MatInputFieldComponent implements MatInputComponent {
145
156
  * @see https://github.com/angular/angular/issues/65897
146
157
  */
147
158
  private readonly syncReadonlyToDom;
148
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
149
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
150
- readonly className: _angular_core.InputSignal<string>;
151
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
152
- readonly props: _angular_core.InputSignal<MatInputProps | undefined>;
153
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
154
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
155
159
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
156
160
  readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
157
- /** Computed input type - defaults to 'text' if not specified in props */
158
- readonly inputType: _angular_core.Signal<"number" | "email" | "text" | "password" | "tel" | "url">;
159
161
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
160
162
  readonly showErrors: _angular_core.Signal<boolean>;
161
163
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -170,7 +172,7 @@ declare class MatInputFieldComponent implements MatInputComponent {
170
172
  /** aria-describedby: links to hint and error messages for screen readers */
171
173
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
172
174
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatInputFieldComponent, never>;
173
- 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>;
175
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
174
176
  }
175
177
 
176
178
  interface MatMultiCheckboxProps {
@@ -184,6 +186,7 @@ type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
184
186
  type MatMultiCheckboxComponent<T> = ValueFieldComponent<MatMultiCheckboxField<T>>;
185
187
 
186
188
  declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements MatMultiCheckboxComponent<T> {
189
+ private readonly elementRef;
187
190
  readonly field: _angular_core.InputSignal<FieldTree<T[]>>;
188
191
  readonly key: _angular_core.InputSignal<string>;
189
192
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -192,6 +195,7 @@ declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements Mat
192
195
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
193
196
  readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
194
197
  readonly props: _angular_core.InputSignal<MatMultiCheckboxProps | undefined>;
198
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
195
199
  valueViewModel: _angular_core.WritableSignal<FieldOption<T>[]>;
196
200
  constructor();
197
201
  onCheckboxChange(option: FieldOption<T>, checked: boolean): void;
@@ -211,7 +215,7 @@ declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements Mat
211
215
  /** aria-describedby: links to hint and error messages for screen readers */
212
216
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
213
217
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatMultiCheckboxFieldComponent<any>, never>;
214
- 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>;
218
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
215
219
  }
216
220
 
217
221
  interface MatRadioProps {
@@ -224,6 +228,7 @@ type MatRadioField<T> = RadioField<T, MatRadioProps>;
224
228
  type MatRadioComponent<T> = ValueFieldComponent<MatRadioField<T>>;
225
229
 
226
230
  declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
231
+ private readonly elementRef;
227
232
  readonly field: _angular_core.InputSignal<FieldTree<T>>;
228
233
  readonly key: _angular_core.InputSignal<string>;
229
234
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -232,11 +237,13 @@ declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
232
237
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
233
238
  readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
234
239
  readonly props: _angular_core.InputSignal<MatRadioProps | undefined>;
240
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
235
241
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
236
242
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
237
243
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
238
244
  readonly showErrors: _angular_core.Signal<boolean>;
239
245
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
246
+ constructor();
240
247
  /** Unique ID for the hint element, used for aria-describedby */
241
248
  protected readonly hintId: _angular_core.Signal<string>;
242
249
  /** Base ID for error elements, used for aria-describedby */
@@ -248,7 +255,7 @@ declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
248
255
  /** aria-describedby: links to hint and error messages for screen readers */
249
256
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
250
257
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatRadioFieldComponent<any>, never>;
251
- 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>;
258
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
252
259
  }
253
260
 
254
261
  interface MatSelectProps<T> extends SelectProps {
@@ -264,6 +271,7 @@ type MatSelectComponent<T> = ValueFieldComponent<MatSelectField<T>>;
264
271
 
265
272
  declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
266
273
  private materialConfig;
274
+ private readonly elementRef;
267
275
  readonly field: _angular_core.InputSignal<FieldTree<T>>;
268
276
  readonly key: _angular_core.InputSignal<string>;
269
277
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -272,6 +280,7 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
272
280
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
273
281
  readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
274
282
  readonly props: _angular_core.InputSignal<MatSelectProps<T> | undefined>;
283
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
275
284
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
276
285
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
277
286
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
@@ -280,6 +289,7 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
280
289
  readonly showErrors: _angular_core.Signal<boolean>;
281
290
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
282
291
  defaultCompare: (value1: any, value2: any) => boolean;
292
+ constructor();
283
293
  /** Unique ID for the hint element, used for aria-describedby */
284
294
  protected readonly hintId: _angular_core.Signal<string>;
285
295
  /** Base ID for error elements, used for aria-describedby */
@@ -291,7 +301,7 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
291
301
  /** aria-describedby: links to hint and error messages for screen readers */
292
302
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
293
303
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent<any>, never>;
294
- 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>;
304
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
295
305
  }
296
306
 
297
307
  interface MatSliderProps {
@@ -307,13 +317,16 @@ type MatSliderField = SliderField<MatSliderProps>;
307
317
  type MatSliderComponent = ValueFieldComponent<MatSliderField>;
308
318
 
309
319
  declare class MatSliderFieldComponent implements MatSliderComponent {
320
+ private readonly elementRef;
310
321
  readonly field: _angular_core.InputSignal<FieldTree<string>>;
311
322
  readonly key: _angular_core.InputSignal<string>;
323
+ constructor();
312
324
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
313
325
  readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
314
326
  readonly className: _angular_core.InputSignal<string>;
315
327
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
316
328
  readonly props: _angular_core.InputSignal<MatSliderProps | undefined>;
329
+ readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
317
330
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
318
331
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
319
332
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -328,7 +341,7 @@ declare class MatSliderFieldComponent implements MatSliderComponent {
328
341
  /** aria-describedby: links to hint and error messages for screen readers */
329
342
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
330
343
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSliderFieldComponent, never>;
331
- 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>;
344
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
332
345
  }
333
346
 
334
347
  interface MatButtonProps {
@@ -444,8 +457,18 @@ type MatTextareaComponent = ValueFieldComponent<MatTextareaField>;
444
457
 
445
458
  declare class MatTextareaFieldComponent implements MatTextareaComponent {
446
459
  private materialConfig;
460
+ private readonly elementRef;
447
461
  readonly field: _angular_core.InputSignal<FieldTree<string>>;
448
462
  readonly key: _angular_core.InputSignal<string>;
463
+ readonly label: _angular_core.InputSignal<DynamicText | undefined>;
464
+ readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
465
+ readonly className: _angular_core.InputSignal<string>;
466
+ readonly tabIndex: _angular_core.InputSignal<number | undefined>;
467
+ readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
468
+ readonly meta: _angular_core.InputSignal<TextareaMeta | undefined>;
469
+ readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
470
+ readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
471
+ constructor();
449
472
  /**
450
473
  * Reference to the native textarea element.
451
474
  * Used to imperatively sync the readonly attribute since Angular Signal Forms'
@@ -469,13 +492,6 @@ declare class MatTextareaFieldComponent implements MatTextareaComponent {
469
492
  * @see https://github.com/angular/angular/issues/65897
470
493
  */
471
494
  private readonly syncReadonlyToDom;
472
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
473
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
474
- readonly className: _angular_core.InputSignal<string>;
475
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
476
- readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
477
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
478
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
479
495
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
480
496
  readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
481
497
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -492,7 +508,7 @@ declare class MatTextareaFieldComponent implements MatTextareaComponent {
492
508
  /** aria-describedby: links to hint and error messages for screen readers */
493
509
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
494
510
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatTextareaFieldComponent, never>;
495
- 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>;
511
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
496
512
  }
497
513
 
498
514
  interface MatToggleProps {
@@ -508,6 +524,7 @@ type MatToggleComponent = CheckedFieldComponent<MatToggleField>;
508
524
 
509
525
  declare class MatToggleFieldComponent implements MatToggleComponent {
510
526
  private materialConfig;
527
+ private readonly elementRef;
511
528
  readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
512
529
  readonly key: _angular_core.InputSignal<string>;
513
530
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -515,12 +532,14 @@ declare class MatToggleFieldComponent implements MatToggleComponent {
515
532
  readonly className: _angular_core.InputSignal<string>;
516
533
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
517
534
  readonly props: _angular_core.InputSignal<MatToggleProps | undefined>;
535
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
518
536
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
519
537
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
520
538
  readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
521
539
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
522
540
  readonly showErrors: _angular_core.Signal<boolean>;
523
541
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
542
+ constructor();
524
543
  /** Unique ID for the hint element, used for aria-describedby */
525
544
  protected readonly hintId: _angular_core.Signal<string>;
526
545
  /** Base ID for error elements, used for aria-describedby */
@@ -532,7 +551,7 @@ declare class MatToggleFieldComponent implements MatToggleComponent {
532
551
  /** aria-describedby: links to hint and error messages for screen readers */
533
552
  protected readonly ariaDescribedBy: _angular_core.Signal<string>;
534
553
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatToggleFieldComponent, never>;
535
- 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>;
554
+ 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; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "validationMessages": { "alias": "validationMessages"; "required": false; "isSignal": true; }; "defaultValidationMessages": { "alias": "defaultValidationMessages"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
536
555
  }
537
556
 
538
557
  /**