@ng-forge/dynamic-forms-material 1.2.0-next.5 → 1.2.0-next.7

package/fesm2022/ng-forge-dynamic-forms-material.mjs

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, Component, signal, forwardRef, linkedSignal, isSignal } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, signal, forwardRef, linkedSignal, isSignal } from '@angular/core';
 import { FormField } from '@angular/forms/signals';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i1 from '@ng-forge/dynamic-forms/integration';
-import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost, runPresetAction, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, injectNgForgeAction, NgForgeActionHost, DEFAULT_PROPS, ARRAY_CONTEXT, injectNonFieldLogicResolver, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS, injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, injectNgForgeAction, NgForgeActionHost, DEFAULT_PROPS, ARRAY_CONTEXT, injectNonFieldLogicResolver, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS, injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
 import { MatError, MatInput, MatHint } from '@angular/material/input';
 import { AsyncPipe } from '@angular/common';
+import { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE, runMatPresetAction } from '@ng-forge/dynamic-forms-material/shared';
+export { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE } from '@ng-forge/dynamic-forms-material/shared';
 import { MatFormField, MatLabel, MatSuffix, MatError as MatError$1, MatPrefix } from '@angular/material/form-field';
 import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
 import { provideNativeDateAdapter } from '@angular/material/core';
@@ -19,8 +21,6 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { MatIcon } from '@angular/material/icon';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
-const MATERIAL_CONFIG = new InjectionToken('MATERIAL_CONFIG');
-
 class MatCheckboxFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     ngf = injectNgForgeField();
@@ -84,11 +84,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matCheckbox_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatCheckboxFieldComponent
-});
-
 class MatDatepickerFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     ngf = injectNgForgeField();
@@ -198,17 +193,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"] }]
         }], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matDatepicker_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatDatepickerFieldComponent
-});
-
-function runMatPresetAction(preset, ctx, collaborators) {
-    return runPresetAction(preset, ctx, collaborators, 'Material', 'mat-input');
-}
-
-const MAT_INPUT_TYPE_OVERRIDE = new InjectionToken('MAT_INPUT_TYPE_OVERRIDE');
-
 class MatInputFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     ngf = injectNgForgeField();
@@ -391,11 +375,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     ], styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}:host([hidden]){display:none!important}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
 
-var matInput_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatInputFieldComponent
-});
-
 class MatMultiCheckboxFieldComponent {
     ngf = injectNgForgeField();
     options = input([], /* @ts-ignore */
@@ -520,11 +499,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatMultiCheckboxFieldComponent
-});
-
 class MatRadioFieldComponent {
     ngf = injectNgForgeField();
     options = input([], /* @ts-ignore */
@@ -605,11 +579,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matRadio_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatRadioFieldComponent
-});
-
 class MatSelectFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     ngf = injectNgForgeField();
@@ -702,11 +671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matSelect_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatSelectFieldComponent
-});
-
 class MatSliderFieldComponent {
     ngf = injectNgForgeField();
     step = input(/* @ts-ignore */
@@ -771,11 +735,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", ".slider-container{width:100%}\n"] }]
         }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matSlider_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatSliderFieldComponent
-});
-
 class MatButtonFieldComponent {
     action = injectNgForgeAction();
     props = input(/* @ts-ignore */
@@ -825,11 +784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "button{min-width:fit-content}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matButton_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatButtonFieldComponent
-});
-
 
 class MatTextareaFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
@@ -910,11 +864,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matTextarea_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatTextareaFieldComponent
-});
-
 class MatToggleFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     ngf = injectNgForgeField();
