@ng-forge/dynamic-forms-ionic 1.2.0-next.6 → 1.2.0-next.8

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

@@ -0,0 +1,211 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, DestroyRef, signal, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { IonInput, IonNote } from '@ionic/angular/standalone';
+import { DynamicFormLogger } from '@ng-forge/dynamic-forms';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, injectNgForgeAddons, NgForgeControl, DfAddonSlot, DynamicTextPipe, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeFieldHost, NgForgeAddons } from '@ng-forge/dynamic-forms/integration';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { IONIC_CONFIG, IONIC_INPUT_TYPE_OVERRIDE, IonicInlineButtonAddonComponent, runIonicPresetAction } from '@ng-forge/dynamic-forms-ionic/shared';
+
+class IonicInputFieldComponent {
+    elementRef = inject((ElementRef));
+    ionicConfig = inject(IONIC_CONFIG, { optional: true });
+    ngf = injectNgForgeField();
+    ngfa = injectNgForgeAddons();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+        fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+        typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
+    fill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    shape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        labelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'stacked', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
+    color = computed(() => this.props()?.color ?? this.ionicConfig?.color, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        buttonPrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.type === 'ion-button'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonPrefixAddons" }] : /* istanbul ignore next */ []));
+    buttonSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.type === 'ion-button'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonSuffixAddons" }] : /* istanbul ignore next */ []));
+    decorativePrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.type !== 'ion-button'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorativePrefixAddons" }] : /* istanbul ignore next */ []));
+    decorativeSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.type !== 'ion-button'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorativeSuffixAddons" }] : /* istanbul ignore next */ []));
+        destroyed = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => (this.destroyed = true));
+                                explicitEffect([this.ngf.ariaDescribedBy], ([describedBy]) => {
+            queueMicrotask(() => {
+                if (this.destroyed)
+                    return;
+                const ionInput = this.elementRef.nativeElement.querySelector('ion-input');
+                if (ionInput?.getInputElement) {
+                    ionInput.getInputElement().then((inputEl) => {
+                        if (this.destroyed || !inputEl)
+                            return;
+                        if (describedBy) {
+                            inputEl.setAttribute('aria-describedby', describedBy);
+                        }
+                        else {
+                            inputEl.removeAttribute('aria-describedby');
+                        }
+                    });
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicInputFieldComponent, isStandalone: true, selector: "df-ion-input", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: IONIC_INPUT_TYPE_OVERRIDE,
+                useFactory: () => signal(undefined),
+            },
+            {
+                                                                                                provide: ADDON_PRESET_HANDLER,
+                useFactory: () => {
+                    const typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
+                    const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
+                    const logger = inject(DynamicFormLogger);
+                                        const host = inject(forwardRef(() => IonicInputFieldComponent));
+                    return {
+                        run: (preset, ctx) => {
+                            const fieldKey = ctx.field.key;
+                            return runIonicPresetAction(preset, ctx, {
+                                typeOverride,
+                                fieldValueSetter: ctx.setValue,
+                                fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
+                                baselineType: () => host.props()?.type,
+                                logger,
+                            });
+                        },
+                    };
+                },
+            },
+        ], hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let inputId = ngf.key() + '-input';
+
+    <ion-input
+      ngForgeControl
+      [id]="inputId"
+      [type]="type()"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="labelPlacement()"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [clearInput]="props()?.clearInput ?? false"
+      [counter]="props()?.counter ?? false"
+      [minlength]="f().minLength?.()"
+      [maxlength]="f().maxLength?.()"
+      [color]="color()"
+      [fill]="fill()"
+      [shape]="shape()"
+      [readonly]="f().readonly()"
+      [helperText]="ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined"
+      [attr.tabindex]="ngf.tabIndex()"
+    >
+      @for (a of decorativePrefixAddons(); track $index) {
+        <span slot="start">
+          <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+        </span>
+      }
+      @for (a of buttonPrefixAddons(); track $index) {
+        <ion-button df-ion-button-addon slot="start" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
+      }
+      @for (a of buttonSuffixAddons(); track $index) {
+        <ion-button df-ion-button-addon slot="end" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
+      }
+      @for (a of decorativeSuffixAddons(); track $index) {
+        <span slot="end">
+          <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+        </span>
+      }
+    </ion-input>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "component", type: IonicInlineButtonAddonComponent, selector: "ion-button[df-ion-button-addon]" }, { 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: IonicInputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot, IonicInlineButtonAddonComponent], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
+    @let f = ngf.field();
+    @let inputId = ngf.key() + '-input';
+
+    <ion-input
+      ngForgeControl
+      [id]="inputId"
+      [type]="type()"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="labelPlacement()"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [clearInput]="props()?.clearInput ?? false"
+      [counter]="props()?.counter ?? false"
+      [minlength]="f().minLength?.()"
+      [maxlength]="f().maxLength?.()"
+      [color]="color()"
+      [fill]="fill()"
+      [shape]="shape()"
+      [readonly]="f().readonly()"
+      [helperText]="ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined"
+      [attr.tabindex]="ngf.tabIndex()"
+    >
+      @for (a of decorativePrefixAddons(); track $index) {
+        <span slot="start">
+          <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+        </span>
+      }
+      @for (a of buttonPrefixAddons(); track $index) {
+        <ion-button df-ion-button-addon slot="start" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
+      }
+      @for (a of buttonSuffixAddons(); track $index) {
+        <ion-button df-ion-button-addon slot="end" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
+      }
+      @for (a of decorativeSuffixAddons(); track $index) {
+        <span slot="end">
+          <df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
+        </span>
+      }
+    </ion-input>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: IONIC_INPUT_TYPE_OVERRIDE,
+                            useFactory: () => signal(undefined),
+                        },
+                        {
+                                                                                                                                                                        provide: ADDON_PRESET_HANDLER,
+                            useFactory: () => {
+                                const typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
+                                const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
+                                const logger = inject(DynamicFormLogger);
+                                                                const host = inject(forwardRef(() => IonicInputFieldComponent));
+                                return {
+                                    run: (preset, ctx) => {
+                                        const fieldKey = ctx.field.key;
+                                        return runIonicPresetAction(preset, ctx, {
+                                            typeOverride,
+                                            fieldValueSetter: ctx.setValue,
+                                            fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
+                                            baselineType: () => host.props()?.type,
+                                            logger,
+                                        });
+                                    },
+                                };
+                            },
+                        },
+                    ], 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 }] }] } });
+
+
+export { IonicInputFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-input.mjs.map

package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-input.mjs","mappings":";;;;;;;;;;;AAgKc;AACK;;;;AAMR;;AAET,IAKS;;IAGQ;AAEE;;AACA;;IAEA;;AACA;;IAGA;;AAEnB;;;;;;;;;AAaA;AACE;wBAIA;;;;AAGI;AACA;;AAEI;;;AAEE;;;AAEA;;AAEJ;;AAEJ;AACF;;;AA7DiB;AA7EjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/input/ionic-input.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonInput, IonNote } from '@ionic/angular/standalone';\nimport { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n  ADDON_PRESET_HANDLER,\n  AddonPresetHandler,\n  injectNgForgeAddons,\n  injectNgForgeField,\n  NgForgeAddons,\n  NgForgeControl,\n  NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport {\n  IONIC_CONFIG,\n  IONIC_INPUT_TYPE_OVERRIDE,\n  IonicInlineButtonAddonComponent,\n  runIonicPresetAction,\n} from '@ng-forge/dynamic-forms-ionic/shared';\nimport { IonicInputAddon, IonicInputProps } from './ionic-input.type';\n\n// minlength/maxlength bindings: Signal Forms auto-syncs these on NATIVE\n// inputs; <ion-input> is a Stencil web component so we bind directly from\n// FieldState (`f().maxLength?.()` — the signal itself is missing when no\n// validator is configured).\n@Component({\n  selector: 'df-ion-input',\n  // IonButton intentionally NOT imported — it would collide with\n  // IonicInlineButtonAddonComponent on `<ion-button>` (NG0300).\n  imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot, IonicInlineButtonAddonComponent],\n  hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n  template: `\n    @let f = ngf.field();\n    @let inputId = ngf.key() + '-input';\n\n    <ion-input\n      ngForgeControl\n      [id]=\"inputId\"\n      [type]=\"type()\"\n      [formField]=\"f\"\n      [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n      [labelPlacement]=\"labelPlacement()\"\n      [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n      [clearInput]=\"props()?.clearInput ?? false\"\n      [counter]=\"props()?.counter ?? false\"\n      [minlength]=\"f().minLength?.()\"\n      [maxlength]=\"f().maxLength?.()\"\n      [color]=\"color()\"\n      [fill]=\"fill()\"\n      [shape]=\"shape()\"\n      [readonly]=\"f().readonly()\"\n      [helperText]=\"ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined\"\n      [attr.tabindex]=\"ngf.tabIndex()\"\n    >\n      @for (a of decorativePrefixAddons(); track $index) {\n        <span slot=\"start\">\n          <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n        </span>\n      }\n      @for (a of buttonPrefixAddons(); track $index) {\n        <ion-button df-ion-button-addon slot=\"start\" [addon]=\"a\" [fieldInputs]=\"fieldInputs()\"></ion-button>\n      }\n      @for (a of buttonSuffixAddons(); track $index) {\n        <ion-button df-ion-button-addon slot=\"end\" [addon]=\"a\" [fieldInputs]=\"fieldInputs()\"></ion-button>\n      }\n      @for (a of decorativeSuffixAddons(); track $index) {\n        <span slot=\"end\">\n          <df-addon-slot [addon]=\"a\" [fieldInputs]=\"fieldInputs()\" [hidden]=\"ngfa.hiddenSignalCache().get(a)\" />\n        </span>\n      }\n    </ion-input>\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: '../../styles/_form-field.scss',\n  providers: [\n    {\n      provide: IONIC_INPUT_TYPE_OVERRIDE,\n      useFactory: () => signal<string | undefined>(undefined),\n    },\n    {\n      // Adapter-specific preset semantics for `ion-button` addons (clear /\n      // reset / paste / copy / toggle-password-visibility). The directive\n      // (`NgForgeAddonAction`) delegates here when an addon configures a\n      // `preset`. Per-ion-input-instance so the `typeOverride` signal is\n      // scoped to one field.\n      provide: ADDON_PRESET_HANDLER,\n      useFactory: (): AddonPresetHandler => {\n        const typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);\n        const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n        const logger = inject(DynamicFormLogger);\n        // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n        const host = inject(forwardRef(() => IonicInputFieldComponent));\n        return {\n          run: (preset: string, ctx: AddonActionContext) => {\n            const fieldKey = ctx.field.key;\n            return runIonicPresetAction(preset as AddonActionPreset, ctx, {\n              typeOverride,\n              fieldValueSetter: ctx.setValue,\n              fieldDefaultValueGetter:\n                fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n              baselineType: () => host.props()?.type,\n              logger,\n            });\n          },\n        };\n      },\n    },\n  ],\n  styles: [\n    `\n      :host([hidden]) {\n        display: none !important;\n      }\n      /* Per-side padding knobs on each slot wrapper (independent prefix/suffix). */\n      :host {\n        --df-ion-addon-prefix-outer-padding: 0;\n        --df-ion-addon-prefix-inner-padding: 0.5rem;\n        --df-ion-addon-suffix-inner-padding: 0.5rem;\n        --df-ion-addon-suffix-outer-padding: 0;\n      }\n      /* inline-flex on slot wrappers prevents baseline-pinning of decorative addon glyphs. */\n      :host ::ng-deep ion-input [slot='start'],\n      :host ::ng-deep ion-input [slot='end'] {\n        display: inline-flex;\n        align-items: center;\n        align-self: center;\n        line-height: 1;\n      }\n      :host ::ng-deep ion-input [slot='start'] df-addon-slot,\n      :host ::ng-deep ion-input [slot='end'] df-addon-slot,\n      :host ::ng-deep ion-input [slot='start'] df-ion-icon-addon,\n      :host ::ng-deep ion-input [slot='end'] df-ion-icon-addon {\n        display: inline-flex;\n        align-items: center;\n        line-height: 1;\n      }\n      :host ::ng-deep ion-input [slot='start'] {\n        padding-inline-start: var(--df-ion-addon-prefix-outer-padding);\n        padding-inline-end: var(--df-ion-addon-prefix-inner-padding);\n      }\n      :host ::ng-deep ion-input [slot='end'] {\n        padding-inline-start: var(--df-ion-addon-suffix-inner-padding);\n        padding-inline-end: var(--df-ion-addon-suffix-outer-padding);\n      }\n      /* Inherit input text color so icons stay readable on dark themes\n         (Ionic's default \"medium\" greys out and fails WCAG on dark inputs). */\n      :host ::ng-deep ion-input ion-icon {\n        color: inherit;\n      }\n    `,\n  ],\n})\nexport default class IonicInputFieldComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private ionicConfig = inject(IONIC_CONFIG, { optional: true });\n\n  protected readonly ngf = injectNgForgeField<string>();\n  protected readonly ngfa = injectNgForgeAddons<IonicInputAddon>();\n\n  readonly props = input<IonicInputProps>();\n\n  /**\n   * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n   * component level so `setInputIfDeclared` (which uses\n   * `reflectComponentType`) can write it.\n   */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  /** Per-instance type override populated by `toggle-password-visibility` preset. */\n  private readonly typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);\n\n  protected readonly fill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid');\n  protected readonly shape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape);\n  /**  Bootstrap / PrimeNG. Consumers can opt into Ionic's native inline 'start' */\n  protected readonly labelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'stacked');\n  protected readonly color = computed(() => this.props()?.color ?? this.ionicConfig?.color);\n\n  /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n  protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n\n  /** Per-type split: ion-button addons render inline via the attribute-\n   *  selector inline component (so the slotted element is a native\n   *  <ion-button> Ionic can style); everything else (icon/text/template/\n   *  component types) goes through the universal <df-addon-slot> dispatcher\n   *  wrapped in <span slot=\"start|end\"> for safe shadow-DOM projection. */\n  protected readonly buttonPrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.type === 'ion-button'));\n  protected readonly buttonSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.type === 'ion-button'));\n  protected readonly decorativePrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.type !== 'ion-button'));\n  protected readonly decorativeSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.type !== 'ion-button'));\n\n  /** Set when the component is destroyed — guards async aria-describedby sync against teardown. */\n  private destroyed = false;\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => (this.destroyed = true));\n    // ion-input encapsulates a native <input> in shadow DOM and does not automatically\n    // propagate aria-describedby to it. This effect imperatively syncs the attribute\n    // after a microtask to ensure Ionic has resolved the internal element.\n    explicitEffect([this.ngf.ariaDescribedBy], ([describedBy]) => {\n      queueMicrotask(() => {\n        if (this.destroyed) return;\n        const ionInput = this.elementRef.nativeElement.querySelector('ion-input') as HTMLIonInputElement | null;\n        if (ionInput?.getInputElement) {\n          ionInput.getInputElement().then((inputEl) => {\n            if (this.destroyed || !inputEl) return;\n            if (describedBy) {\n              inputEl.setAttribute('aria-describedby', describedBy);\n            } else {\n              inputEl.removeAttribute('aria-describedby');\n            }\n          });\n        }\n      });\n    });\n  }\n}\n"]}

package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs

@@ -0,0 +1,139 @@
+import * as i0 from '@angular/core';
+import { input, linkedSignal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonCheckbox, IonItem, IonNote } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, isEqual, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { AsyncPipe } from '@angular/common';
+
+class IonicMultiCheckboxFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    valueViewModel = linkedSignal(() => {
+        const currentValues = this.ngf.field()().value();
+        return this.options().filter((option) => currentValues.includes(option.value));
+    }, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
+        checkedValuesMap = computed(() => {
+        const map = {};
+        for (const opt of this.valueViewModel()) {
+            map[String(opt.value)] = true;
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
+    constructor() {
+        explicitEffect([this.valueViewModel], ([selectedOptions]) => {
+            const selectedValues = selectedOptions.map((option) => option.value);
+            if (!isEqual(selectedValues, this.ngf.field()().value())) {
+                this.ngf.field()().value.set(selectedValues);
+            }
+        });
+        explicitEffect([this.options], ([options]) => {
+            const values = options.map((option) => option.value);
+            const uniqueValues = new Set(values);
+            if (values.length !== uniqueValues.size) {
+                const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
+                throw new Error(`Duplicate option values detected in ionic-multi-checkbox: ${duplicates.join(', ')}`);
+            }
+        });
+    }
+    onCheckboxChange(option, checked) {
+        this.valueViewModel.update((currentOptions) => {
+            if (checked) {
+                return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];
+            }
+            else {
+                return currentOptions.filter((opt) => opt.value !== option.value);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ion-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let checked = checkedValuesMap();
+    @if (ngf.label(); as label) {
+      <div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
+    }
+
+    <div
+      class="checkbox-group"
+      role="group"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+      [class.ion-invalid]="ngf.showErrors()"
+      [class.ion-touched]="f().touched()"
+    >
+      @for (option of options(); track option.value) {
+        <ion-item lines="none">
+          <ion-checkbox
+            ngForgeControl
+            [checked]="checked['' + option.value]"
+            [disabled]="f().disabled() || option.disabled"
+            [labelPlacement]="props()?.labelPlacement ?? 'end'"
+            [justify]="props()?.justify ?? 'start'"
+            [color]="props()?.color ?? 'primary'"
+            (ionChange)="onCheckboxChange(option, $event.detail.checked)"
+          >
+            {{ option.label | dynamicText | async }}
+          </ion-checkbox>
+        </ion-item>
+      }
+    </div>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    } @else if (props()?.hint; as hint) {
+      <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { 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: IonicMultiCheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let checked = checkedValuesMap();
+    @if (ngf.label(); as label) {
+      <div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
+    }
+
+    <div
+      class="checkbox-group"
+      role="group"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+      [class.ion-invalid]="ngf.showErrors()"
+      [class.ion-touched]="f().touched()"
+    >
+      @for (option of options(); track option.value) {
+        <ion-item lines="none">
+          <ion-checkbox
+            ngForgeControl
+            [checked]="checked['' + option.value]"
+            [disabled]="f().disabled() || option.disabled"
+            [labelPlacement]="props()?.labelPlacement ?? 'end'"
+            [justify]="props()?.justify ?? 'start'"
+            [color]="props()?.color ?? 'primary'"
+            (ionChange)="onCheckboxChange(option, $event.detail.checked)"
+          >
+            {{ option.label | dynamicText | async }}
+          </ion-checkbox>
+        </ion-item>
+      }
+    </div>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    } @else if (props()?.hint; as hint) {
+      <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
+    }
+  `, 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 }] }] } });
+
+
+export { IonicMultiCheckboxFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map

package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs","mappings":";;;;;;;;AAkFc;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxET","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/multi-checkbox/ionic-multi-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { IonCheckbox, IonItem, IonNote } from '@ionic/angular/standalone';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { IonicMultiCheckboxProps } from './ionic-multi-checkbox.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-multi-checkbox',\n  imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checked = checkedValuesMap();\n    @if (ngf.label(); as label) {\n      <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n    }\n\n    <div\n      class=\"checkbox-group\"\n      role=\"group\"\n      [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n      [attr.aria-required]=\"ngf.ariaRequired()\"\n      [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n      [class.ion-invalid]=\"ngf.showErrors()\"\n      [class.ion-touched]=\"f().touched()\"\n    >\n      @for (option of options(); track option.value) {\n        <ion-item lines=\"none\">\n          <ion-checkbox\n            ngForgeControl\n            [checked]=\"checked['' + option.value]\"\n            [disabled]=\"f().disabled() || option.disabled\"\n            [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n            [justify]=\"props()?.justify ?? 'start'\"\n            [color]=\"props()?.color ?? 'primary'\"\n            (ionChange)=\"onCheckboxChange(option, $event.detail.checked)\"\n          >\n            {{ option.label | dynamicText | async }}\n          </ion-checkbox>\n        </ion-item>\n      }\n    </div>\n\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n    } @else if (props()?.hint; as hint) {\n      <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n    }\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n\n      .checkbox-group-label {\n        margin-bottom: 8px;\n        font-weight: 500;\n      }\n\n      .checkbox-group {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n\n      ion-item {\n        --padding-start: 0;\n        --inner-padding-end: 0;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicMultiCheckboxFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<IonicMultiCheckboxProps>();\n\n  valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n    () => {\n      const currentValues = this.ngf.field()().value();\n      return this.options().filter((option) => currentValues.includes(option.value));\n    },\n    { equal: isEqual },\n  );\n\n  /** Computed map of checked option values for O(1) lookup in template */\n  readonly checkedValuesMap = computed(() => {\n    const map: Record<string, boolean> = {};\n    for (const opt of this.valueViewModel()) {\n      map[String(opt.value)] = true;\n    }\n    return map;\n  });\n\n  constructor() {\n    explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n      const selectedValues = selectedOptions.map((option) => option.value);\n\n      if (!isEqual(selectedValues, this.ngf.field()().value())) {\n        this.ngf.field()().value.set(selectedValues);\n      }\n    });\n\n    explicitEffect([this.options], ([options]) => {\n      const values = options.map((option) => option.value);\n      const uniqueValues = new Set(values);\n\n      if (values.length !== uniqueValues.size) {\n        const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n        throw new Error(`Duplicate option values detected in ionic-multi-checkbox: ${duplicates.join(', ')}`);\n      }\n    });\n  }\n\n  onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n    this.valueViewModel.update((currentOptions) => {\n      if (checked) {\n        return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n      } else {\n        return currentOptions.filter((opt) => opt.value !== option.value);\n      }\n    });\n  }\n}\n"]}

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

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { IonRadioGroup, IonRadio, IonItem, IonNote } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+
+class IonicRadioFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    defaultCompare = Object.is;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ion-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let radioGroupId = ngf.key() + '-radio-group';
+    @if (ngf.label(); as label) {
+      <div class="radio-label">{{ label | dynamicText | async }}</div>
+    }
+
+    <ion-radio-group
+      [id]="radioGroupId"
+      [formField]="f"
+      [compareWith]="props()?.compareWith || defaultCompare"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+    >
+      @for (option of options(); track option.value) {
+        <ion-item [lines]="'none'">
+          <ion-radio
+            ngForgeControl
+            [value]="option.value"
+            [disabled]="option.disabled || false"
+            [labelPlacement]="props()?.labelPlacement ?? 'end'"
+            [justify]="props()?.justify"
+            [color]="props()?.color ?? 'primary'"
+          >
+            {{ option.label | dynamicText | async }}
+          </ion-radio>
+        </ion-item>
+      }
+    </ion-radio-group>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    } @else if (props()?.hint; as hint) {
+      <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { 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: IonicRadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let radioGroupId = ngf.key() + '-radio-group';
+    @if (ngf.label(); as label) {
+      <div class="radio-label">{{ label | dynamicText | async }}</div>
+    }
+
+    <ion-radio-group
+      [id]="radioGroupId"
+      [formField]="f"
+      [compareWith]="props()?.compareWith || defaultCompare"
+      [attr.aria-invalid]="ngf.ariaInvalid()"
+      [attr.aria-required]="ngf.ariaRequired()"
+      [attr.aria-describedby]="ngf.ariaDescribedBy()"
+    >
+      @for (option of options(); track option.value) {
+        <ion-item [lines]="'none'">
+          <ion-radio
+            ngForgeControl
+            [value]="option.value"
+            [disabled]="option.disabled || false"
+            [labelPlacement]="props()?.labelPlacement ?? 'end'"
+            [justify]="props()?.justify"
+            [color]="props()?.color ?? 'primary'"
+          >
+            {{ option.label | dynamicText | async }}
+          </ion-radio>
+        </ion-item>
+      }
+    </ion-radio-group>
+
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    } @else if (props()?.hint; as hint) {
+      <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
+    }
+  `, 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 }] }] } });
+
+
+export { IonicRadioFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map

package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-radio.mjs","mappings":";;;;;;;;AAuEc;;;;AAIH;;AAET;;AANmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtBlB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/radio/ionic-radio.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonItem, IonNote, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicRadioProps } from './ionic-radio.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-radio',\n  imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let radioGroupId = ngf.key() + '-radio-group';\n    @if (ngf.label(); as label) {\n      <div class=\"radio-label\">{{ label | dynamicText | async }}</div>\n    }\n\n    <ion-radio-group\n      [id]=\"radioGroupId\"\n      [formField]=\"f\"\n      [compareWith]=\"props()?.compareWith || defaultCompare\"\n      [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n      [attr.aria-required]=\"ngf.ariaRequired()\"\n      [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n    >\n      @for (option of options(); track option.value) {\n        <ion-item [lines]=\"'none'\">\n          <ion-radio\n            ngForgeControl\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled || false\"\n            [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n            [justify]=\"props()?.justify\"\n            [color]=\"props()?.color ?? 'primary'\"\n          >\n            {{ option.label | dynamicText | async }}\n          </ion-radio>\n        </ion-item>\n      }\n    </ion-radio-group>\n\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n    } @else if (props()?.hint; as hint) {\n      <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n    }\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n\n      .radio-label {\n        font-size: 0.875rem;\n        font-weight: 500;\n        margin-bottom: 0.5rem;\n        color: var(--ion-text-color);\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicRadioFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<IonicRadioProps>();\n\n  defaultCompare = Object.is;\n}\n"]}

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

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { IonSelect, IonSelectOption, IonNote } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+
+class IonicSelectFieldComponent {
+    ngf = injectNgForgeField();
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    defaultCompare = Object.is;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicSelectFieldComponent, isStandalone: true, selector: "df-ion-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let selectId = ngf.key() + '-select';
+
+    <ion-select
+      ngForgeControl
+      [id]="selectId"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="props()?.labelPlacement ?? 'stacked'"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [multiple]="props()?.multiple ?? false"
+      [compareWith]="props()?.compareWith ?? defaultCompare"
+      [interface]="props()?.interface ?? 'alert'"
+      [interfaceOptions]="props()?.interfaceOptions ?? {}"
+      [cancelText]="props()?.cancelText ?? 'Cancel'"
+      [okText]="props()?.okText ?? 'OK'"
+      [color]="props()?.color"
+      [fill]="props()?.fill ?? 'outline'"
+      [shape]="props()?.shape"
+      [attr.tabindex]="ngf.tabIndex()"
+    >
+      @for (option of options(); track option.value) {
+        <ion-select-option [value]="option.value" [disabled]="option.disabled || false">
+          {{ option.label | dynamicText | async }}
+        </ion-select-option>
+      }
+    </ion-select>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    } @else if (props()?.hint; as hint) {
+      <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { 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: IonicSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-select', imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let selectId = ngf.key() + '-select';
+
+    <ion-select
+      ngForgeControl
+      [id]="selectId"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="props()?.labelPlacement ?? 'stacked'"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [multiple]="props()?.multiple ?? false"
+      [compareWith]="props()?.compareWith ?? defaultCompare"
+      [interface]="props()?.interface ?? 'alert'"
+      [interfaceOptions]="props()?.interfaceOptions ?? {}"
+      [cancelText]="props()?.cancelText ?? 'Cancel'"
+      [okText]="props()?.okText ?? 'OK'"
+      [color]="props()?.color"
+      [fill]="props()?.fill ?? 'outline'"
+      [shape]="props()?.shape"
+      [attr.tabindex]="ngf.tabIndex()"
+    >
+      @for (option of options(); track option.value) {
+        <ion-select-option [value]="option.value" [disabled]="option.disabled || false">
+          {{ option.label | dynamicText | async }}
+        </ion-select-option>
+      }
+    </ion-select>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
+    } @else if (props()?.hint; as hint) {
+      <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
+    }
+  `, 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 }] }] } });
+
+
+export { IonicSelectFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-select.mjs.map

package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-select.mjs","mappings":";;;;;;;;AAyDc;;;;AAIH;;AAET;;AANmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/select/ionic-select.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonNote, IonSelect, IonSelectOption } from '@ionic/angular/standalone';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicSelectProps } from './ionic-select.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-select',\n  imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let selectId = ngf.key() + '-select';\n\n    <ion-select\n      ngForgeControl\n      [id]=\"selectId\"\n      [formField]=\"f\"\n      [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n      [labelPlacement]=\"props()?.labelPlacement ?? 'stacked'\"\n      [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n      [multiple]=\"props()?.multiple ?? false\"\n      [compareWith]=\"props()?.compareWith ?? defaultCompare\"\n      [interface]=\"props()?.interface ?? 'alert'\"\n      [interfaceOptions]=\"props()?.interfaceOptions ?? {}\"\n      [cancelText]=\"props()?.cancelText ?? 'Cancel'\"\n      [okText]=\"props()?.okText ?? 'OK'\"\n      [color]=\"props()?.color\"\n      [fill]=\"props()?.fill ?? 'outline'\"\n      [shape]=\"props()?.shape\"\n      [attr.tabindex]=\"ngf.tabIndex()\"\n    >\n      @for (option of options(); track option.value) {\n        <ion-select-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n          {{ option.label | dynamicText | async }}\n        </ion-select-option>\n      }\n    </ion-select>\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n    } @else if (props()?.hint; as hint) {\n      <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n})\nexport default class IonicSelectFieldComponent {\n  protected readonly ngf = injectNgForgeField<ValueType>();\n\n  readonly options = input<FieldOption<ValueType>[]>([]);\n  readonly props = input<IonicSelectProps>();\n\n  defaultCompare = Object.is;\n}\n"]}