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

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

@@ -0,0 +1,75 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonButton, IonIcon, IonSpinner } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAddonAction, DynamicTextPipe, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
+
+class IonicButtonAddonComponent {
+    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 */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicButtonAddonComponent, isStandalone: true, selector: "df-ion-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
+    <ion-button
+      [attr.color]="color() ?? null"
+      [fill]="fill()"
+      [disabled]="action.disabled() || action.loading()"
+      [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+      [attr.aria-busy]="action.loading() || null"
+      (click)="action.dispatch()"
+    >
+      @if (action.loading()) {
+        <ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
+      } @else if (icon(); as ic) {
+        <ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
+      }
+      @if (label(); as lbl) {
+        {{ lbl | dynamicText | async }}
+      }
+    </ion-button>
+    @if (action.loading()) {
+      <span class="df-ion-sr-only" role="status">Loading…</span>
+    }
+  `, 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: IonicButtonAddonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-button-addon', imports: [IonButton, IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
+    <ion-button
+      [attr.color]="color() ?? null"
+      [fill]="fill()"
+      [disabled]="action.disabled() || action.loading()"
+      [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
+      [attr.aria-busy]="action.loading() || null"
+      (click)="action.dispatch()"
+    >
+      @if (action.loading()) {
+        <ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
+      } @else if (icon(); as ic) {
+        <ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
+      }
+      @if (label(); as lbl) {
+        {{ lbl | dynamicText | async }}
+      }
+    </ion-button>
+    @if (action.loading()) {
+      <span class="df-ion-sr-only" role="status">Loading…</span>
+    }
+  `, 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"] }]
+        }] });
+
+
+export { IonicButtonAddonComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs","mappings":";;;;;;;;;IAuDqB;;;;;;;AAKnB;;AAKmB;;AACnB,IAImB;;;AAnBR;;;;;;;;;;;;;;;;;;;;;;;;;AA1CD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/addons/ion-button-addon.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { IonButton, IonIcon, IonSpinner } from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { IonicButtonAddon } from '@ng-forge/dynamic-forms-ionic/shared';\n\n/** Renderer for the `ion-button` addon type. */\n@Component({\n  selector: 'df-ion-button-addon',\n  imports: [IonButton, IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeAddonAction],\n  template: `\n    <ion-button\n      [attr.color]=\"color() ?? null\"\n      [fill]=\"fill()\"\n      [disabled]=\"action.disabled() || action.loading()\"\n      [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n      [attr.aria-busy]=\"action.loading() || null\"\n      (click)=\"action.dispatch()\"\n    >\n      @if (action.loading()) {\n        <ion-spinner [slot]=\"iconOnly() ? 'icon-only' : 'start'\" name=\"dots\"></ion-spinner>\n      } @else if (icon(); as ic) {\n        <ion-icon [name]=\"ic\" [slot]=\"iconOnly() ? 'icon-only' : 'start'\"></ion-icon>\n      }\n      @if (label(); as lbl) {\n        {{ lbl | dynamicText | async }}\n      }\n    </ion-button>\n    @if (action.loading()) {\n      <span class=\"df-ion-sr-only\" role=\"status\">Loading…</span>\n    }\n  `,\n  styles: [\n    `\n      .df-ion-sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IonicButtonAddonComponent {\n  protected readonly action = injectNgForgeAddonAction<IonicButtonAddon>();\n\n  /** Re-exposed for template binding — same signal stored on the directive. */\n  protected readonly addon = this.action.addon;\n\n  protected readonly label = computed(() => this.addon().label);\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly icon = computed(() => this.addon().icon);\n  /** Default color is undefined so the button inherits the theme's text color\n   *  (Ionic's `medium` would force low-contrast grey, which fails WCAG on dark\n   *  surfaces). Consumers can still set `color: 'primary' | 'success' | ...`\n   *  explicitly when they want adapter-styled coloring. */\n  protected readonly color = computed(() => this.addon().color);\n  protected readonly fill = computed(() => this.addon().fill ?? 'clear');\n  /** Icon-only when there is an icon but no label — drives the `slot` choice.\n   *  Truthy check on `label` mirrors Material's heuristic; empty-string label\n   *  is treated as \"no label\" so the button doesn't render an invisible text\n   *  slot beside the icon. */\n  protected readonly iconOnly = computed(() => !!this.icon() && !this.label());\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';
+
+class IonicIconAddonComponent {
+    addon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
+        fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    iconName = computed(() => this.addon().icon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: IonicIconAddonComponent, isStandalone: true, selector: "df-ion-icon-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "hasAriaLabel() ? null : \"true\"" } }, ngImport: i0, template: `<ion-icon [name]="iconName()" [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"></ion-icon>`, isInline: true, dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicIconAddonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-ion-icon-addon',
+                    imports: [IonIcon, AsyncPipe, DynamicTextPipe],
+                    template: `<ion-icon [name]="iconName()" [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"></ion-icon>`,
+                    host: {
+                        '[attr.aria-hidden]': 'hasAriaLabel() ? null : "true"',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { addon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addon", required: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
+
+
+export { IonicIconAddonComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs","mappings":";;;;;;;;;IAoBW;;;;;;AAIU;;;AAPR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/addons/ion-icon-addon.component.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IonIcon } from '@ionic/angular/standalone';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { IonicIconAddon } from '@ng-forge/dynamic-forms-ionic/shared';\n\n/** Renderer for the `ion-icon` addon type. */\n@Component({\n  selector: 'df-ion-icon-addon',\n  imports: [IonIcon, AsyncPipe, DynamicTextPipe],\n  template: `<ion-icon [name]=\"iconName()\" [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"></ion-icon>`,\n  host: {\n    '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IonicIconAddonComponent {\n  readonly addon = input.required<IonicIconAddon>();\n  /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every type must declare it. */\n  readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n  protected readonly iconName = computed(() => this.addon().icon);\n  protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n  protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n"]}

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

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+import { AsyncPipe } from '@angular/common';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';
+
+class IonicButtonFieldComponent {
+    action = injectNgForgeAction();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    buttonType = computed(() => this.props()?.type ?? 'button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
+    buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
+    onClick() {
+        if (this.buttonType() === 'submit')
+            return;
+        this.action.dispatch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: IonicButtonFieldComponent, isStandalone: true, selector: "df-ion-button", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeActionHost }], ngImport: i0, template: `
+    @let buttonId = action.key() + '-button';
+
+    <ion-button
+      [id]="buttonId"
+      [type]="buttonType()"
+      [expand]="props()?.expand"
+      [fill]="props()?.fill || 'solid'"
+      [shape]="props()?.shape"
+      [size]="props()?.size"
+      [color]="props()?.color || 'primary'"
+      [strong]="props()?.strong"
+      [disabled]="action.disabled()"
+      [attr.tabindex]="action.tabIndex()"
+      [attr.data-testid]="buttonTestId()"
+      (click)="onClick()"
+    >
+      {{ action.label() | dynamicText | async }}
+    </ion-button>
+  `, isInline: true, styles: [":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: IonicButtonFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-button', imports: [IonButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
+    @let buttonId = action.key() + '-button';
+
+    <ion-button
+      [id]="buttonId"
+      [type]="buttonType()"
+      [expand]="props()?.expand"
+      [fill]="props()?.fill || 'solid'"
+      [shape]="props()?.shape"
+      [size]="props()?.size"
+      [color]="props()?.color || 'primary'"
+      [strong]="props()?.strong"
+      [disabled]="action.disabled()"
+      [attr.tabindex]="action.tabIndex()"
+      [attr.data-testid]="buttonTestId()"
+      (click)="onClick()"
+    >
+      {{ action.label() | dynamicText | async }}
+    </ion-button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host([hidden]){display:none!important}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+
+export { IonicButtonFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-button.mjs","mappings":";;;;;;;AAyCc;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;;;;;;AAHlB;;;;AA7BS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/button/ionic-button.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IonButton } from '@ionic/angular/standalone';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicButtonProps } from './ionic-button.type';\n\n@Component({\n  selector: 'df-ion-button',\n  imports: [IonButton, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeActionHost],\n  styles: [\n    `\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n  template: `\n    @let buttonId = action.key() + '-button';\n\n    <ion-button\n      [id]=\"buttonId\"\n      [type]=\"buttonType()\"\n      [expand]=\"props()?.expand\"\n      [fill]=\"props()?.fill || 'solid'\"\n      [shape]=\"props()?.shape\"\n      [size]=\"props()?.size\"\n      [color]=\"props()?.color || 'primary'\"\n      [strong]=\"props()?.strong\"\n      [disabled]=\"action.disabled()\"\n      [attr.tabindex]=\"action.tabIndex()\"\n      [attr.data-testid]=\"buttonTestId()\"\n      (click)=\"onClick()\"\n    >\n      {{ action.label() | dynamicText | async }}\n    </ion-button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicButtonFieldComponent<TEvent extends FormEvent> {\n  protected readonly action = injectNgForgeAction<TEvent>();\n\n  readonly props = input<IonicButtonProps>();\n\n  readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n  readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n  onClick(): void {\n    if (this.buttonType() === 'submit') return;\n    this.action.dispatch();\n  }\n}\n"]}

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

@@ -0,0 +1,67 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { IonCheckbox, 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 IonicCheckboxFieldComponent {
+    ngf = injectNgForgeField();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicCheckboxFieldComponent, isStandalone: true, selector: "df-ion-checkbox", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let checkboxId = ngf.key() + '-checkbox';
+
+    <ion-checkbox
+      ngForgeControl
+      [id]="checkboxId"
+      [formField]="f"
+      [labelPlacement]="props()?.labelPlacement ?? 'end'"
+      [justify]="props()?.justify"
+      [color]="props()?.color ?? 'primary'"
+      [indeterminate]="props()?.indeterminate ?? false"
+      [attr.tabindex]="ngf.tabIndex()"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </ion-checkbox>
+
+    @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}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "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: IonicCheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-checkbox', imports: [IonCheckbox, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let checkboxId = ngf.key() + '-checkbox';
+
+    <ion-checkbox
+      ngForgeControl
+      [id]="checkboxId"
+      [formField]="f"
+      [labelPlacement]="props()?.labelPlacement ?? 'end'"
+      [justify]="props()?.justify"
+      [color]="props()?.color ?? 'primary'"
+      [indeterminate]="props()?.indeterminate ?? false"
+      [attr.tabindex]="ngf.tabIndex()"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </ion-checkbox>
+
+    @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}\n"] }]
+        }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { IonicCheckboxFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs","mappings":";;;;;;;;AAiDc;;AAGH;;;AAHU;;;;;;;;;;;;;;;;;;;;;;;;;;AAxCT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/checkbox/ionic-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonCheckbox, IonNote } from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicCheckboxProps } from './ionic-checkbox.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-checkbox',\n  imports: [IonCheckbox, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let checkboxId = ngf.key() + '-checkbox';\n\n    <ion-checkbox\n      ngForgeControl\n      [id]=\"checkboxId\"\n      [formField]=\"f\"\n      [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n      [justify]=\"props()?.justify\"\n      [color]=\"props()?.color ?? 'primary'\"\n      [indeterminate]=\"props()?.indeterminate ?? false\"\n      [attr.tabindex]=\"ngf.tabIndex()\"\n    >\n      {{ ngf.label() | dynamicText | async }}\n    </ion-checkbox>\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  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicCheckboxFieldComponent {\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<IonicCheckboxProps>();\n}\n"]}

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

@@ -0,0 +1,195 @@
+import * as i0 from '@angular/core';
+import { input, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonInput, IonModal, IonDatetime, IonNote, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonButton } 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';
+import { format } from 'date-fns';
+
+class IonicDatepickerFieldComponent {
+    ngf = injectNgForgeField();
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    isModalOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isModalOpen" }] : /* istanbul ignore next */ []));
+    openModal() {
+        this.isModalOpen.set(true);
+    }
+    closeModal() {
+        this.isModalOpen.set(false);
+    }
+    onDateChange(event) {
+        const value = event.detail.value;
+                        if (value && typeof value === 'string' && value.length > 0) {
+            const date = new Date(value);
+            this.ngf.field()().value.set(date);
+        }
+        else {
+            this.ngf.field()().value.set(null);
+        }
+        this.closeModal();
+    }
+    dateToIsoString(date) {
+        if (!date)
+            return undefined;
+        return date.toISOString();
+    }
+    formatDisplayDate(date) {
+        if (!date)
+            return '';
+        const presentation = this.props()?.presentation ?? 'date';
+        switch (presentation) {
+            case 'date':
+                return format(date, 'MMM d, yyyy');
+            case 'date-time':
+            case 'time-date':
+                return format(date, 'MMM d, yyyy, h:mm a');
+            case 'time':
+                return format(date, 'h:mm a');
+            case 'month':
+                return format(date, 'MMMM yyyy');
+            case 'month-year':
+                return format(date, 'MMM yyyy');
+            case 'year':
+                return format(date, 'yyyy');
+            default:
+                return format(date, 'MMM d, yyyy');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicDatepickerFieldComponent, isStandalone: true, selector: "df-ion-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", 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 dateValue = f().value();
+    @let inputId = ngf.key() + '-input';
+
+    <ion-input
+      ngForgeControl
+      [id]="inputId"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="'stacked'"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [disabled]="f().disabled()"
+      [value]="formatDisplayDate(dateValue)"
+      [readonly]="true"
+      [fill]="'outline'"
+      [attr.tabindex]="ngf.tabIndex()"
+      (click)="!f().disabled() && openModal()"
+    />
+    @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>
+    }
+
+    <ion-modal [isOpen]="isModalOpen()" (didDismiss)="closeModal()">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ ngf.label() | dynamicText | async }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="closeModal()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-datetime
+            [presentation]="props()?.presentation ?? 'date'"
+            [value]="dateToIsoString(dateValue)"
+            [multiple]="props()?.multiple ?? false"
+            [preferWheel]="props()?.preferWheel ?? false"
+            [showDefaultButtons]="props()?.showDefaultButtons ?? false"
+            [showDefaultTitle]="props()?.showDefaultTitle ?? false"
+            [showDefaultTimeLabel]="props()?.showDefaultTimeLabel ?? true"
+            [showClearButton]="props()?.showClearButton ?? false"
+            [color]="props()?.color"
+            [min]="dateToIsoString(minDate())"
+            [max]="dateToIsoString(maxDate())"
+            (ionChange)="onDateChange($event)"
+          >
+          </ion-datetime>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, 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", "ion-input{cursor:pointer}:host([hidden]){display:none!important}\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: IonModal, selector: "ion-modal" }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: IonicDatepickerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-datepicker', imports: [
+                        IonInput,
+                        IonModal,
+                        IonDatetime,
+                        IonNote,
+                        IonButtons,
+                        IonHeader,
+                        IonContent,
+                        IonToolbar,
+                        IonTitle,
+                        IonButton,
+                        DynamicTextPipe,
+                        AsyncPipe,
+                        NgForgeControl,
+                    ], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let dateValue = f().value();
+    @let inputId = ngf.key() + '-input';
+
+    <ion-input
+      ngForgeControl
+      [id]="inputId"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="'stacked'"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [disabled]="f().disabled()"
+      [value]="formatDisplayDate(dateValue)"
+      [readonly]="true"
+      [fill]="'outline'"
+      [attr.tabindex]="ngf.tabIndex()"
+      (click)="!f().disabled() && openModal()"
+    />
+    @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>
+    }
+
+    <ion-modal [isOpen]="isModalOpen()" (didDismiss)="closeModal()">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ ngf.label() | dynamicText | async }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="closeModal()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-datetime
+            [presentation]="props()?.presentation ?? 'date'"
+            [value]="dateToIsoString(dateValue)"
+            [multiple]="props()?.multiple ?? false"
+            [preferWheel]="props()?.preferWheel ?? false"
+            [showDefaultButtons]="props()?.showDefaultButtons ?? false"
+            [showDefaultTitle]="props()?.showDefaultTitle ?? false"
+            [showDefaultTimeLabel]="props()?.showDefaultTimeLabel ?? true"
+            [showClearButton]="props()?.showClearButton ?? false"
+            [color]="props()?.color"
+            [min]="dateToIsoString(minDate())"
+            [max]="dateToIsoString(maxDate())"
+            (ionChange)="onDateChange($event)"
+          >
+          </ion-datetime>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, 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 }] }] } });
+
+
+export { IonicDatepickerFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs","mappings":";;;;;;;;AAyGc;;;;;;;;AAMH;;;;;AAKP;;;AAIA;;AAGF;AACE;gBAGA;AACE;AACA;;;AAEA;;;;AAKJ;AACE;AAAW;AACX;;AAGF;AACE;AAAW;;;AAKT;AACE;AACF;AACA;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;;;;AAxDa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArFT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/datepicker/ionic-datepicker.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport {\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonDatetime,\n  IonHeader,\n  IonInput,\n  IonModal,\n  IonNote,\n  IonTitle,\n  IonToolbar,\n} from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicDatepickerProps } from './ionic-datepicker.type';\nimport { AsyncPipe } from '@angular/common';\nimport { format } from 'date-fns';\n\n@Component({\n  selector: 'df-ion-datepicker',\n  imports: [\n    IonInput,\n    IonModal,\n    IonDatetime,\n    IonNote,\n    IonButtons,\n    IonHeader,\n    IonContent,\n    IonToolbar,\n    IonTitle,\n    IonButton,\n    DynamicTextPipe,\n    AsyncPipe,\n    NgForgeControl,\n  ],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let dateValue = f().value();\n    @let inputId = ngf.key() + '-input';\n\n    <ion-input\n      ngForgeControl\n      [id]=\"inputId\"\n      [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n      [labelPlacement]=\"'stacked'\"\n      [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n      [disabled]=\"f().disabled()\"\n      [value]=\"formatDisplayDate(dateValue)\"\n      [readonly]=\"true\"\n      [fill]=\"'outline'\"\n      [attr.tabindex]=\"ngf.tabIndex()\"\n      (click)=\"!f().disabled() && openModal()\"\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    <ion-modal [isOpen]=\"isModalOpen()\" (didDismiss)=\"closeModal()\">\n      <ng-template>\n        <ion-header>\n          <ion-toolbar>\n            <ion-title>{{ ngf.label() | dynamicText | async }}</ion-title>\n            <ion-buttons slot=\"end\">\n              <ion-button (click)=\"closeModal()\">Close</ion-button>\n            </ion-buttons>\n          </ion-toolbar>\n        </ion-header>\n        <ion-content>\n          <ion-datetime\n            [presentation]=\"props()?.presentation ?? 'date'\"\n            [value]=\"dateToIsoString(dateValue)\"\n            [multiple]=\"props()?.multiple ?? false\"\n            [preferWheel]=\"props()?.preferWheel ?? false\"\n            [showDefaultButtons]=\"props()?.showDefaultButtons ?? false\"\n            [showDefaultTitle]=\"props()?.showDefaultTitle ?? false\"\n            [showDefaultTimeLabel]=\"props()?.showDefaultTimeLabel ?? true\"\n            [showClearButton]=\"props()?.showClearButton ?? false\"\n            [color]=\"props()?.color\"\n            [min]=\"dateToIsoString(minDate())\"\n            [max]=\"dateToIsoString(maxDate())\"\n            (ionChange)=\"onDateChange($event)\"\n          >\n          </ion-datetime>\n        </ion-content>\n      </ng-template>\n    </ion-modal>\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  styles: [\n    `\n      ion-input {\n        cursor: pointer;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicDatepickerFieldComponent {\n  protected readonly ngf = injectNgForgeField<Date | null>();\n\n  readonly minDate = input<Date | null>(null);\n  readonly maxDate = input<Date | null>(null);\n  readonly startAt = input<Date | null>(null);\n  readonly props = input<IonicDatepickerProps>();\n\n  readonly isModalOpen = signal(false);\n\n  openModal() {\n    this.isModalOpen.set(true);\n  }\n\n  closeModal() {\n    this.isModalOpen.set(false);\n  }\n\n  onDateChange(event: CustomEvent) {\n    const value = event.detail.value;\n    // ion-datetime emits ISO 8601 strings internally; convert to Date | null\n    // to match the field tree's value type.\n    if (value && typeof value === 'string' && value.length > 0) {\n      const date = new Date(value);\n      this.ngf.field()().value.set(date);\n    } else {\n      this.ngf.field()().value.set(null);\n    }\n    this.closeModal();\n  }\n\n  dateToIsoString(date: Date | null | undefined): string | undefined {\n    if (!date) return undefined;\n    return date.toISOString();\n  }\n\n  formatDisplayDate(date: Date | null | undefined): string {\n    if (!date) return '';\n\n    const presentation = this.props()?.presentation ?? 'date';\n\n    switch (presentation) {\n      case 'date':\n        return format(date, 'MMM d, yyyy');\n      case 'date-time':\n      case 'time-date':\n        return format(date, 'MMM d, yyyy, h:mm a');\n      case 'time':\n        return format(date, 'h:mm a');\n      case 'month':\n        return format(date, 'MMMM yyyy');\n      case 'month-year':\n        return format(date, 'MMM yyyy');\n      case 'year':\n        return format(date, 'yyyy');\n      default:\n        return format(date, 'MMM d, yyyy');\n    }\n  }\n}\n"]}