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

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

@@ -0,0 +1,76 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { IonRange, IonNote } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeField, DynamicTextPipe, NgForgeFieldHost, NgForgeHostControl } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+
+class IonicSliderFieldComponent {
+    ngf = injectNgForgeField();
+    step = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    defaultPinFormatter = (value) => String(value);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicSliderFieldComponent, isStandalone: true, selector: "df-ion-slider", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeHostControl }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let inputId = ngf.key() + '-input';
+
+    <ion-range
+      [id]="inputId"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="props()?.labelPlacement ?? 'stacked'"
+      [min]="f().min?.() ?? props()?.min ?? 0"
+      [max]="f().max?.() ?? props()?.max ?? 100"
+      [step]="step() ?? props()?.step ?? 1"
+      [dualKnobs]="props()?.dualKnobs ?? false"
+      [pin]="props()?.pin ?? false"
+      [pinFormatter]="props()?.pinFormatter ?? defaultPinFormatter"
+      [ticks]="props()?.ticks ?? false"
+      [snaps]="props()?.snaps ?? false"
+      [color]="props()?.color ?? 'primary'"
+    />
+
+    @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: IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "label", "labelPlacement", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: IonicSliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-slider', imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost, NgForgeHostControl], template: `
+    @let f = ngf.field();
+    @let inputId = ngf.key() + '-input';
+
+    <ion-range
+      [id]="inputId"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="props()?.labelPlacement ?? 'stacked'"
+      [min]="f().min?.() ?? props()?.min ?? 0"
+      [max]="f().max?.() ?? props()?.max ?? 100"
+      [step]="step() ?? props()?.step ?? 1"
+      [dualKnobs]="props()?.dualKnobs ?? false"
+      [pin]="props()?.pin ?? false"
+      [pinFormatter]="props()?.pinFormatter ?? defaultPinFormatter"
+      [ticks]="props()?.ticks ?? false"
+      [snaps]="props()?.snaps ?? false"
+      [color]="props()?.color ?? 'primary'"
+    />
+
+    @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: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { IonicSliderFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-slider.mjs","mappings":";;;;;;;;AAoDc;;AAGH;;AACA;;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/slider/ionic-slider.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonNote, IonRange } from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeHostControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicSliderProps } from './ionic-slider.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-slider',\n  imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeFieldHost, NgForgeHostControl],\n  template: `\n    @let f = ngf.field();\n    @let inputId = ngf.key() + '-input';\n\n    <ion-range\n      [id]=\"inputId\"\n      [formField]=\"f\"\n      [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n      [labelPlacement]=\"props()?.labelPlacement ?? 'stacked'\"\n      [min]=\"f().min?.() ?? props()?.min ?? 0\"\n      [max]=\"f().max?.() ?? props()?.max ?? 100\"\n      [step]=\"step() ?? props()?.step ?? 1\"\n      [dualKnobs]=\"props()?.dualKnobs ?? false\"\n      [pin]=\"props()?.pin ?? false\"\n      [pinFormatter]=\"props()?.pinFormatter ?? defaultPinFormatter\"\n      [ticks]=\"props()?.ticks ?? false\"\n      [snaps]=\"props()?.snaps ?? false\"\n      [color]=\"props()?.color ?? 'primary'\"\n    />\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 IonicSliderFieldComponent {\n  protected readonly ngf = injectNgForgeField<number>();\n\n  readonly step = input<number>();\n  readonly props = input<IonicSliderProps>();\n\n  protected defaultPinFormatter = (value: number) => String(value);\n}\n"]}

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

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { FormField } from '@angular/forms/signals';
+import { IonTextarea, 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 IonicTextareaFieldComponent {
+    elementRef = inject((ElementRef));
+    ngf = injectNgForgeField();
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    constructor() {
+                                explicitEffect([this.ngf.ariaDescribedBy], ([describedBy]) => {
+            queueMicrotask(() => {
+                const ionTextarea = this.elementRef.nativeElement.querySelector('ion-textarea');
+                if (ionTextarea?.getInputElement) {
+                    ionTextarea.getInputElement().then((textareaEl) => {
+                        if (!textareaEl)
+                            return;
+                        if (describedBy) {
+                            textareaEl.setAttribute('aria-describedby', describedBy);
+                        }
+                        else {
+                            textareaEl.removeAttribute('aria-describedby');
+                        }
+                    });
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicTextareaFieldComponent, isStandalone: true, selector: "df-ion-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let textareaId = ngf.key() + '-textarea';
+
+    <ion-textarea
+      ngForgeControl
+      [id]="textareaId"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="props()?.labelPlacement ?? 'stacked'"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [rows]="props()?.rows ?? 4"
+      [autoGrow]="props()?.autoGrow ?? false"
+      [counter]="props()?.counter ?? false"
+      [minlength]="f().minLength?.()"
+      [maxlength]="f().maxLength?.()"
+      [color]="props()?.color"
+      [fill]="props()?.fill ?? 'outline'"
+      [shape]="props()?.shape"
+      [readonly]="f().readonly()"
+      [helperText]="ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined"
+      [attr.tabindex]="ngf.tabIndex()"
+    />
+    @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}\n"], dependencies: [{ kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { 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: IonicTextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-textarea', imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let textareaId = ngf.key() + '-textarea';
+
+    <ion-textarea
+      ngForgeControl
+      [id]="textareaId"
+      [formField]="f"
+      [label]="(ngf.label() | dynamicText | async) ?? undefined"
+      [labelPlacement]="props()?.labelPlacement ?? 'stacked'"
+      [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
+      [rows]="props()?.rows ?? 4"
+      [autoGrow]="props()?.autoGrow ?? false"
+      [counter]="props()?.counter ?? false"
+      [minlength]="f().minLength?.()"
+      [maxlength]="f().maxLength?.()"
+      [color]="props()?.color"
+      [fill]="props()?.fill ?? 'outline'"
+      [shape]="props()?.shape"
+      [readonly]="f().readonly()"
+      [helperText]="ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined"
+      [attr.tabindex]="ngf.tabIndex()"
+    />
+    @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, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+
+export { IonicTextareaFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-textarea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-textarea.mjs","mappings":";;;;;;;;;AAkDc;AACK;;AAIR;;AAET;wBAIE;;AAEI;AACA;;AAEI;;;AAEE;;;AAEA;;AAEJ;;AAEJ;AACF;;;AAzBiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxCT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/textarea/ionic-textarea.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, inject, input } from '@angular/core';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { FormField } from '@angular/forms/signals';\nimport { IonNote, IonTextarea } from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicTextareaProps } from './ionic-textarea.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-textarea',\n  imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let textareaId = ngf.key() + '-textarea';\n\n    <ion-textarea\n      ngForgeControl\n      [id]=\"textareaId\"\n      [formField]=\"f\"\n      [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n      [labelPlacement]=\"props()?.labelPlacement ?? 'stacked'\"\n      [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n      [rows]=\"props()?.rows ?? 4\"\n      [autoGrow]=\"props()?.autoGrow ?? false\"\n      [counter]=\"props()?.counter ?? false\"\n      [minlength]=\"f().minLength?.()\"\n      [maxlength]=\"f().maxLength?.()\"\n      [color]=\"props()?.color\"\n      [fill]=\"props()?.fill ?? 'outline'\"\n      [shape]=\"props()?.shape\"\n      [readonly]=\"f().readonly()\"\n      [helperText]=\"ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined\"\n      [attr.tabindex]=\"ngf.tabIndex()\"\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    }\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 IonicTextareaFieldComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  protected readonly ngf = injectNgForgeField<string>();\n\n  readonly props = input<IonicTextareaProps>();\n\n  constructor() {\n    // ion-textarea encapsulates a native <textarea> 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        const ionTextarea = this.elementRef.nativeElement.querySelector('ion-textarea') as HTMLIonTextareaElement | null;\n        if (ionTextarea?.getInputElement) {\n          ionTextarea.getInputElement().then((textareaEl) => {\n            if (!textareaEl) return;\n            if (describedBy) {\n              textareaEl.setAttribute('aria-describedby', describedBy);\n            } else {\n              textareaEl.removeAttribute('aria-describedby');\n            }\n          });\n        }\n      });\n    });\n  }\n}\n"]}

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

@@ -0,0 +1,146 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { IonToggle, IonNote } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { NgForgeControl, injectNgForgeField, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
+import { AsyncPipe } from '@angular/common';
+
+class IonicToggleControlComponent {
+                    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+                labelPlacement = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
+    justify = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    enableOnOffLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableOnOffLabels" }] : /* istanbul ignore next */ []));
+    tabIndex = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+            ariaReadonly = computed(() => (this.readonly() ? true : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : /* istanbul ignore next */ []));
+        isChecked = computed(() => {
+        return this.checked() === true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+        isEffectivelyDisabled = computed(() => {
+        return this.disabled() || this.readonly();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+                    onToggleChange(event) {
+        this.checked.set(event.detail.checked);
+    }
+        onBlur() {
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: IonicToggleControlComponent, isStandalone: true, selector: "df-ion-toggle-control", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, enableOnOffLabels: { classPropertyName: "enableOnOffLabels", publicName: "enableOnOffLabels", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
+    <ion-toggle
+      ngForgeControl
+      [checked]="isChecked()"
+      (ionChange)="onToggleChange($event)"
+      (ionBlur)="onBlur()"
+      [labelPlacement]="labelPlacement()"
+      [justify]="justify()"
+      [color]="color()"
+      [enableOnOffLabels]="enableOnOffLabels()"
+      [disabled]="isEffectivelyDisabled()"
+      [attr.tabindex]="tabIndex()"
+      [attr.aria-readonly]="ariaReadonly()"
+    >
+      <ng-content />
+    </ion-toggle>
+  `, 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"], dependencies: [{ kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-toggle-control', imports: [IonToggle, NgForgeControl], template: `
+    <ion-toggle
+      ngForgeControl
+      [checked]="isChecked()"
+      (ionChange)="onToggleChange($event)"
+      (ionBlur)="onBlur()"
+      [labelPlacement]="labelPlacement()"
+      [justify]="justify()"
+      [color]="color()"
+      [enableOnOffLabels]="enableOnOffLabels()"
+      [disabled]="isEffectivelyDisabled()"
+      [attr.tabindex]="tabIndex()"
+      [attr.aria-readonly]="ariaReadonly()"
+    >
+      <ng-content />
+    </ion-toggle>
+  `, host: {
+                        style: 'display: block',
+                    }, 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"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], enableOnOffLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableOnOffLabels", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
+
+class IonicToggleFieldComponent {
+    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: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicToggleFieldComponent, isStandalone: true, selector: "df-ion-toggle", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
+    @let f = ngf.field();
+    @let toggleId = ngf.key() + '-toggle';
+
+    <df-ion-toggle-control
+      [id]="toggleId"
+      [formField]="f"
+      [labelPlacement]="props()?.labelPlacement ?? 'end'"
+      [justify]="props()?.justify"
+      [color]="props()?.color ?? 'primary'"
+      [enableOnOffLabels]="props()?.enableOnOffLabels ?? false"
+      [tabIndex]="ngf.tabIndex()"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </df-ion-toggle-control>
+
+    @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: IonicToggleControlComponent, selector: "df-ion-toggle-control", inputs: ["checked", "touched", "disabled", "readonly", "invalid", "required", "labelPlacement", "justify", "color", "enableOnOffLabels", "tabIndex"], outputs: ["checkedChange", "touchedChange"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: IonicToggleFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-ion-toggle', imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost], template: `
+    @let f = ngf.field();
+    @let toggleId = ngf.key() + '-toggle';
+
+    <df-ion-toggle-control
+      [id]="toggleId"
+      [formField]="f"
+      [labelPlacement]="props()?.labelPlacement ?? 'end'"
+      [justify]="props()?.justify"
+      [color]="props()?.color ?? 'primary'"
+      [enableOnOffLabels]="props()?.enableOnOffLabels ?? false"
+      [tabIndex]="ngf.tabIndex()"
+    >
+      {{ ngf.label() | dynamicText | async }}
+    </df-ion-toggle-control>
+
+    @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 { IonicToggleControlComponent, IonicToggleFieldComponent };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-toggle.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuEqB;;IAGA;AACjB;;;AAGF,IAImB;;;;gBASnB;;;;AAME;;;AA7DS;;;;;;;;;;;;;;;;;;;;AAzBD;;;;;;;;;;;;;;;;;AAqBR;;;;ACiBU;;AAGH;;;AAHU;;;;;;;;;;;;;;;;;;;;;;;;;AAvCT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/toggle/ionic-toggle-control.component.ts","../../../../packages/dynamic-forms-ionic/src/lib/fields/toggle/ionic-toggle.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport type { FormCheckboxControl } from '@angular/forms/signals';\nimport { IonToggle } from '@ionic/angular/standalone';\nimport { NgForgeControl } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * ion-toggle wrapper implementing FormCheckboxControl. Rendered inside\n * `df-ion-toggle`. `NgForgeControl` on `<ion-toggle>` claims the ambient\n * parent NgForgeField and routes meta + aria onto that element.\n */\n@Component({\n  selector: 'df-ion-toggle-control',\n  imports: [IonToggle, NgForgeControl],\n  template: `\n    <ion-toggle\n      ngForgeControl\n      [checked]=\"isChecked()\"\n      (ionChange)=\"onToggleChange($event)\"\n      (ionBlur)=\"onBlur()\"\n      [labelPlacement]=\"labelPlacement()\"\n      [justify]=\"justify()\"\n      [color]=\"color()\"\n      [enableOnOffLabels]=\"enableOnOffLabels()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-readonly]=\"ariaReadonly()\"\n    >\n      <ng-content />\n    </ion-toggle>\n  `,\n  styleUrl: '../../styles/_form-field.scss',\n  host: {\n    style: 'display: block',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IonicToggleControlComponent implements FormCheckboxControl {\n  // ─────────────────────────────────────────────────────────────────────────────\n  // FormCheckboxControl implementation\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /** The checked state - required by FormCheckboxControl */\n  readonly checked = model<boolean>(false);\n\n  /** Tracks whether the field has been touched - used by Field directive */\n  readonly touched = model<boolean>(false);\n\n  /** Whether the field is disabled */\n  readonly disabled = input<boolean>(false);\n\n  /** Whether the field is readonly */\n  readonly readonly = input<boolean>(false);\n\n  /** Whether the field is invalid (from Field directive) */\n  readonly invalid = input<boolean>(false);\n\n  /** Whether the field is required (from Field directive) */\n  readonly required = input<boolean>(false);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Ionic-specific props\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly labelPlacement = input<'start' | 'end' | 'fixed' | 'stacked'>('end');\n  readonly justify = input<'start' | 'end' | 'space-between' | undefined>(undefined);\n  readonly color = input<string>('primary');\n  readonly enableOnOffLabels = input<boolean>(false);\n  readonly tabIndex = input<number | undefined>(undefined);\n\n  // aria-invalid / aria-required / aria-describedby are written to <ion-toggle>\n  // by NgForgeControl. aria-readonly is Ionic-specific and stays template-side.\n  protected readonly ariaReadonly = computed(() => (this.readonly() ? true : null));\n\n  /** Computed checked state - ensures proper boolean conversion for ion-toggle */\n  protected readonly isChecked = computed(() => {\n    return this.checked() === true;\n  });\n\n  /**\n   * ion-toggle doesn't have a native readonly attribute.\n   * When readonly, we disable the toggle to prevent changes while maintaining the visual state.\n   */\n  protected readonly isEffectivelyDisabled = computed(() => {\n    return this.disabled() || this.readonly();\n  });\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Event Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /** Handle toggle change - sync ion-toggle's checked state to our checked model */\n  onToggleChange(event: CustomEvent<{ checked: boolean; value: string }>): void {\n    this.checked.set(event.detail.checked);\n  }\n\n  /** Marks the field as touched when toggle loses focus */\n  onBlur(): void {\n    this.touched.set(true);\n  }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonNote } from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicToggleProps } from './ionic-toggle.type';\nimport { IonicToggleControlComponent } from './ionic-toggle-control.component';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'df-ion-toggle',\n  imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeFieldHost],\n  template: `\n    @let f = ngf.field();\n    @let toggleId = ngf.key() + '-toggle';\n\n    <df-ion-toggle-control\n      [id]=\"toggleId\"\n      [formField]=\"f\"\n      [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n      [justify]=\"props()?.justify\"\n      [color]=\"props()?.color ?? 'primary'\"\n      [enableOnOffLabels]=\"props()?.enableOnOffLabels ?? false\"\n      [tabIndex]=\"ngf.tabIndex()\"\n    >\n      {{ ngf.label() | dynamicText | async }}\n    </df-ion-toggle-control>\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 IonicToggleFieldComponent {\n  protected readonly ngf = injectNgForgeField<boolean>();\n\n  readonly props = input<IonicToggleProps>();\n}\n"]}

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

@@ -0,0 +1,83 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injector, computed, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { IonIcon, IonSpinner } from '@ionic/angular/standalone';
+import * as i1 from '@ng-forge/dynamic-forms/integration';
+import { injectNgForgeAddonAction, resolveDynamicValue, DynamicTextPipe, NgForgeAddonAction, runPresetAction } from '@ng-forge/dynamic-forms/integration';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+
+const IONIC_CONFIG = new InjectionToken('IONIC_CONFIG');
+
+const IONIC_INPUT_TYPE_OVERRIDE = new InjectionToken('IONIC_INPUT_TYPE_OVERRIDE');
+
+class IonicInlineButtonAddonComponent {
+    injector = inject(Injector);
+    action = injectNgForgeAddonAction();
+    addon = this.action.addon;
+    label = computed(() => this.addon().label, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    icon = computed(() => this.addon().icon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    color = computed(() => this.addon().color, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    fill = computed(() => this.addon().fill ?? 'clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    iconOnly = computed(() => !!this.icon() && !this.label(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    ariaLabelSignal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelSignal" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.ariaLabelSignal()?.() ?? undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        explicitEffect([this.ariaLabel], ([raw]) => {
+            if (raw === undefined) {
+                this.ariaLabelSignal.set(undefined);
+                return;
+            }
+            this.ariaLabelSignal.set(resolveDynamicValue(raw, undefined, this.injector));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicInlineButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: IonicInlineButtonAddonComponent, isStandalone: true, selector: "ion-button[df-ion-button-addon]", host: { listeners: { "click": "action.dispatch()" }, properties: { "attr.color": "color() ?? null", "attr.fill": "fill()", "attr.disabled": "action.disabled() || action.loading() ? \"true\" : null", "attr.aria-label": "resolvedAriaLabel() ?? null", "attr.aria-busy": "action.loading() || null" } }, hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
+    @if (action.loading()) {
+      <ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
+      <span class="df-ion-sr-only" role="status">Loading…</span>
+    } @else if (icon(); as ic) {
+      <ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
+    }
+    @if (label(); as lbl) {
+      {{ lbl | dynamicText | async }}
+    }
+  `, isInline: true, styles: [".df-ion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IonicInlineButtonAddonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ion-button[df-ion-button-addon]', imports: [IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
+    @if (action.loading()) {
+      <ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
+      <span class="df-ion-sr-only" role="status">Loading…</span>
+    } @else if (icon(); as ic) {
+      <ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
+    }
+    @if (label(); as lbl) {
+      {{ lbl | dynamicText | async }}
+    }
+  `, host: {
+                        '[attr.color]': 'color() ?? null',
+                        '[attr.fill]': 'fill()',
+                        '[attr.disabled]': 'action.disabled() || action.loading() ? "true" : null',
+                        '[attr.aria-label]': 'resolvedAriaLabel() ?? null',
+                        '[attr.aria-busy]': 'action.loading() || null',
+                        '(click)': 'action.dispatch()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+function runIonicPresetAction(preset, context, collaborators) {
+    return runPresetAction(preset, context, collaborators, 'Ionic', 'ion-input');
+}
+
+
+export { IONIC_CONFIG, IONIC_INPUT_TYPE_OVERRIDE, IonicInlineButtonAddonComponent, runIonicPresetAction };
+//# sourceMappingURL=ng-forge-dynamic-forms-ionic-shared.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-ionic-shared.mjs","mappings":";;;;;;;;;;;;;AAsDmB;;AAGE;;;;;;;;;AAKA;;AACA;;;;AAGA;;AAEnB;AACE;AACE;AACE;;;AAGF;AACF;;;AAtBS;;;;;;;;;;AA1BV;;;;AAbS;;;;;;;;;;;AA8BR;AACA;AACA;AACA;AACA;AACA;;;;;ACtCF;AACF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/shared/ionic-inline-button-addon.component.ts","../../../../packages/dynamic-forms-ionic/shared/preset-actions.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, Injector, type Signal, signal } from '@angular/core';\nimport { IonIcon, IonSpinner } from '@ionic/angular/standalone';\nimport type { DynamicText } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe, injectNgForgeAddonAction, NgForgeAddonAction, resolveDynamicValue } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport type { IonicButtonAddon } from './addons';\n\n/**\n * Inline `ion-button` addon whose host is the slotted Ionic button itself.\n * It lives in the shared entry because the lazily loaded input component\n * consumes it while the primary package must not pull in field renderers.\n */\n@Component({\n  selector: 'ion-button[df-ion-button-addon]',\n  imports: [IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe],\n  hostDirectives: [NgForgeAddonAction],\n  template: `\n    @if (action.loading()) {\n      <ion-spinner [slot]=\"iconOnly() ? 'icon-only' : 'start'\" name=\"dots\"></ion-spinner>\n      <span class=\"df-ion-sr-only\" role=\"status\">Loading…</span>\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  `,\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  host: {\n    '[attr.color]': 'color() ?? null',\n    '[attr.fill]': 'fill()',\n    '[attr.disabled]': 'action.disabled() || action.loading() ? \"true\" : null',\n    '[attr.aria-label]': 'resolvedAriaLabel() ?? null',\n    '[attr.aria-busy]': 'action.loading() || null',\n    '(click)': 'action.dispatch()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IonicInlineButtonAddonComponent {\n  private readonly injector = inject(Injector);\n  protected readonly action = injectNgForgeAddonAction<IonicButtonAddon>();\n\n  protected readonly addon = this.action.addon;\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  protected readonly color = computed(() => this.addon().color);\n  protected readonly fill = computed(() => this.addon().fill ?? 'clear');\n  protected readonly iconOnly = computed(() => !!this.icon() && !this.label());\n\n  private readonly ariaLabelSignal = signal<Signal<string | undefined> | undefined>(undefined);\n  protected readonly resolvedAriaLabel = computed(() => this.ariaLabelSignal()?.() ?? undefined);\n\n  constructor() {\n    explicitEffect([this.ariaLabel], ([raw]) => {\n      if (raw === undefined) {\n        this.ariaLabelSignal.set(undefined);\n        return;\n      }\n      this.ariaLabelSignal.set(resolveDynamicValue<string | undefined>(raw as DynamicText, undefined, this.injector));\n    });\n  }\n}\n","import type { AddonActionContext, AddonActionPreset } from '@ng-forge/dynamic-forms';\nimport { runPresetAction, type PresetCollaborators } from '@ng-forge/dynamic-forms/integration';\n\nexport type { PresetCollaborators };\n\n/** Ionic adapter binding for the shared preset runner. */\nexport function runIonicPresetAction(\n  preset: AddonActionPreset,\n  context: AddonActionContext,\n  collaborators: PresetCollaborators,\n): Promise<void> {\n  return runPresetAction(preset, context, collaborators, 'Ionic', 'ion-input');\n}\n"]}