@@ -978,11 +927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var matToggle_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: MatToggleFieldComponent
-});
-
 
 const MatField = {
     Input: 'input',
@@ -1051,10 +995,20 @@ const BUTTON_FIELD_TYPES_BASE = {
     renderReadyWhen: [],
     valueHandling: 'exclude',
 };
+const loadInputComponent = () => import('@ng-forge/dynamic-forms-material/lazy/input').then(({ MatInputFieldComponent }) => MatInputFieldComponent);
+const loadSelectComponent = () => import('@ng-forge/dynamic-forms-material/lazy/select').then(({ MatSelectFieldComponent }) => MatSelectFieldComponent);
+const loadCheckboxComponent = () => import('@ng-forge/dynamic-forms-material/lazy/checkbox').then(({ MatCheckboxFieldComponent }) => MatCheckboxFieldComponent);
+const loadButtonComponent = () => import('@ng-forge/dynamic-forms-material/lazy/button').then(({ MatButtonFieldComponent }) => MatButtonFieldComponent);
+const loadTextareaComponent = () => import('@ng-forge/dynamic-forms-material/lazy/textarea').then(({ MatTextareaFieldComponent }) => MatTextareaFieldComponent);
+const loadRadioComponent = () => import('@ng-forge/dynamic-forms-material/lazy/radio').then(({ MatRadioFieldComponent }) => MatRadioFieldComponent);
+const loadMultiCheckboxComponent = () => import('@ng-forge/dynamic-forms-material/lazy/multi-checkbox').then(({ MatMultiCheckboxFieldComponent }) => MatMultiCheckboxFieldComponent);
+const loadDatepickerComponent = () => import('@ng-forge/dynamic-forms-material/lazy/datepicker').then(({ MatDatepickerFieldComponent }) => MatDatepickerFieldComponent);
+const loadSliderComponent = () => import('@ng-forge/dynamic-forms-material/lazy/slider').then(({ MatSliderFieldComponent }) => MatSliderFieldComponent);
+const loadToggleComponent = () => import('@ng-forge/dynamic-forms-material/lazy/toggle').then(({ MatToggleFieldComponent }) => MatToggleFieldComponent);
 const MATERIAL_FIELD_TYPES = [
     {
         name: MatField.Input,
-        loadComponent: () => Promise.resolve().then(function () { return matInput_component; }),
+        loadComponent: loadInputComponent,
         mapper: valueFieldMapper,
         propsToMeta: ['type'],
         scope: ['text-input', 'numeric'],
@@ -1065,81 +1019,81 @@ const MATERIAL_FIELD_TYPES = [
     },
     {
         name: MatField.Select,
-        loadComponent: () => Promise.resolve().then(function () { return matSelect_component; }),
+        loadComponent: loadSelectComponent,
         mapper: optionsFieldMapper,
         scope: 'single-select',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Checkbox,
-        loadComponent: () => Promise.resolve().then(function () { return matCheckbox_component; }),
+        loadComponent: loadCheckboxComponent,
         mapper: checkboxFieldMapper,
         scope: 'boolean',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Button,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: buttonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Submit,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: submitButtonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Next,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: nextButtonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Previous,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: previousButtonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.AddArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: addArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.PrependArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: prependArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.InsertArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: insertArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.RemoveArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: removeArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.PopArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: popArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.ShiftArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: shiftArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Textarea,
-        loadComponent: () => Promise.resolve().then(function () { return matTextarea_component; }),
+        loadComponent: loadTextareaComponent,
         mapper: valueFieldMapper,
         propsToMeta: ['rows', 'cols'],
         scope: 'text-input',
@@ -1147,35 +1101,35 @@ const MATERIAL_FIELD_TYPES = [
     },
     {
         name: MatField.Radio,
-        loadComponent: () => Promise.resolve().then(function () { return matRadio_component; }),
+        loadComponent: loadRadioComponent,
         mapper: optionsFieldMapper,
         scope: 'single-select',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: MatField.MultiCheckbox,
-        loadComponent: () => Promise.resolve().then(function () { return matMultiCheckbox_component; }),
+        loadComponent: loadMultiCheckboxComponent,
         mapper: optionsFieldMapper,
         scope: 'multi-select',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Datepicker,
-        loadComponent: () => Promise.resolve().then(function () { return matDatepicker_component; }),
+        loadComponent: loadDatepickerComponent,
         mapper: datepickerFieldMapper,
         scope: 'date',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Slider,
-        loadComponent: () => Promise.resolve().then(function () { return matSlider_component; }),
+        loadComponent: loadSliderComponent,
         mapper: valueFieldMapper,
         scope: 'numeric',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: MatField.Toggle,
-        loadComponent: () => Promise.resolve().then(function () { return matToggle_component; }),
+        loadComponent: loadToggleComponent,
         mapper: checkboxFieldMapper,
         scope: 'boolean',
         ...VALUE_FIELD_TYPES_BASE,
@@ -1183,8 +1137,13 @@ const MATERIAL_FIELD_TYPES = [
 ];
 
 
+const MATERIAL_FIELD_ERRORS_WRAPPER = {
+    wrapperName: 'field-errors',
+    loadComponent: () => import('./ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-QsDJRuUx.mjs'),
+    rendersFieldErrors: true,
+};
 function withMaterialFields(config) {
-            const base = [...MATERIAL_FIELD_TYPES, withMaterialAddons()];
+            const base = [...MATERIAL_FIELD_TYPES, withMaterialAddons(), MATERIAL_FIELD_ERRORS_WRAPPER];
     if (config) {
         base.push({
             ɵkind: 'material-config',
@@ -1197,7 +1156,7 @@ function withMaterialFields(config) {
 /* -- Material addon types ----------------------------------------------- */
 const MAT_ICON_KIND = {
     type: 'mat-icon',
-    loadComponent: () => Promise.resolve().then(function () { return matIconAddon_component; }).then((m) => m.MatIconAddonComponent),
+    loadComponent: () => import('@ng-forge/dynamic-forms-material/lazy/addon-icon').then((m) => m.MatIconAddonComponent),
     validate: (addon, fieldKey) => {
         if (typeof addon.icon !== 'string' || addon.icon.length === 0) {
             throw new DynamicFormError(`Addon type 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);
@@ -1206,7 +1165,7 @@ const MAT_ICON_KIND = {
 };
 const MAT_BUTTON_KIND = {
     type: 'mat-button',
-    loadComponent: () => Promise.resolve().then(function () { return matButtonAddon_component; }).then((m) => m.MatButtonAddonComponent),
+    loadComponent: () => import('@ng-forge/dynamic-forms-material/lazy/addon-button').then((m) => m.MatButtonAddonComponent),
     validate: (addon, fieldKey) => {
                         const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);
         if (set.length > 1) {
@@ -1252,11 +1211,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }], propDecorators: { addon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addon", required: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
 
-var matIconAddon_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  MatIconAddonComponent: MatIconAddonComponent
-});
-
 class MatButtonAddonComponent {
     action = injectNgForgeAddonAction();
         addon = this.action.addon;
@@ -1351,12 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-mat-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }] });
 
-var matButtonAddon_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  MatButtonAddonComponent: MatButtonAddonComponent
-});
-
 
 
-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 };
+export { MATERIAL_FIELD_TYPES, MatButtonAddonComponent, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatIconAddonComponent, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialAddons, withMaterialFields };
 //# sourceMappingURL=ng-forge-dynamic-forms-material.mjs.map