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

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

@@ -1,13 +1,15 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, signal, inject, Injector, InjectionToken, ElementRef, DestroyRef, forwardRef, linkedSignal, model, isSignal } from '@angular/core';
-import { IonButton, IonCheckbox, IonNote, IonInput, IonModal, IonDatetime, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonIcon, IonSpinner, IonItem, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonRange, IonTextarea, IonToggle } from '@ionic/angular/standalone';
+import { input, computed, ChangeDetectionStrategy, Component, signal, inject, ElementRef, DestroyRef, forwardRef, linkedSignal, model, isSignal } from '@angular/core';
+import { IonButton, IonCheckbox, IonNote, IonInput, IonModal, IonDatetime, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonItem, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonRange, IonTextarea, IonToggle, IonIcon, IonSpinner } from '@ionic/angular/standalone';
 import { AsyncPipe } from '@angular/common';
 import * as i1 from '@ng-forge/dynamic-forms/integration';
-import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost, injectNgForgeField, NgForgeControl, NgForgeFieldHost, runPresetAction, injectNgForgeAddonAction, resolveDynamicValue, NgForgeAddonAction, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, NgForgeHostControl, DEFAULT_PROPS, ARRAY_CONTEXT, injectNonFieldLogicResolver, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS } from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost, injectNgForgeField, NgForgeControl, NgForgeFieldHost, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, NgForgeHostControl, 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 { FormField } from '@angular/forms/signals';
 import { format } from 'date-fns';
 import { DynamicFormLogger, DynamicFormError } from '@ng-forge/dynamic-forms';
 import { explicitEffect } from 'ngxtension/explicit-effect';
