@ng-forge/dynamic-forms-material 0.9.0-next.8 → 0.9.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 (6) hide show
  1. package/README.md +1 -0
  2. package/fesm2022/ng-forge-dynamic-forms-material.mjs +723 -947
  3. package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
  4. package/package.json +13 -12
  5. package/styles/_defaults.scss +70 -0
  6. package/types/ng-forge-dynamic-forms-material.d.ts +333 -348
package/types/ng-forge-dynamic-forms-material.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import * as _ng_forge_dynamic_forms_integration 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
1
  import * as _angular_core from '@angular/core';
4
- import { InjectionToken, Provider } from '@angular/core';
5
- import { FieldTree } from '@angular/forms/signals';
6
- import { DynamicText, CheckedFieldComponent, FieldMeta, ValidationMessages, ValueFieldComponent, ValueType, FieldOption, FormEvent, NextPageEvent, PreviousPageEvent, AppendArrayItemEvent, ArrayAllowedChildren, PrependArrayItemEvent, InsertArrayItemEvent, RemoveAtIndexEvent, PopArrayItemEvent, ShiftArrayItemEvent, FieldComponent, FormEventConstructor, ArrayItemContext, FieldTypeDefinition, NarrowFields, RegisteredFieldTypes, InferFormValue, FormConfig } from '@ng-forge/dynamic-forms';
2
+ import { InjectionToken, Provider, WritableSignal } from '@angular/core';
3
+ import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
4
+ import { CheckboxField, DatepickerField, DatepickerProps, InputField, InputProps, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, TextareaField, TextareaProps, ToggleField } from '@ng-forge/dynamic-forms/integration';
5
+ import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
6
+ import { DynamicText, CheckedFieldComponent, ValueFieldComponent, BaseAddon, DynamicValue, AddonActionPreset, RegisteredActionRef, AddonActionHandler, TextAddon, TemplateAddon, WrapperFieldInputs, ValueType, FieldOption, FormEvent, NextPageEvent, PreviousPageEvent, AppendArrayItemEvent, ArrayAllowedChildren, PrependArrayItemEvent, InsertArrayItemEvent, RemoveAtIndexEvent, PopArrayItemEvent, ShiftArrayItemEvent, FieldTypeDefinition, NarrowFields, RegisteredFieldTypes, InferFormValue, FormConfig } 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, FloatLabelType } from '@angular/material/form-field';
@@ -16,56 +16,16 @@ interface MatCheckboxProps {
16
16
  indeterminate?: boolean;
17
17
  }
18
18
  type MatCheckboxField = CheckboxField<MatCheckboxProps>;
19
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
19
20
  type MatCheckboxComponent = CheckedFieldComponent<MatCheckboxField>;
20
21
 
