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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-forge/dynamic-forms-material",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Angular Material integration for @ng-forge/dynamic-forms. Pre-built Material Design form components.",
   "type": "module",
   "license": "MIT",
@@ -23,16 +23,16 @@
     "form-builder",
     "ng-forge"
   ],
-  "sideEffects": false,
+  "sideEffects": true,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "peerDependencies": {
-    "@angular/common": ">=21.0.7",
-    "@angular/core": ">=21.0.7",
-    "@angular/forms": ">=21.0.7",
-    "@angular/material": ">=21.0.5",
-    "@ng-forge/dynamic-forms": "~0.3.0",
+    "@angular/common": "~21.1.0",
+    "@angular/core": "~21.1.0",
+    "@angular/forms": "~21.1.0",
+    "@angular/material": "~21.1.0",
+    "@ng-forge/dynamic-forms": "~0.4.0",
     "rxjs": ">=7.0.0"
   },
   "module": "fesm2022/ng-forge-dynamic-forms-material.mjs",

package/types/ng-forge-dynamic-forms-material.d.ts

@@ -3,7 +3,7 @@ import { CheckboxField, DatepickerField, DatepickerProps, InputMeta, InputField,
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Provider } from '@angular/core';
 import { FieldTree } from '@angular/forms/signals';
-import { DynamicText, CheckedFieldComponent, FieldMeta, ValidationMessages, ValueFieldComponent, ValueType, FieldOption, FormEvent, FieldDef, LogicConfig, FieldComponent, FormEventConstructor, ArrayItemContext, FieldTypeDefinition } from '@ng-forge/dynamic-forms';
+import { DynamicText, CheckedFieldComponent, FieldMeta, ValidationMessages, ValueFieldComponent, ValueType, FieldOption, FormEvent, FieldDef, LogicConfig, FieldComponent, FormEventConstructor, ArrayItemContext, FieldTypeDefinition, NarrowFields, RegisteredFieldTypes, InferFormValue, FormConfig } from '@ng-forge/dynamic-forms';
 import { ThemePalette } from '@angular/material/core';
 import * as _angular_material_form_field from '@angular/material/form-field';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
@@ -45,7 +45,7 @@ declare class MatCheckboxFieldComponent implements MatCheckboxComponent {
     /** aria-required: true if field is required, null otherwise (to remove attribute) */
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     /** aria-describedby: links to hint and error messages for screen readers */
-    protected readonly ariaDescribedBy: _angular_core.Signal<string>;
+    protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
     /**
      * Workaround: Angular Material's MatCheckbox does NOT set aria-required on its internal
      * input element when [required] is passed, even though it sets the native required attribute.
@@ -53,8 +53,17 @@ declare class MatCheckboxFieldComponent implements MatCheckboxComponent {
      *
      * Bug: MatCheckbox sets `required` attribute but not `aria-required` for screen readers.
      * @see https://github.com/angular/components/issues/XXXXX (TODO: file issue)
+     *
+     * Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
      */
     private readonly syncAriaRequiredToDom;
+    /**
+     * Workaround: Angular Material's MatCheckbox does NOT propagate aria-describedby to its internal
+     * input element. This effect imperatively sets/removes aria-describedby on the internal input.
+     *
+     * Uses afterRenderEffect to ensure DOM is ready before querying internal elements.
+     */
+    private readonly syncAriaDescribedByToDom;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatCheckboxFieldComponent, never>;
     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>;
 }
@@ -183,22 +192,24 @@ interface MatMultiCheckboxProps {
     color?: ThemePalette;
 }
 type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
-type MatMultiCheckboxComponent<T> = ValueFieldComponent<MatMultiCheckboxField<T>>;
+type MatMultiCheckboxComponent = ValueFieldComponent<MatMultiCheckboxField<ValueType>>;
 
-declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements MatMultiCheckboxComponent<T> {
+declare class MatMultiCheckboxFieldComponent implements MatMultiCheckboxComponent {
     private readonly elementRef;
-    readonly field: _angular_core.InputSignal<FieldTree<T[]>>;
+    readonly field: _angular_core.InputSignal<FieldTree<ValueType[]>>;
     readonly key: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<DynamicText | undefined>;
     readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
     readonly className: _angular_core.InputSignal<string>;
     readonly tabIndex: _angular_core.InputSignal<number | undefined>;
-    readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
+    readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
     readonly props: _angular_core.InputSignal<MatMultiCheckboxProps | undefined>;
     readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
-    valueViewModel: _angular_core.WritableSignal<FieldOption<T>[]>;
+    valueViewModel: _angular_core.WritableSignal<FieldOption<ValueType>[]>;
+    /** Computed map of checked option values for O(1) lookup in template */
+    readonly checkedValuesMap: _angular_core.Signal<Record<string, boolean>>;
     constructor();
-    onCheckboxChange(option: FieldOption<T>, checked: boolean): void;
+    onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void;
     readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly resolvedErrors: _angular_core.Signal<_ng_forge_dynamic_forms_integration.ResolvedError[]>;
@@ -214,8 +225,8 @@ declare class MatMultiCheckboxFieldComponent<T extends ValueType> implements Mat
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     /** aria-describedby: links to hint and error messages for screen readers */
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatMultiCheckboxFieldComponent<any>, never>;
-    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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatMultiCheckboxFieldComponent, never>;
+    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>;
 }
 
 interface MatRadioProps {
@@ -225,17 +236,17 @@ interface MatRadioProps {
     hint?: DynamicText;
 }
 type MatRadioField<T> = RadioField<T, MatRadioProps>;
-type MatRadioComponent<T> = ValueFieldComponent<MatRadioField<T>>;
+type MatRadioComponent = ValueFieldComponent<MatRadioField<ValueType>>;
 
-declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
+declare class MatRadioFieldComponent implements MatRadioComponent {
     private readonly elementRef;
-    readonly field: _angular_core.InputSignal<FieldTree<T>>;
+    readonly field: _angular_core.InputSignal<FieldTree<ValueType>>;
     readonly key: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<DynamicText | undefined>;
     readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
     readonly className: _angular_core.InputSignal<string>;
     readonly tabIndex: _angular_core.InputSignal<number | undefined>;
-    readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
+    readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
     readonly props: _angular_core.InputSignal<MatRadioProps | undefined>;
     readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
     readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
@@ -254,32 +265,32 @@ declare class MatRadioFieldComponent<T> implements MatRadioComponent<T> {
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     /** aria-describedby: links to hint and error messages for screen readers */
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatRadioFieldComponent<any>, never>;
-    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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatRadioFieldComponent, never>;
+    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>;
 }
 
-interface MatSelectProps<T> extends SelectProps {
+interface MatSelectProps extends SelectProps {
     appearance?: MatFormFieldAppearance;
     multiple?: boolean;
     panelMaxHeight?: string;
     subscriptSizing?: SubscriptSizing;
-    compareWith?: (o1: T, o2: T) => boolean;
+    compareWith?: (o1: ValueType, o2: ValueType) => boolean;
     hint?: DynamicText;
 }
-type MatSelectField<T> = SelectField<T, MatSelectProps<T>>;
-type MatSelectComponent<T> = ValueFieldComponent<MatSelectField<T>>;
+type MatSelectField<T> = SelectField<T, MatSelectProps>;
+type MatSelectComponent = ValueFieldComponent<MatSelectField<ValueType>>;
 
-declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
+declare class MatSelectFieldComponent implements MatSelectComponent {
     private materialConfig;
     private readonly elementRef;
-    readonly field: _angular_core.InputSignal<FieldTree<T>>;
+    readonly field: _angular_core.InputSignal<FieldTree<ValueType>>;
     readonly key: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<DynamicText | undefined>;
     readonly placeholder: _angular_core.InputSignal<DynamicText | undefined>;
     readonly className: _angular_core.InputSignal<string>;
     readonly tabIndex: _angular_core.InputSignal<number | undefined>;
-    readonly options: _angular_core.InputSignal<FieldOption<T>[]>;
-    readonly props: _angular_core.InputSignal<MatSelectProps<T> | undefined>;
+    readonly options: _angular_core.InputSignal<FieldOption<ValueType>[]>;
+    readonly props: _angular_core.InputSignal<MatSelectProps | undefined>;
     readonly meta: _angular_core.InputSignal<FieldMeta | undefined>;
     readonly validationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
     readonly defaultValidationMessages: _angular_core.InputSignal<ValidationMessages | undefined>;
@@ -300,8 +311,8 @@ declare class MatSelectFieldComponent<T> implements MatSelectComponent<T> {
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     /** aria-describedby: links to hint and error messages for screen readers */
     protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent<any>, never>;
-    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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectFieldComponent, never>;
+    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>;
 }
 
 interface MatSliderProps {
@@ -489,6 +500,8 @@ declare class MatTextareaFieldComponent implements MatTextareaComponent {
      * Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
      * NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
      *
+     * Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
+     *
      * @see https://github.com/angular/angular/issues/65897
      */
     private readonly syncReadonlyToDom;
@@ -549,7 +562,21 @@ declare class MatToggleFieldComponent implements MatToggleComponent {
     /** aria-required: true if field is required, null otherwise (to remove attribute) */
     protected readonly ariaRequired: _angular_core.Signal<true | null>;
     /** aria-describedby: links to hint and error messages for screen readers */
-    protected readonly ariaDescribedBy: _angular_core.Signal<string>;
+    protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
+    /**
+     * Workaround: Angular Material's MatSlideToggle does NOT propagate aria-required to its internal
+     * button element. This effect imperatively sets/removes aria-required on the internal button.
+     *
+     * Uses afterRenderEffect to ensure DOM is ready before querying internal elements.
+     */
+    private readonly syncAriaRequiredToDom;
+    /**
+     * Workaround: Angular Material's MatSlideToggle does NOT propagate aria-describedby to its internal
+     * button element. This effect imperatively sets/removes aria-describedby on the internal button.
+     *
+     * Uses afterRenderEffect to ensure DOM is ready before querying internal elements.
+     */
+    private readonly syncAriaDescribedByToDom;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatToggleFieldComponent, never>;
     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>;
 }
@@ -562,8 +589,24 @@ declare const MATERIAL_FIELD_TYPES: FieldTypeDefinition[];
 
 /**
  * Configuration options for Material Design form fields.
- * These settings will be applied as defaults to all Material form fields
- * unless overridden by individual field props.
+ *
+ * These settings can be applied at two levels:
+ * - **Library-level**: Via `withMaterialFields({ ... })` - applies to all forms
+ * - **Form-level**: Via `defaultProps` in form config - applies to a specific form
+ *
+ * The cascade hierarchy is: Library-level → Form-level → Field-level
+ *
+ * @example
+ * ```typescript
+ * // Library-level (in app config)
+ * provideDynamicForms(withMaterialFields({ appearance: 'outline' }))
+ *
+ * // Form-level (in form config)
+ * const config: MatFormConfig = {
+ *   defaultProps: { appearance: 'fill' },
+ *   fields: [...]
+ * };
+ * ```
  */
 interface MaterialConfig {
     /**
@@ -581,6 +624,16 @@ interface MaterialConfig {
      * @default false
      */
     disableRipple?: boolean;
+    /**
+     * Default color theme for form controls (checkboxes, radios, sliders, toggles)
+     * @default 'primary'
+     */
+    color?: ThemePalette;
+    /**
+     * Default label position for checkboxes and radios
+     * @default 'after'
+     */
+    labelPosition?: 'before' | 'after';
 }
 
 /**
@@ -629,6 +682,51 @@ declare const MatField: {
 };
 type MatFieldType = (typeof MatField)[keyof typeof MatField];
 
+/**
+ * Material-specific props that can be set at form level and cascade to all fields.
+ *
+ * This is the same type as `MaterialConfig` used in `withMaterialFields()`.
+ * Using a single type ensures consistency between library-level and form-level configuration.
+ *
+ * The cascade hierarchy is: Library-level → Form-level → Field-level
+ *
+ * @example
+ * ```typescript
+ * const config: MatFormConfig = {
+ *   defaultProps: {
+ *     appearance: 'outline',
+ *     subscriptSizing: 'dynamic',
+ *     color: 'accent',
+ *   },
+ *   fields: [
+ *     { type: 'mat-input', key: 'name', label: 'Name' },
+ *   ],
+ * };
+ * ```
+ */
+type MatFormProps = MaterialConfig;
+/**
+ * Material-specific FormConfig with type-safe defaultProps.
+ *
+ * Use this type alias when defining form configurations with Material Design components
+ * to get IDE autocomplete and type checking for `defaultProps`.
+ *
+ * @example
+ * ```typescript
+ * const formConfig: MatFormConfig = {
+ *   defaultProps: {
+ *     appearance: 'outline',
+ *     subscriptSizing: 'dynamic',
+ *   },
+ *   fields: [
+ *     { type: 'mat-input', key: 'name', label: 'Name' },  // Uses form defaultProps
+ *     { type: 'mat-input', key: 'email', props: { appearance: 'fill' } },  // Override
+ *   ],
+ * };
+ * ```
+ */
+type MatFormConfig<TFields extends NarrowFields | RegisteredFieldTypes[] = RegisteredFieldTypes[], TValue = InferFormValue<TFields extends readonly RegisteredFieldTypes[] ? TFields : RegisteredFieldTypes[]>> = FormConfig<TFields, TValue, MatFormProps>;
+
 /**
  * Module augmentation for @ng-forge/dynamic-form
  * This file augments the FieldRegistryLeaves interface to include
@@ -722,4 +820,4 @@ declare module '@ng-forge/dynamic-forms' {
 }
 
 export { MATERIAL_CONFIG, MATERIAL_FIELD_TYPES, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialFields };
-export type { AddArrayItemButtonField, MatButtonField, MatButtonProps, MatCheckboxComponent, MatCheckboxField, MatCheckboxProps, MatDatepickerComponent, MatDatepickerField, MatDatepickerProps, MatFieldType, MatInputComponent, MatInputField, MatInputProps, MatMultiCheckboxComponent, MatMultiCheckboxField, MatMultiCheckboxProps, MatNextButtonField, MatPreviousButtonField, MatRadioComponent, MatRadioField, MatRadioProps, MatSelectComponent, MatSelectField, MatSelectProps, MatSliderComponent, MatSliderField, MatSliderProps, MatSubmitButtonField, MatTextareaComponent, MatTextareaField, MatTextareaProps, MatToggleComponent, MatToggleField, MatToggleProps, MaterialConfig, RemoveArrayItemButtonField };
+export type { AddArrayItemButtonField, 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, RemoveArrayItemButtonField };