@ng-forge/dynamic-forms-material 0.1.3 → 0.3.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.
Files changed (5) hide show
  1. package/README.md +3 -1
  2. package/fesm2022/ng-forge-dynamic-forms-material.mjs +201 -322
  3. package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
  4. package/package.json +6 -6
  5. package/types/ng-forge-dynamic-forms-material.d.ts +53 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-forge/dynamic-forms-material",
3
- "version": "0.1.3",
3
+ "version": "0.3.0",
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.5",
32
- "@angular/core": "~21.0.5",
33
- "@angular/forms": "~21.0.5",
34
- "@angular/material": "~21.0.0",
35
- "@ng-forge/dynamic-forms": "~0.1.3",
31
+ "@angular/common": ">=21.0.7",
32
+ "@angular/core": ">=21.0.7",
33
+ "@angular/forms": ">=21.0.7",
34
+ "@angular/material": ">=21.0.5",
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'
@@ -140,16 +151,11 @@ declare class MatInputFieldComponent implements MatInputComponent {
140
151
  * Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
141
152
  * NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
142
153
  *
154
+ * Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
155
+ *
143
156
  * @see https://github.com/angular/angular/issues/65897
144
157
  */
145
158
  private readonly syncReadonlyToDom;
146
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
147
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
148
- readonly className: _angular_core.InputSignal<string>;
149
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
150
- readonly props: _angular_core.InputSignal<MatInputProps | undefined>;
151
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
152
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
153
159
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
154
160
  readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
155
161
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -166,7 +172,7 @@ declare class MatInputFieldComponent implements MatInputComponent {
166
172
  /** aria-describedby: links to hint and error messages for screen readers */
167
173
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
168
174
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatInputFieldComponent, never>;
169
- 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>;
170
176
  }
171
177
 
172
178
  interface MatMultiCheckboxProps {
@@ -180,6 +186,7 @@ type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
180
186
  type MatMultiCheckboxComponent<T> = ValueFieldComponent<MatMultiCheckboxField<T>>;
181
187
 
182
188
  declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements MatMultiCheckboxComponent<T> {
189
+ private readonly elementRef;
183
190
  readonly field: _angular_core.InputSignal<FieldTree<T[]>>;
184
191
  readonly key: _angular_core.InputSignal<string>;
185
192
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -188,6 +195,7 @@ declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements Mat
188
195
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
189
196
  readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
190
197
  readonly props: _angular_core.InputSignal<MatMultiCheckboxProps | undefined>;
198
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
191
199
  valueViewModel: _angular_core.WritableSignal<FieldOption<T>[]>;
192
200
  constructor();
193
201
  onCheckboxChange(option: FieldOption<T>, checked: boolean): void;
@@ -207,7 +215,7 @@ declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements Mat
207
215
  /** aria-describedby: links to hint and error messages for screen readers */
208
216
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
209
217
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatMultiCheckboxFieldComponent<any>, never>;
210
- 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>;
211
219
  }
212
220
 
213
221
  interface MatRadioProps {
@@ -220,6 +228,7 @@ type MatRadioField<T> = RadioField<T, MatRadioProps>;
220
228
  type MatRadioComponent<T> = ValueFieldComponent<MatRadioField<T>>;
221
229
 
222
230
  declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
231
+ private readonly elementRef;
223
232
  readonly field: _angular_core.InputSignal<FieldTree<T>>;
224
233
  readonly key: _angular_core.InputSignal<string>;
225
234
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -228,11 +237,13 @@ declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
228
237
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
229
238
  readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
230
239
  readonly props: _angular_core.InputSignal<MatRadioProps | undefined>;
240
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
231
241
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
232
242
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
233
243
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
234
244
  readonly showErrors: _angular_core.Signal<boolean>;
235
245
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
246
+ constructor();
236
247
  /** Unique ID for the hint element, used for aria-describedby */
237
248
  protected readonly hintId: _angular_core.Signal<string>;
238
249
  /** Base ID for error elements, used for aria-describedby */
@@ -244,7 +255,7 @@ declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
244
255
  /** aria-describedby: links to hint and error messages for screen readers */
245
256
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
246
257
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatRadioFieldComponent<any>, never>;
247
- 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>;
248
259
  }
249
260
 
250
261
  interface MatSelectProps<T> extends SelectProps {
@@ -260,6 +271,7 @@ type MatSelectComponent<T> = ValueFieldComponent<MatSelectField<T>>;
260
271
 
261
272
  declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
262
273
  private materialConfig;
274
+ private readonly elementRef;
263
275
  readonly field: _angular_core.InputSignal<FieldTree<T>>;
264
276
  readonly key: _angular_core.InputSignal<string>;
265
277
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -268,6 +280,7 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
268
280
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
269
281
  readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
270
282
  readonly props: _angular_core.InputSignal<MatSelectProps<T> | undefined>;
283
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
271
284
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
272
285
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
273
286
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
@@ -276,6 +289,7 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
276
289
  readonly showErrors: _angular_core.Signal<boolean>;
277
290
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
278
291
  defaultCompare: (value1: any, value2: any) => boolean;
292
+ constructor();
279
293
  /** Unique ID for the hint element, used for aria-describedby */
280
294
  protected readonly hintId: _angular_core.Signal<string>;
281
295
  /** Base ID for error elements, used for aria-describedby */
@@ -287,7 +301,7 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
287
301
  /** aria-describedby: links to hint and error messages for screen readers */
288
302
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
289
303
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent<any>, never>;
290
- 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>;
291
305
  }
292
306
 
293
307
  interface MatSliderProps {
@@ -303,13 +317,16 @@ type MatSliderField = SliderField<MatSliderProps>;
303
317
  type MatSliderComponent = ValueFieldComponent<MatSliderField>;
304
318
 
305
319
  declare class MatSliderFieldComponent implements MatSliderComponent {
320
+ private readonly elementRef;
306
321
  readonly field: _angular_core.InputSignal<FieldTree<string>>;
307
322
  readonly key: _angular_core.InputSignal<string>;
323
+ constructor();
308
324
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
309
325
  readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
310
326
  readonly className: _angular_core.InputSignal<string>;
311
327
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
312
328
  readonly props: _angular_core.InputSignal<MatSliderProps | undefined>;
329
+ readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
313
330
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
314
331
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
315
332
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -324,7 +341,7 @@ declare class MatSliderFieldComponent implements MatSliderComponent {
324
341
  /** aria-describedby: links to hint and error messages for screen readers */
325
342
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
326
343
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSliderFieldComponent, never>;
327
- 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>;
328
345
  }
329
346
 
330
347
  interface MatButtonProps {
@@ -440,8 +457,18 @@ type MatTextareaComponent = ValueFieldComponent<MatTextareaField>;
440
457
 
441
458
  declare class MatTextareaFieldComponent implements MatTextareaComponent {
442
459
  private materialConfig;
460
+ private readonly elementRef;
443
461
  readonly field: _angular_core.InputSignal<FieldTree<string>>;
444
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();
445
472
  /**
446
473
  * Reference to the native textarea element.
447
474
  * Used to imperatively sync the readonly attribute since Angular Signal Forms'
@@ -465,13 +492,6 @@ declare class MatTextareaFieldComponent implements MatTextareaComponent {
465
492
  * @see https://github.com/angular/angular/issues/65897
466
493
  */
467
494
  private readonly syncReadonlyToDom;
468
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
469
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
470
- readonly className: _angular_core.InputSignal<string>;
471
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
472
- readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
473
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
474
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
475
495
  readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
476
496
  readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
477
497
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -488,7 +508,7 @@ declare class MatTextareaFieldComponent implements MatTextareaComponent {
488
508
  /** aria-describedby: links to hint and error messages for screen readers */
489
509
  protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
490
510
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatTextareaFieldComponent, never>;
491
- 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>;
492
512
  }
493
513
 
494
514
  interface MatToggleProps {
@@ -504,6 +524,7 @@ type MatToggleComponent = CheckedFieldComponent<MatToggleField>;
504
524
 
505
525
  declare class MatToggleFieldComponent implements MatToggleComponent {
506
526
  private materialConfig;
527
+ private readonly elementRef;
507
528
  readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
508
529
  readonly key: _angular_core.InputSignal<string>;
509
530
  readonly label: _angular_core.InputSignal<DynamicText | undefined>;
@@ -511,12 +532,14 @@ declare class MatToggleFieldComponent implements MatToggleComponent {
511
532
  readonly className: _angular_core.InputSignal<string>;
512
533
  readonly tabIndex: _angular_core.InputSignal<number | undefined>;
513
534
  readonly props: _angular_core.InputSignal<MatToggleProps | undefined>;
535
+ readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
514
536
  readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
515
537
  readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
516
538
  readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
517
539
  readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
518
540
  readonly showErrors: _angular_core.Signal<boolean>;
519
541
  readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
542
+ constructor();
520
543
  /** Unique ID for the hint element, used for aria-describedby */
521
544
  protected readonly hintId: _angular_core.Signal<string>;
522
545
  /** Base ID for error elements, used for aria-describedby */
@@ -528,7 +551,7 @@ declare class MatToggleFieldComponent implements MatToggleComponent {
528
551
  /** aria-describedby: links to hint and error messages for screen readers */
529
552
  protected readonly ariaDescribedBy: _angular_core.Signal<string>;
530
553
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatToggleFieldComponent, never>;
531
- 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>;
532
555
  }
533
556
 
534
557
  /**