21
- declare class MatCheckboxFieldComponent implements MatCheckboxComponent {
22
+ declare class MatCheckboxFieldComponent {
22
23
  private materialConfig;
23
- private readonly elementRef;
24
- readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
25
- readonly key: _angular_core.InputSignal<string>;
26
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
27
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
28
- readonly className: _angular_core.InputSignal<string>;
29
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
24
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<boolean>;
30
25
  readonly props: _angular_core.InputSignal<MatCheckboxProps | undefined>;
31
- readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
32
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
33
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
34
- readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
35
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
36
- readonly showErrors: _angular_core.Signal<boolean>;
37
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
38
- constructor();
39
- /** Unique ID for the hint element, used for aria-describedby */
40
- protected readonly hintId: _angular_core.Signal<string>;
41
- /** Base ID for error elements, used for aria-describedby */
42
- protected readonly errorId: _angular_core.Signal<string>;
43
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
44
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
45
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
46
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
47
- /** aria-describedby: links to hint and error messages for screen readers */
48
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
49
- /**
50
- * Workaround: Angular Material's MatCheckbox does NOT set aria-required on its internal
51
- * input element when [required] is passed, even though it sets the native required attribute.
52
- * This effect imperatively sets/removes aria-required on the internal input.
53
- *
54
- * Bug: MatCheckbox sets `required` attribute but not `aria-required` for screen readers.
55
- * @see https://github.com/angular/components/issues/XXXXX (TODO: file issue)
56
- *
57
- * Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
58
- */
59
- private readonly syncAriaRequiredToDom;
60
- /**
61
- * Workaround: Angular Material's MatCheckbox does NOT propagate aria-describedby to its internal
62
- * input element. This effect imperatively sets/removes aria-describedby on the internal input.
63
- *
64
- * Uses afterRenderEffect to ensure DOM is ready before querying internal elements.
65
- */
66
- private readonly syncAriaDescribedByToDom;
26
+ readonly disableRipple: _angular_core.Signal<boolean>;
67
27
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatCheckboxFieldComponent, never>;
68
- 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>;
28
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatCheckboxFieldComponent, "df-mat-checkbox", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
69
29
  }
70
30
 
71
31
  interface MatDatepickerProps extends DatepickerProps {
@@ -80,44 +40,138 @@ interface MatDatepickerProps extends DatepickerProps {
80
40
  hint?: DynamicText;
81
41
  }
82
42
  type MatDatepickerField = DatepickerField<MatDatepickerProps>;
43
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
83
44
  type MatDatepickerComponent = ValueFieldComponent<MatDatepickerField>;
84
45
 
85
- declare class MatDatepickerFieldComponent implements MatDatepickerComponent {
46
+ declare class MatDatepickerFieldComponent {
86
47
  private materialConfig;
87
- private readonly elementRef;
88
- readonly field: _angular_core.InputSignal<FieldTree<string>>;
89
- readonly key: _angular_core.InputSignal<string>;
90
- constructor();
91
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
92
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
93
- readonly className: _angular_core.InputSignal<string>;
94
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
48
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
95
49
  readonly minDate: _angular_core.InputSignal<Date | null>;
96
50
  readonly maxDate: _angular_core.InputSignal<Date | null>;
97
51
  readonly startAt: _angular_core.InputSignal<Date | null>;
98
52
  readonly props: _angular_core.InputSignal<MatDatepickerProps | undefined>;
99
- readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
100
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
101
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
102
- readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
103
- readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
104
- readonly effectiveFloatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
105
- readonly effectiveHideRequiredMarker: _angular_core.Signal<boolean>;
106
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
107
- readonly showErrors: _angular_core.Signal<boolean>;
108
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
109
- /** Unique ID for the hint element, used for aria-describedby */
110
- protected readonly hintId: _angular_core.Signal<string>;
111
- /** Base ID for error elements, used for aria-describedby */
112
- protected readonly errorId: _angular_core.Signal<string>;
113
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
114
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
115
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
116
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
117
- /** aria-describedby: links to hint and error messages for screen readers */
118
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
53
+ readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
54
+ readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
55
+ readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
56
+ readonly hideRequiredMarker: _angular_core.Signal<boolean>;
119
57
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatDatepickerFieldComponent, never>;
120
- 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>;
58
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatDatepickerFieldComponent, "df-mat-datepicker", never, { "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; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
59
+ }
60
+
61
+ /**
62
+ * Decorative icon addon for Material fields.
63
+ *
64
+ * Renders `<mat-icon>{icon}</mat-icon>` using Material Icons ligatures —
65
+ * `icon: 'search'` produces `<mat-icon>search</mat-icon>`.
66
+ *
67
+ * Add `ariaLabel` for icons that convey meaning (search, error, success);
68
+ * leave it omitted for purely decorative icons (will be `aria-hidden="true"`).
69
+ */
70
+ interface MatIconAddon extends BaseAddon {
71
+ readonly kind: 'mat-icon';
72
+ /** Material Icons name (ligature, e.g., `'search'`, `'close'`). */
73
+ readonly icon: string;
74
+ /** Accessible label for icons that convey meaning. */
75
+ readonly ariaLabel?: DynamicText;
76
+ }
77
+ /**
78
+ * Common shape of every `mat-button` addon — properties that don't
79
+ * participate in either XOR axis.
80
+ */
81
+ interface MatButtonBase extends BaseAddon {
82
+ readonly kind: 'mat-button';
83
+ /** Material button colour variant. */
84
+ readonly color?: 'primary' | 'accent' | 'warn';
85
+ /** Reactive loading state — when truthy the button is disabled. */
86
+ readonly loading?: DynamicValue<boolean>;
87
+ }
88
+ /**
89
+ * Click axis — XOR enforced at type level so configurations that combine
90
+ * two click handlers (e.g., `preset` AND `actionRef`) are rejected by
91
+ * TypeScript. Runtime XOR validation stays as defence-in-depth for
92
+ * JSON-source configs that bypass the type checker.
93
+ */
94
+ type MatButtonClickPreset = {
95
+ /** Built-in preset action (e.g., `'clear'`, `'toggle-password-visibility'`). JSON-safe. */
96
+ readonly preset: AddonActionPreset;
97
+ readonly actionRef?: never;
98
+ readonly action?: never;
99
+ };
100
+ /**
101
+ * Value type for the `actionRef` slot. When no actions have been registered
102
+ * via `provideAddonActions(...)`, `RegisteredActionRef` resolves to `never` —
103
+ * which would make this variant uninhabitable and break `addon.actionRef`
104
+ * narrowing in the renderer. Fall back to `string` so the variant stays
105
+ * usable; once the user augments `DynamicFormActionRegistry`, autocomplete
106
+ * tightens to the registered keys.
107
+ */
108
+ type MatButtonActionRef = [RegisteredActionRef] extends [never] ? string : RegisteredActionRef;
109
+ type MatButtonClickActionRef = {
110
+ readonly preset?: never;
111
+ /** Reference to a handler registered via `provideAddonActions(...)`. JSON-safe. */
112
+ readonly actionRef: MatButtonActionRef;
113
+ readonly action?: never;
114
+ };
115
+ type MatButtonClickAction = {
116
+ readonly preset?: never;
117
+ readonly actionRef?: never;
118
+ /** Inline handler — code-only; dropped from JSON-derived configs. */
119
+ readonly action: AddonActionHandler;
120
+ };
121
+ type MatButtonClickNone = {
122
+ readonly preset?: never;
123
+ readonly actionRef?: never;
124
+ readonly action?: never;
125
+ };
126
+ type MatButtonClick = MatButtonClickPreset | MatButtonClickActionRef | MatButtonClickAction | MatButtonClickNone;
127
+ /**
128
+ * Content axis — XOR enforced at type level so an icon-only button is
129
+ * forced to declare `ariaLabel`. The three shapes:
130
+ *
131
+ * - `IconOnly` — just `icon`; `ariaLabel` is REQUIRED
132
+ * - `Labeled` — `label` set; `icon` and `ariaLabel` optional
133
+ * - `Decorative` — neither icon nor label
134
+ */
135
+ type MatButtonContentIconOnly = {
136
+ readonly icon: string;
137
+ readonly label?: never;
138
+ /** REQUIRED: icon-only buttons must carry an accessible label. */
139
+ readonly ariaLabel: DynamicText;
140
+ };
141
+ type MatButtonContentLabeled = {
142
+ readonly icon?: string;
143
+ readonly label: DynamicText;
144
+ readonly ariaLabel?: DynamicText;
145
+ };
146
+ type MatButtonContentDecorative = {
147
+ readonly icon?: never;
148
+ readonly label?: never;
149
+ readonly ariaLabel?: DynamicText;
150
+ };
151
+ type MatButtonContent = MatButtonContentIconOnly | MatButtonContentLabeled | MatButtonContentDecorative;
152
+ /**
153
+ * Interactive button addon for Material fields.
154
+ *
155
+ * Renders `<button mat-icon-button>` (icon-only) or `<button mat-button>`
156
+ * (labeled). Click dispatch (preset / actionRef / action precedence) lives
157
+ * on `NgForgeAddonAction`; this addon shape focuses on configuration.
158
+ *
159
+ * Type-level guarantees:
160
+ *
161
+ * - **Content axis (XOR):** `IconOnly` (icon + required ariaLabel) |
162
+ * `Labeled` (label, icon optional) | `Decorative` (neither). The IDE
163
+ * rejects icon-only configs that omit `ariaLabel`.
164
+ * - **Click axis (XOR):** exactly one of `preset` / `actionRef` / `action`,
165
+ * or none.
166
+ */
167
+ type MatButtonAddon = MatButtonBase & MatButtonContent & MatButtonClick;
168
+ /** Union of all Material-shipped addon kinds. */
169
+ type MatAddon = MatIconAddon | MatButtonAddon;
170
+ declare module '@ng-forge/dynamic-forms' {
171
+ interface DynamicFormAddonRegistry {
172
+ 'mat-icon': MatIconAddon;
173
+ 'mat-button': MatButtonAddon;
174
+ }
121
175
  }
122
176
 
123
177
  interface MatInputProps extends InputProps {
@@ -129,42 +183,63 @@ interface MatInputProps extends InputProps {
129
183
  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
130
184
  hint?: DynamicText;
131
185
  }
132
- type MatInputField = InputField<MatInputProps>;
186
+ /**
187
+ * Module-augmentable seam for adding custom addon kinds to `mat-input` at
188
+ * the type level. Pair with `withCustomAddon(...)` for the runtime side:
189
+ *
190
+ * ```ts
191
+ * declare module '@ng-forge/dynamic-forms-material' {
192
+ * interface MatAddonExtensions {
193
+ * 'my-rating': MyRatingAddon;
194
+ * }
195
+ * }
196
+ * ```
197
+ *
198
+ * Empty by default — the extension lookup resolves to `never` and contributes
199
+ * nothing to the union.
200
+ */
201
+ interface MatAddonExtensions {
202
+ }
203
+ type MatAddonExtension = MatAddonExtensions[keyof MatAddonExtensions];
204
+ /**
205
+ * Addon kinds accepted by `mat-input`.
206
+ *
207
+ * Material-specific kinds (`mat-icon`, `mat-button`) plus the universal
208
+ * `text` and `template` kinds. `component` is permitted at runtime via the
209
+ * broader `BaseAddon` union (and dropped in JSON-derived configs by the
210
+ * validator) but excluded here so the IDE narrows tightly to declarative
211
+ * shapes.
212
+ *
213
+ * To extend with custom kinds, augment `MatAddonExtensions`.
214
+ */
215
+ type MatInputAddon = MatIconAddon | MatButtonAddon | TextAddon | TemplateAddon | MatAddonExtension;
216
+ type MatInputField = InputField<MatInputProps> & {
217
+ addons?: ReadonlyArray<MatInputAddon>;
218
+ };
219
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
133
220
  type MatInputComponent = ValueFieldComponent<MatInputField>;
134
221
 
135
- declare class MatInputFieldComponent implements MatInputComponent {
222
+ declare class MatInputFieldComponent {
136
223
  private materialConfig;
137
- private readonly elementRef;
138
- readonly field: _angular_core.InputSignal<FieldTree<string>>;
139
- readonly key: _angular_core.InputSignal<string>;
140
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
141
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
142
- readonly className: _angular_core.InputSignal<string>;
143
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
224
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
225
+ protected readonly ngfa: _ng_forge_dynamic_forms_integration.TypedNgForgeAddons<MatInputAddon>;
144
226
  readonly props: _angular_core.InputSignal<MatInputProps | undefined>;
145
- readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
146
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
147
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
148
- constructor();
149
- readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
150
- readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
151
- readonly effectiveFloatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
152
- readonly effectiveHideRequiredMarker: _angular_core.Signal<boolean>;
153
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
154
- readonly showErrors: _angular_core.Signal<boolean>;
155
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
156
- /** Unique ID for the hint element, used for aria-describedby */
157
- protected readonly hintId: _angular_core.Signal<string>;
158
- /** Base ID for error elements, used for aria-describedby */
159
- protected readonly errorId: _angular_core.Signal<string>;
160
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
161
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
162
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
163
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
164
- /** aria-describedby: links to hint and error messages for screen readers */
165
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
227
+ /**
228
+ * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
229
+ * component level so `setInputIfDeclared` (which uses
230
+ * `reflectComponentType`) can write it.
231
+ */
232
+ readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
233
+ /** Per-instance type override populated by `toggle-password-visibility` preset. */
234
+ private readonly typeOverride;
235
+ readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
236
+ readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
237
+ readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
238
+ readonly hideRequiredMarker: _angular_core.Signal<boolean>;
239
+ /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */
240
+ protected readonly type: _angular_core.Signal<string>;
166
241
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatInputFieldComponent, never>;
167
- 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>;
242
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatInputFieldComponent, "df-mat-input", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }, { directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddons; inputs: {}; outputs: {}; }]>;
168
243
  }
169
244
 
170
245
  interface MatMultiCheckboxProps {
@@ -174,41 +249,20 @@ interface MatMultiCheckboxProps {
174
249
  color?: ThemePalette;
175
250
  }
176
251
  type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
252
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
177
253
  type MatMultiCheckboxComponent = ValueFieldComponent<MatMultiCheckboxField<ValueType>>;
178
254
 
179
- declare class MatMultiCheckboxFieldComponent implements MatMultiCheckboxComponent {
180
- private readonly elementRef;
181
- readonly field: _angular_core.InputSignal<FieldTree<ValueType[]>>;
182
- readonly key: _angular_core.InputSignal<string>;
183
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
184
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
185
- readonly className: _angular_core.InputSignal<string>;
186
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
255
+ declare class MatMultiCheckboxFieldComponent {
256
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType[]>;
187
257
  readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
188
258
  readonly props: _angular_core.InputSignal<MatMultiCheckboxProps | undefined>;
189
- readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
190
259
  valueViewModel: _angular_core.WritableSignal<FieldOption<ValueType>[]>;
191
260
  /** Computed map of checked option values for O(1) lookup in template */
192
261
  readonly checkedValuesMap: _angular_core.Signal<Record<string, boolean>>;
193
262
  constructor();
194
263
  onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void;
195
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
196
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
197
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
198
- readonly showErrors: _angular_core.Signal<boolean>;
199
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
200
- /** Unique ID for the hint element, used for aria-describedby */
201
- protected readonly hintId: _angular_core.Signal<string>;
202
- /** Base ID for error elements, used for aria-describedby */
203
- protected readonly errorId: _angular_core.Signal<string>;
204
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
205
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
206
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
207
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
208
- /** aria-describedby: links to hint and error messages for screen readers */
209
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
210
264
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatMultiCheckboxFieldComponent, never>;
211
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatMultiCheckboxFieldComponent, "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>;
265
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatMultiCheckboxFieldComponent, "df-mat-multi-checkbox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
212
266
  }
213
267
 
214
268
  interface MatRadioProps {
@@ -218,37 +272,15 @@ interface MatRadioProps {
218
272
  hint?: DynamicText;
219
273
  }
220
274
  type MatRadioField<T> = RadioField<T, MatRadioProps>;
275
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
221
276
  type MatRadioComponent = ValueFieldComponent<MatRadioField<ValueType>>;
222
277
 
223
- declare class MatRadioFieldComponent implements MatRadioComponent {
224
- private readonly elementRef;
225
- readonly field: _angular_core.InputSignal<FieldTree<ValueType>>;
226
- readonly key: _angular_core.InputSignal<string>;
227
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
228
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
229
- readonly className: _angular_core.InputSignal<string>;
230
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
278
+ declare class MatRadioFieldComponent {
279
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType>;
231
280
  readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
232
281
  readonly props: _angular_core.InputSignal<MatRadioProps | undefined>;
233
- readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
234
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
235
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
236
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
237
- readonly showErrors: _angular_core.Signal<boolean>;
238
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
239
- constructor();
240
- /** Unique ID for the hint element, used for aria-describedby */
241
- protected readonly hintId: _angular_core.Signal<string>;
242
- /** Base ID for error elements, used for aria-describedby */
243
- protected readonly errorId: _angular_core.Signal<string>;
244
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
245
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
246
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
247
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
248
- /** aria-describedby: links to hint and error messages for screen readers */
249
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
250
282
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatRadioFieldComponent, never>;
251
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatRadioFieldComponent, "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>;
283
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatRadioFieldComponent, "df-mat-radio", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
252
284
  }
253
285
 
254
286
  interface MatSelectProps extends SelectProps {
@@ -262,43 +294,21 @@ interface MatSelectProps extends SelectProps {
262
294
  hint?: DynamicText;
263
295
  }
264
296
  type MatSelectField<T> = SelectField<T, MatSelectProps>;
297
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
265
298
  type MatSelectComponent = ValueFieldComponent<MatSelectField<ValueType>>;
266
299
 
267
- declare class MatSelectFieldComponent implements MatSelectComponent {
300
+ declare class MatSelectFieldComponent {
268
301
  private materialConfig;
269
- private readonly elementRef;
270
- readonly field: _angular_core.InputSignal<FieldTree<ValueType>>;
271
- readonly key: _angular_core.InputSignal<string>;
272
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
273
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
274
- readonly className: _angular_core.InputSignal<string>;
275
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
302
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType>;
276
303
  readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
277
304
  readonly props: _angular_core.InputSignal<MatSelectProps | undefined>;
278
- readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
279
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
280
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
281
- readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
282
- readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
283
- readonly effectiveFloatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
284
- readonly effectiveHideRequiredMarker: _angular_core.Signal<boolean>;
285
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
286
- readonly showErrors: _angular_core.Signal<boolean>;
287
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
305
+ readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
306
+ readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
307
+ readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
308
+ readonly hideRequiredMarker: _angular_core.Signal<boolean>;
288
309
  defaultCompare: (value1: any, value2: any) => boolean;
289
- constructor();
290
- /** Unique ID for the hint element, used for aria-describedby */
291
- protected readonly hintId: _angular_core.Signal<string>;
292
- /** Base ID for error elements, used for aria-describedby */
293
- protected readonly errorId: _angular_core.Signal<string>;
294
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
295
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
296
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
297
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
298
- /** aria-describedby: links to hint and error messages for screen readers */
299
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
300
310
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent, never>;
301
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent, "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>;
311
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSelectFieldComponent, "df-mat-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
302
312
  }
303
313
 
304
314
  interface MatSliderProps {
@@ -311,37 +321,15 @@ interface MatSliderProps {
311
321
  step?: number;
312
322
  }
313
323
  type MatSliderField = SliderField<MatSliderProps>;
324
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
314
325
  type MatSliderComponent = ValueFieldComponent<MatSliderField>;
315
326
 
316
- declare class MatSliderFieldComponent implements MatSliderComponent {
317
- private readonly elementRef;
318
- readonly field: _angular_core.InputSignal<FieldTree<number>>;
319
- readonly key: _angular_core.InputSignal<string>;
320
- constructor();
321
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
322
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
323
- readonly className: _angular_core.InputSignal<string>;
324
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
327
+ declare class MatSliderFieldComponent {
328
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<number>;
325
329
  readonly step: _angular_core.InputSignal<number | undefined>;
326
330
  readonly props: _angular_core.InputSignal<MatSliderProps | undefined>;
327
- readonly meta: _angular_core.InputSignal<InputMeta | undefined>;
328
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
329
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
330
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
331
- readonly showErrors: _angular_core.Signal<boolean>;
332
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
333
- /** Unique ID for the hint element, used for aria-describedby */
334
- protected readonly hintId: _angular_core.Signal<string>;
335
- /** Base ID for error elements, used for aria-describedby */
336
- protected readonly errorId: _angular_core.Signal<string>;
337
- /** aria-required: true when field has required validation, null otherwise */
338
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
339
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
340
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
341
- /** aria-describedby: links to hint and error messages for screen readers */
342
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
343
331
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSliderFieldComponent, 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; }; "step": { "alias": "step"; "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
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatSliderFieldComponent, "df-mat-slider", never, { "step": { "alias": "step"; "required": false; "isSignal": true; }; "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
345
333
  }
346
334
 
347
335
  interface MatButtonProps {
@@ -349,7 +337,6 @@ interface MatButtonProps {
349
337
  type?: 'button' | 'submit' | 'reset';
350
338
  }
351
339
  type MatButtonField<TEvent extends FormEvent> = ButtonField<MatButtonProps, TEvent>;
352
- type MatButtonComponent<TEvent extends FormEvent> = FieldComponent<MatButtonField<TEvent>>;
353
340
  /**
354
341
  * Specific button field types with preconfigured events
355
342
  */
@@ -446,32 +433,14 @@ type ShiftArrayItemButtonField = Omit<MatButtonField<ShiftArrayItemEvent>, 'even
446
433
  arrayKey: string;
447
434
  };
448
435
 
449
- declare class MatButtonFieldComponent<TEvent extends FormEvent> implements MatButtonComponent<TEvent> {
450
- private readonly eventBus;
451
- private readonly arrayContext;
452
- readonly key: _angular_core.InputSignal<string>;
453
- readonly label: _angular_core.InputSignal<DynamicText>;
454
- readonly disabled: _angular_core.InputSignal<boolean>;
455
- readonly hidden: _angular_core.InputSignal<boolean>;
456
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
457
- readonly className: _angular_core.InputSignal<string>;
458
- /** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
459
- readonly event: _angular_core.InputSignal<FormEventConstructor<TEvent> | undefined>;
460
- readonly eventArgs: _angular_core.InputSignal<EventArgs | undefined>;
436
+ declare class MatButtonFieldComponent<TEvent extends FormEvent> {
437
+ protected readonly action: _ng_forge_dynamic_forms_integration.NgForgeAction<TEvent>;
461
438
  readonly props: _angular_core.InputSignal<MatButtonProps | undefined>;
462
- readonly eventContext: _angular_core.InputSignal<ArrayItemContext | undefined>;
463
- /** Resolved button type - defaults to 'button' if not specified in props */
464
- readonly buttonType: _angular_core.Signal<"submit" | "button" | "reset">;
439
+ readonly buttonType: _angular_core.Signal<"button" | "submit" | "reset">;
465
440
  readonly buttonTestId: _angular_core.Signal<string>;
466
- /**
467
- * Handle button click.
468
- * - For submit buttons (type="submit"): do nothing, native form submit handles it
469
- * - For other buttons: dispatch the configured event via EventBus
470
- */
471
441
  onClick(): void;
472
- private dispatchEvent;
473
442
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatButtonFieldComponent<any>, never>;
474
- 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>;
443
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatButtonFieldComponent<any>, "df-mat-button", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeActionHost; inputs: {}; outputs: {}; }]>;
475
444
  }
476
445
 
477
446
  interface MatTextareaProps extends TextareaProps {
@@ -483,66 +452,19 @@ interface MatTextareaProps extends TextareaProps {
483
452
  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
484
453
  }
485
454
  type MatTextareaField = TextareaField<MatTextareaProps>;
455
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
486
456
  type MatTextareaComponent = ValueFieldComponent<MatTextareaField>;
487
457
 
488
- declare class MatTextareaFieldComponent implements MatTextareaComponent {
458
+ declare class MatTextareaFieldComponent {
489
459
  private materialConfig;
490
- private readonly elementRef;
491
- readonly field: _angular_core.InputSignal<FieldTree<string>>;
492
- readonly key: _angular_core.InputSignal<string>;
493
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
494
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
495
- readonly className: _angular_core.InputSignal<string>;
496
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
460
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<string>;
497
461
  readonly props: _angular_core.InputSignal<MatTextareaProps | undefined>;
498
- readonly meta: _angular_core.InputSignal<TextareaMeta | undefined>;
499
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
500
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
501
- constructor();
502
- /**
503
- * Reference to the native textarea element.
504
- * Used to imperatively sync the readonly attribute since Angular Signal Forms'
505
- * [field] directive doesn't sync FieldState.readonly() to the DOM.
506
- */
507
- private readonly textareaRef;
508
- /**
509
- * Computed signal that extracts the readonly state from the field.
510
- * Used by the effect to reactively sync the readonly attribute to the DOM.
511
- */
512
- private readonly isReadonly;
513
- /**
514
- * Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
515
- * attribute to the DOM, even though FieldState.readonly() returns the correct value.
516
- * This effect imperatively sets/removes the readonly attribute on the native textarea
517
- * element whenever the readonly state changes.
518
- *
519
- * Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
520
- * NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
521
- *
522
- * Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
523
- *
524
- * @see https://github.com/angular/angular/issues/65897
525
- */
526
- private readonly syncReadonlyToDom;
527
- readonly effectiveAppearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
528
- readonly effectiveSubscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
529
- readonly effectiveFloatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
530
- readonly effectiveHideRequiredMarker: _angular_core.Signal<boolean>;
531
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
532
- readonly showErrors: _angular_core.Signal<boolean>;
533
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
534
- /** Unique ID for the hint element, used for aria-describedby */
535
- protected readonly hintId: _angular_core.Signal<string>;
536
- /** Base ID for error elements, used for aria-describedby */
537
- protected readonly errorId: _angular_core.Signal<string>;
538
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
539
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
540
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
541
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
542
- /** aria-describedby: links to hint and error messages for screen readers */
543
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
462
+ readonly appearance: _angular_core.Signal<_angular_material_form_field.MatFormFieldAppearance>;
463
+ readonly subscriptSizing: _angular_core.Signal<_angular_material_form_field.SubscriptSizing>;
464
+ readonly floatLabel: _angular_core.Signal<_angular_material_form_field.FloatLabelType>;
465
+ readonly hideRequiredMarker: _angular_core.Signal<boolean>;
544
466
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatTextareaFieldComponent, never>;
545
- 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>;
467
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatTextareaFieldComponent, "df-mat-textarea", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
546
468
  }
547
469
 
548
470
  interface MatToggleProps {
@@ -554,52 +476,16 @@ interface MatToggleProps {
554
476
  hideIcon?: boolean;
555
477
  }
556
478
  type MatToggleField = ToggleField<MatToggleProps>;
479
+ /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
557
480
  type MatToggleComponent = CheckedFieldComponent<MatToggleField>;
558
481
 
559
- declare class MatToggleFieldComponent implements MatToggleComponent {
482
+ declare class MatToggleFieldComponent {
560
483
  private materialConfig;
561
- private readonly elementRef;
562
- readonly field: _angular_core.InputSignal<FieldTree<boolean>>;
563
- readonly key: _angular_core.InputSignal<string>;
564
- readonly label: _angular_core.InputSignal<DynamicText | undefined>;
565
- readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
566
- readonly className: _angular_core.InputSignal<string>;
567
- readonly tabIndex: _angular_core.InputSignal<number | undefined>;
484
+ protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<boolean>;
568
485
  readonly props: _angular_core.InputSignal<MatToggleProps | undefined>;
569
- readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
570
- readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
571
- readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
572
- readonly effectiveDisableRipple: _angular_core.Signal<boolean>;
573
- readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
574
- readonly showErrors: _angular_core.Signal<boolean>;
575
- readonly errorsToDisplay: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
576
- constructor();
577
- /** Unique ID for the hint element, used for aria-describedby */
578
- protected readonly hintId: _angular_core.Signal<string>;
579
- /** Base ID for error elements, used for aria-describedby */
580
- protected readonly errorId: _angular_core.Signal<string>;
581
- /** aria-invalid: true when field is invalid AND touched, false otherwise */
582
- protected readonly ariaInvalid: _angular_core.Signal<boolean>;
583
- /** aria-required: true if field is required, null otherwise (to remove attribute) */
584
- protected readonly ariaRequired: _angular_core.Signal<true | null>;
585
- /** aria-describedby: links to hint and error messages for screen readers */
586
- protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
587
- /**
588
- * Workaround: Angular Material's MatSlideToggle does NOT propagate aria-required to its internal
589
- * button element. This effect imperatively sets/removes aria-required on the internal button.
590
- *
591
- * Uses afterRenderEffect to ensure DOM is ready before querying internal elements.
592
- */
593
- private readonly syncAriaRequiredToDom;
594
- /**
595
- * Workaround: Angular Material's MatSlideToggle does NOT propagate aria-describedby to its internal
596
- * button element. This effect imperatively sets/removes aria-describedby on the internal button.
597
- *
598
- * Uses afterRenderEffect to ensure DOM is ready before querying internal elements.
599
- */
600
- private readonly syncAriaDescribedByToDom;
486
+ readonly disableRipple: _angular_core.Signal<boolean>;
601
487
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatToggleFieldComponent, never>;
602
- 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>;
488
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatToggleFieldComponent, "df-mat-toggle", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeFieldHost; inputs: {}; outputs: {}; }]>;
603
489
  }
604
490
 
605
491
  /**
@@ -800,19 +686,29 @@ type MaterialConfigFeature = {
800
686
  ɵkind: 'material-config';
801
687
  ɵproviders: Provider[];
802
688
  };
803
- type MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialConfigFeature];
804
689
  /**
805
- * Configure dynamic forms with Material Design field types.
806
- * Provides all Material Design field types for use with provideDynamicForm.
690
+ * Default `withMaterialFields()` shape — field defs + the auto-included
691
+ * addons feature so `mat-icon` / `mat-button` work out of the box.
692
+ */
693
+ type MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature];
694
+ type MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, MaterialConfigFeature];
695
+ /**
696
+ * Configure dynamic forms with Material Design field types, with
697
+ * Material-shipped addon kinds (`mat-icon`, `mat-button`) auto-included so
698
+ * addons work out of the box.
699
+ *
700
+ * If you want field types WITHOUT addons (rare), pass them through
701
+ * `provideDynamicForm` directly and skip this helper. If you want addons
702
+ * WITHOUT the field types (also rare), call `withMaterialAddons()` standalone.
807
703
  *
808
704
  * @param config - Optional global configuration for Material form fields
809
705
  *
810
706
  * @example
811
707
  * ```typescript
812
- * // Application-level setup
708
+ * // Application-level setup — addons (mat-icon, mat-button) ship in automatically
813
709
  * import { ApplicationConfig } from '@angular/core';
814
- * import { provideDynamicForm } from '@ng-forge/dynamic-form';
815
- * import { withMaterialFields } from '@ng-forge/dynamic-form-material';
710
+ * import { provideDynamicForm } from '@ng-forge/dynamic-forms';
711
+ * import { withMaterialFields } from '@ng-forge/dynamic-forms-material';
816
712
  *
817
713
  * export const appConfig: ApplicationConfig = {
818
714
  * providers: [
@@ -836,11 +732,100 @@ type MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialConfigFeature];
836
732
  * };
837
733
  * ```
838
734
  *
839
- * @returns Array of field type definitions and optionally a config feature
735
+ * @returns Tuple of field type definitions, the addons feature, and
736
+ * optionally a config feature.
840
737
  */
841
- declare function withMaterialFields(): MaterialFieldTypes;
738
+ declare function withMaterialFields(): MaterialFieldsWithAddons;
842
739
  declare function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;
843
- declare function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldTypes | MaterialFieldsWithConfig;
740
+ declare function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;
741
+ /**
742
+ * Feature kind discriminant for the Material addons feature. Matches core's
743
+ * `'addons'` kind so providers flow through the standard addon-kind pipeline
744
+ * in `provideDynamicForm`.
745
+ */
746
+ type MaterialAddonsFeature = {
747
+ ɵkind: 'addons';
748
+ ɵproviders: Provider[];
749
+ };
750
+ /**
751
+ * Register Material-shipped addon kinds (`mat-icon`, `mat-button`) standalone.
752
+ *
753
+ * **Most users don't need this** — `withMaterialFields()` auto-includes
754
+ * these kinds. Call `withMaterialAddons()` directly only when you want
755
+ * Material addon kinds without the Material field types (e.g., a custom
756
+ * field set that wants to render `mat-icon` prefixes), or when you're
757
+ * stitching addons through a different DI scope.
758
+ *
759
+ * @example
760
+ * ```typescript
761
+ * // Custom field types + Material addon kinds.
762
+ * provideDynamicForm(
763
+ * ...myCustomFields(),
764
+ * withMaterialAddons(),
765
+ * );
766
+ * ```
767
+ *
768
+ * Adapter authors who need to override a kind with a customised renderer
769
+ * should call `withCustomAddon(...)` directly instead.
770
+ */
771
+ declare function withMaterialAddons(): MaterialAddonsFeature;
772
+
773
+ /**
774
+ * Renderer for the `mat-icon` addon kind.
775
+ *
776
+ * Outputs `<mat-icon>{icon}</mat-icon>` using Material Icons ligatures. The
777
+ * host is set `aria-hidden="true"` by default; if the addon supplies an
778
+ * `ariaLabel`, it is applied so the icon is announced by screen readers.
779
+ */
780
+ declare class MatIconAddonComponent {
781
+ readonly addon: _angular_core.InputSignal<MatIconAddon>;
782
+ /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every kind must declare it. */
783
+ readonly fieldInputs: _angular_core.InputSignal<WrapperFieldInputs | undefined>;
784
+ protected readonly ariaLabel: _angular_core.Signal<_ng_forge_dynamic_forms.DynamicText | undefined>;
785
+ protected readonly hasAriaLabel: _angular_core.Signal<boolean>;
786
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatIconAddonComponent, never>;
787
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatIconAddonComponent, "df-mat-icon-addon", never, { "addon": { "alias": "addon"; "required": true; "isSignal": true; }; "fieldInputs": { "alias": "fieldInputs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
788
+ }
789
+
790
+ /**
791
+ * Renderer for the `mat-button` addon kind.
792
+ *
793
+ * Renders `<button mat-icon-button>` when icon-only (no label), or
794
+ * `<button mat-button>` when labeled. Click dispatch (preset / actionRef /
795
+ * action precedence, multi-set warning, `disabled` / `loading` resolution)
796
+ * lives on `NgForgeAddonAction`; this component focuses on the visual layer.
797
+ */
798
+ declare class MatButtonAddonComponent {
799
+ protected readonly action: _ng_forge_dynamic_forms_integration.TypedNgForgeAddonAction<MatButtonAddon>;
800
+ /** Re-exposed for template binding — same signal stored on the directive. */
801
+ protected readonly addon: _angular_core.Signal<MatButtonAddon>;
802
+ protected readonly label: _angular_core.Signal<_ng_forge_dynamic_forms.DynamicText | undefined>;
803
+ protected readonly ariaLabel: _angular_core.Signal<_ng_forge_dynamic_forms.DynamicText | undefined>;
804
+ protected readonly isIconOnly: _angular_core.Signal<boolean>;
805
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatButtonAddonComponent, never>;
806
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MatButtonAddonComponent, "df-mat-button-addon", never, {}, {}, never, never, true, [{ directive: typeof _ng_forge_dynamic_forms_integration.NgForgeAddonAction; inputs: {}; outputs: {}; }]>;
807
+ }
808
+
809
+ /**
810
+ * Per-field writable signal that overrides the input's `type` attribute.
811
+ *
812
+ * Provided at the `mat-input` field component level. The button addon's
813
+ * `'toggle-password-visibility'` preset writes to it; the field component
814
+ * reads it to compute its effective `type`.
815
+ *
816
+ * Optional from a button's perspective — when the button is hosted inside a
817
+ * field that doesn't provide this token (e.g., textarea or a future
818
+ * non-input field), the toggle preset is a no-op.
819
+ *
820
+ * @example provided per-field:
821
+ * ```typescript
822
+ * @Component({
823
+ * providers: [{ provide: MAT_INPUT_TYPE_OVERRIDE, useValue: signal(undefined) }],
824
+ * })
825
+ * class MatInputFieldComponent { ... }
826
+ * ```
827
+ */
828
+ declare const MAT_INPUT_TYPE_OVERRIDE: InjectionToken<WritableSignal<string | undefined>>;
844
829
 
845
- export { MATERIAL_CONFIG, MATERIAL_FIELD_TYPES, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialFields };
846
- export type { AddArrayItemButtonField, InsertArrayItemButtonField, MatButtonField, MatButtonProps, MatCheckboxComponent, MatCheckboxField, MatCheckboxProps, MatDatepickerComponent, MatDatepickerField, MatDatepickerProps, MatFieldType, MatFormConfig, MatFormProps, 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, PopArrayItemButtonField, PrependArrayItemButtonField, RemoveArrayItemButtonField, ShiftArrayItemButtonField };
830
+ export { MATERIAL_CONFIG, MATERIAL_FIELD_TYPES, MAT_INPUT_TYPE_OVERRIDE, MatButtonAddonComponent, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatIconAddonComponent, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialAddons, withMaterialFields };
831
+ export type { AddArrayItemButtonField, InsertArrayItemButtonField, MatAddon, MatAddonExtensions, MatButtonAddon, MatButtonField, MatButtonProps, MatCheckboxComponent, MatCheckboxField, MatCheckboxProps, MatDatepickerComponent, MatDatepickerField, MatDatepickerProps, MatFieldType, MatFormConfig, MatFormProps, MatIconAddon, MatInputAddon, 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, PopArrayItemButtonField, PrependArrayItemButtonField, RemoveArrayItemButtonField, ShiftArrayItemButtonField };