+import { IONIC_CONFIG, IONIC_INPUT_TYPE_OVERRIDE, IonicInlineButtonAddonComponent, runIonicPresetAction } from '@ng-forge/dynamic-forms-ionic/shared';
+export { IONIC_CONFIG, IONIC_INPUT_TYPE_OVERRIDE } from '@ng-forge/dynamic-forms-ionic/shared';
 
 class IonicButtonFieldComponent {
     action = injectNgForgeAction();
@@ -68,11 +70,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host([hidden]){display:none!important}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var ionicButton_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicButtonFieldComponent
-});
-
 
 class IonicCheckboxFieldComponent {
     ngf = injectNgForgeField();
@@ -130,11 +127,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var ionicCheckbox_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicCheckboxFieldComponent
-});
-
 class IonicDatepickerFieldComponent {
     ngf = injectNgForgeField();
     minDate = input(null, /* @ts-ignore */
@@ -319,83 +311,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", "ion-input{cursor:pointer}:host([hidden]){display:none!important}\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 ionicDatepicker_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicDatepickerFieldComponent
-});
-
-function runIonicPresetAction(preset, ctx, collaborators) {
-    return runPresetAction(preset, ctx, collaborators, 'Ionic', 'ion-input');
-}
-
-class IonicInlineButtonAddonComponent {
-    injector = inject(Injector);
-    action = injectNgForgeAddonAction();
-    addon = this.action.addon;
-    label = computed(() => this.addon().label, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    icon = computed(() => this.addon().icon, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    color = computed(() => this.addon().color, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    fill = computed(() => this.addon().fill ?? 'clear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
-    iconOnly = computed(() => !!this.icon() && !this.label(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
-            _ariaLabelSignal = signal(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ariaLabelSignal" }] : /* istanbul ignore next */ []));
-    resolvedAriaLabel = computed(() => this._ariaLabelSignal()?.() ?? undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
-    constructor() {
-        explicitEffect([this.ariaLabel], ([raw]) => {
-            if (raw === undefined) {
-                this._ariaLabelSignal.set(undefined);
-                return;
-            }
-            this._ariaLabelSignal.set(resolveDynamicValue(raw, undefined, this.injector));
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicInlineButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicInlineButtonAddonComponent, isStandalone: true, selector: "ion-button[df-ion-button-addon]", host: { listeners: { "click": "action.dispatch()" }, properties: { "attr.color": "color() ?? null", "attr.fill": "fill()", "attr.disabled": "action.disabled() || action.loading() ? \"true\" : null", "attr.aria-label": "resolvedAriaLabel() ?? null", "attr.aria-busy": "action.loading() || null" } }, hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
-    @if (action.loading()) {
-      <ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
-      <span class="df-ion-sr-only" role="status">Loading…</span>
-    } @else if (icon(); as ic) {
-      <ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
-    }
-    @if (label(); as lbl) {
-      {{ lbl | dynamicText | async }}
-    }
-  `, isInline: true, styles: [".df-ion-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"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicInlineButtonAddonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ion-button[df-ion-button-addon]', imports: [IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
-    @if (action.loading()) {
-      <ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
-      <span class="df-ion-sr-only" role="status">Loading…</span>
-    } @else if (icon(); as ic) {
-      <ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
-    }
-    @if (label(); as lbl) {
-      {{ lbl | dynamicText | async }}
-    }
-  `, host: {
-                                                '[attr.color]': 'color() ?? null',
-                        '[attr.fill]': 'fill()',
-                        '[attr.disabled]': 'action.disabled() || action.loading() ? "true" : null',
-                        '[attr.aria-label]': 'resolvedAriaLabel() ?? null',
-                        '[attr.aria-busy]': 'action.loading() || null',
-                        '(click)': 'action.dispatch()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-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"] }]
-        }], ctorParameters: () => [] });
-
-const IONIC_CONFIG = new InjectionToken('IONIC_CONFIG');
-
-const IONIC_INPUT_TYPE_OVERRIDE = new InjectionToken('IONIC_INPUT_TYPE_OVERRIDE');
-
 class IonicInputFieldComponent {
     elementRef = inject((ElementRef));
     ionicConfig = inject(IONIC_CONFIG, { optional: true });
@@ -593,11 +508,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     ], styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}:host{--df-ion-addon-prefix-outer-padding: 0;--df-ion-addon-prefix-inner-padding: .5rem;--df-ion-addon-suffix-inner-padding: .5rem;--df-ion-addon-suffix-outer-padding: 0}:host ::ng-deep ion-input [slot=start],:host ::ng-deep ion-input [slot=end]{display:inline-flex;align-items:center;align-self:center;line-height:1}:host ::ng-deep ion-input [slot=start] df-addon-slot,:host ::ng-deep ion-input [slot=end] df-addon-slot,:host ::ng-deep ion-input [slot=start] df-ion-icon-addon,:host ::ng-deep ion-input [slot=end] df-ion-icon-addon{display:inline-flex;align-items:center;line-height:1}:host ::ng-deep ion-input [slot=start]{padding-inline-start:var(--df-ion-addon-prefix-outer-padding);padding-inline-end:var(--df-ion-addon-prefix-inner-padding)}:host ::ng-deep ion-input [slot=end]{padding-inline-start:var(--df-ion-addon-suffix-inner-padding);padding-inline-end:var(--df-ion-addon-suffix-outer-padding)}:host ::ng-deep ion-input ion-icon{color:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
 
-var ionicInput_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicInputFieldComponent
-});
-
 class IonicMultiCheckboxFieldComponent {
     ngf = injectNgForgeField();
     options = input([], /* @ts-ignore */
@@ -726,11 +636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\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 ionicMultiCheckbox_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicMultiCheckboxFieldComponent
-});
-
 class IonicRadioFieldComponent {
     ngf = injectNgForgeField();
     options = input([], /* @ts-ignore */
@@ -818,11 +723,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\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 ionicRadio_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicRadioFieldComponent
-});
-
 class IonicSelectFieldComponent {
     ngf = injectNgForgeField();
     options = input([], /* @ts-ignore */
@@ -904,11 +804,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\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 ionicSelect_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicSelectFieldComponent
-});
-
 class IonicSliderFieldComponent {
     ngf = injectNgForgeField();
     step = input(/* @ts-ignore */
@@ -974,11 +869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\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 ionicSlider_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicSliderFieldComponent
-});
-
 class IonicTextareaFieldComponent {
     elementRef = inject((ElementRef));
     ngf = injectNgForgeField();
@@ -1063,11 +953,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var ionicTextarea_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicTextareaFieldComponent
-});
-
 class IonicToggleControlComponent {
                     checked = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -1203,11 +1088,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"] }]
         }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
-var ionicToggle_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: IonicToggleFieldComponent
-});
-
 
 const IonicField = {
     Input: 'input',
@@ -1276,10 +1156,20 @@ const BUTTON_FIELD_TYPES_BASE = {
     renderReadyWhen: [],
     valueHandling: 'exclude',
 };
+const loadInputComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/input').then(({ IonicInputFieldComponent }) => IonicInputFieldComponent);
+const loadSelectComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/select').then(({ IonicSelectFieldComponent }) => IonicSelectFieldComponent);
+const loadCheckboxComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/checkbox').then(({ IonicCheckboxFieldComponent }) => IonicCheckboxFieldComponent);
+const loadButtonComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/button').then(({ IonicButtonFieldComponent }) => IonicButtonFieldComponent);
+const loadTextareaComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/textarea').then(({ IonicTextareaFieldComponent }) => IonicTextareaFieldComponent);
+const loadRadioComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/radio').then(({ IonicRadioFieldComponent }) => IonicRadioFieldComponent);
+const loadMultiCheckboxComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/multi-checkbox').then(({ IonicMultiCheckboxFieldComponent }) => IonicMultiCheckboxFieldComponent);
+const loadDatepickerComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/datepicker').then(({ IonicDatepickerFieldComponent }) => IonicDatepickerFieldComponent);
+const loadSliderComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/slider').then(({ IonicSliderFieldComponent }) => IonicSliderFieldComponent);
+const loadToggleComponent = () => import('@ng-forge/dynamic-forms-ionic/lazy/toggle').then(({ IonicToggleFieldComponent }) => IonicToggleFieldComponent);
 const IONIC_FIELD_TYPES = [
     {
         name: IonicField.Input,
-        loadComponent: () => Promise.resolve().then(function () { return ionicInput_component; }),
+        loadComponent: loadInputComponent,
         mapper: valueFieldMapper,
         propsToMeta: ['type'],
         scope: ['text-input', 'numeric'],
@@ -1290,81 +1180,81 @@ const IONIC_FIELD_TYPES = [
     },
     {
         name: IonicField.Select,
-        loadComponent: () => Promise.resolve().then(function () { return ionicSelect_component; }),
+        loadComponent: loadSelectComponent,
         mapper: optionsFieldMapper,
         scope: 'single-select',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Checkbox,
-        loadComponent: () => Promise.resolve().then(function () { return ionicCheckbox_component; }),
+        loadComponent: loadCheckboxComponent,
         mapper: checkboxFieldMapper,
         scope: 'boolean',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Button,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: buttonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Submit,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: submitButtonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Next,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: nextButtonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Previous,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: previousButtonFieldMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.AddArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: addArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.PrependArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: prependArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.InsertArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: insertArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.RemoveArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: removeArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.PopArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: popArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.ShiftArrayItem,
-        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        loadComponent: loadButtonComponent,
         mapper: shiftArrayItemButtonMapper,
         ...BUTTON_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Textarea,
-        loadComponent: () => Promise.resolve().then(function () { return ionicTextarea_component; }),
+        loadComponent: loadTextareaComponent,
         mapper: valueFieldMapper,
         propsToMeta: ['rows'],
         scope: 'text-input',
@@ -1372,35 +1262,35 @@ const IONIC_FIELD_TYPES = [
     },
     {
         name: IonicField.Radio,
-        loadComponent: () => Promise.resolve().then(function () { return ionicRadio_component; }),
+        loadComponent: loadRadioComponent,
         mapper: optionsFieldMapper,
         scope: 'single-select',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.MultiCheckbox,
-        loadComponent: () => Promise.resolve().then(function () { return ionicMultiCheckbox_component; }),
+        loadComponent: loadMultiCheckboxComponent,
         mapper: optionsFieldMapper,
         scope: 'multi-select',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Datepicker,
-        loadComponent: () => Promise.resolve().then(function () { return ionicDatepicker_component; }),
+        loadComponent: loadDatepickerComponent,
         mapper: datepickerFieldMapper,
         scope: 'date',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Slider,
-        loadComponent: () => Promise.resolve().then(function () { return ionicSlider_component; }),
+        loadComponent: loadSliderComponent,
         mapper: valueFieldMapper,
         scope: 'numeric',
         ...VALUE_FIELD_TYPES_BASE,
     },
     {
         name: IonicField.Toggle,
-        loadComponent: () => Promise.resolve().then(function () { return ionicToggle_component; }),
+        loadComponent: loadToggleComponent,
         mapper: checkboxFieldMapper,
         scope: 'boolean',
         ...VALUE_FIELD_TYPES_BASE,
@@ -1408,8 +1298,13 @@ const IONIC_FIELD_TYPES = [
 ];
 
 
+const IONIC_FIELD_ERRORS_WRAPPER = {
+    wrapperName: 'field-errors',
+    loadComponent: () => import('./ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-Dl3heov4.mjs'),
+    rendersFieldErrors: true,
+};
 function withIonicFields(config) {
-            const base = [...IONIC_FIELD_TYPES, withIonicAddons()];
+            const base = [...IONIC_FIELD_TYPES, withIonicAddons(), IONIC_FIELD_ERRORS_WRAPPER];
     if (config) {
         base.push({
             ɵkind: 'ionic-config',
@@ -1422,7 +1317,7 @@ function withIonicFields(config) {
 /* -- Ionic addon types ------------------------------------------------- */
 const ION_ICON_KIND = {
     type: 'ion-icon',
-    loadComponent: () => Promise.resolve().then(function () { return ionIconAddon_component; }).then((m) => m.IonicIconAddonComponent),
+    loadComponent: () => import('@ng-forge/dynamic-forms-ionic/lazy/addon-icon').then((m) => m.IonicIconAddonComponent),
     validate: (addon, fieldKey) => {
         if (typeof addon.icon !== 'string' || addon.icon.length === 0) {
             throw new DynamicFormError(`Addon type 'ion-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);
@@ -1431,7 +1326,7 @@ const ION_ICON_KIND = {
 };
 const ION_BUTTON_KIND = {
     type: 'ion-button',
-    loadComponent: () => Promise.resolve().then(function () { return ionButtonAddon_component; }).then((m) => m.IonicButtonAddonComponent),
+    loadComponent: () => import('@ng-forge/dynamic-forms-ionic/lazy/addon-button').then((m) => m.IonicButtonAddonComponent),
     validate: (addon, fieldKey) => {
                         const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);
         if (set.length > 1) {
@@ -1517,11 +1412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-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 ionButtonAddon_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  IonicButtonAddonComponent: IonicButtonAddonComponent
-});
-
 class IonicIconAddonComponent {
     addon = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
@@ -1549,12 +1439,7 @@ 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 ionIconAddon_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  IonicIconAddonComponent: IonicIconAddonComponent
-});
-
 
 
-export { IONIC_CONFIG, IONIC_FIELD_TYPES, IONIC_INPUT_TYPE_OVERRIDE, IonicButtonAddonComponent, IonicButtonFieldComponent, IonicCheckboxFieldComponent, IonicDatepickerFieldComponent, IonicField, IonicIconAddonComponent, IonicInputFieldComponent, IonicMultiCheckboxFieldComponent, IonicRadioFieldComponent, IonicSelectFieldComponent, IonicSliderFieldComponent, IonicTextareaFieldComponent, IonicToggleFieldComponent, withIonicAddons, withIonicFields };
+export { IONIC_FIELD_TYPES, IonicButtonAddonComponent, IonicButtonFieldComponent, IonicCheckboxFieldComponent, IonicDatepickerFieldComponent, IonicField, IonicIconAddonComponent, IonicInputFieldComponent, IonicMultiCheckboxFieldComponent, IonicRadioFieldComponent, IonicSelectFieldComponent, IonicSliderFieldComponent, IonicTextareaFieldComponent, IonicToggleFieldComponent, withIonicAddons, withIonicFields };
 //# sourceMappingURL=ng-forge-dynamic-forms-ionic.mjs.map