@ng-forge/dynamic-forms-ionic 0.9.0-next.11 → 0.9.0-next.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component, signal,
|
|
3
|
-
import { IonButton, IonCheckbox, IonNote, IonInput, IonModal, IonDatetime, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonItem, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonRange, IonTextarea, IonToggle } from '@ionic/angular/standalone';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, signal, inject, Injector, InjectionToken, ElementRef, DestroyRef, forwardRef, linkedSignal, model, isSignal } from '@angular/core';
|
|
3
|
+
import { IonButton, IonCheckbox, IonNote, IonInput, IonModal, IonDatetime, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonIcon, IonSpinner, IonItem, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonRange, IonTextarea, IonToggle } from '@ionic/angular/standalone';
|
|
4
4
|
import { AsyncPipe } from '@angular/common';
|
|
5
|
-
import { DynamicTextPipe, DEFAULT_PROPS, ARRAY_CONTEXT, buildBaseInputs } from '@ng-forge/dynamic-forms';
|
|
5
|
+
import { DynamicTextPipe, runPresetAction, resolveDynamicValue, DfAddonSlot, FIELD_SIGNAL_CONTEXT, DynamicFormLogger, DEFAULT_PROPS, ARRAY_CONTEXT, buildBaseInputs, DynamicFormError, ADDON_KIND_DEFINITIONS } from '@ng-forge/dynamic-forms';
|
|
6
6
|
import * as i1 from '@ng-forge/dynamic-forms/integration';
|
|
7
|
-
import { injectNgForgeAction, NgForgeActionHost, injectNgForgeField, NgForgeControl, NgForgeFieldHost, isEqual, NgForgeHostControl, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
7
|
+
import { injectNgForgeAction, NgForgeActionHost, injectNgForgeField, NgForgeControl, NgForgeFieldHost, injectNgForgeAddonAction, NgForgeAddonAction, injectNgForgeAddons, ADDON_PRESET_HANDLER, NgForgeAddons, isEqual, NgForgeHostControl, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
8
8
|
import { FormField } from '@angular/forms/signals';
|
|
9
9
|
import { format } from 'date-fns';
|
|
10
10
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
@@ -19,8 +19,8 @@ class IonicButtonFieldComponent {
|
|
|
19
19
|
return;
|
|
20
20
|
this.action.dispatch();
|
|
21
21
|
}
|
|
22
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
23
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
22
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", 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: `
|
|
24
24
|
@let buttonId = action.key() + '-button';
|
|
25
25
|
|
|
26
26
|
<ion-button
|
|
@@ -41,7 +41,7 @@ class IonicButtonFieldComponent {
|
|
|
41
41
|
</ion-button>
|
|
42
42
|
`, 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 });
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicButtonFieldComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
46
|
args: [{ selector: 'df-ion-button', imports: [IonButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
|
|
47
47
|
@let buttonId = action.key() + '-button';
|
|
@@ -75,8 +75,8 @@ var ionicButton_component = /*#__PURE__*/Object.freeze({
|
|
|
75
75
|
class IonicCheckboxFieldComponent {
|
|
76
76
|
ngf = injectNgForgeField();
|
|
77
77
|
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
78
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
79
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
78
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
|
|
80
80
|
@let f = ngf.field();
|
|
81
81
|
@let checkboxId = ngf.key() + '-checkbox';
|
|
82
82
|
|
|
@@ -98,9 +98,9 @@ class IonicCheckboxFieldComponent {
|
|
|
98
98
|
} @else if (props()?.hint; as hint) {
|
|
99
99
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
100
100
|
}
|
|
101
|
-
`, isInline: true, styles: ["
|
|
101
|
+
`, 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 });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicCheckboxFieldComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: 'df-ion-checkbox', imports: [IonCheckbox, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
106
106
|
@let f = ngf.field();
|
|
@@ -124,7 +124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
124
124
|
} @else if (props()?.hint; as hint) {
|
|
125
125
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
126
126
|
}
|
|
127
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
127
|
+
`, 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"] }]
|
|
128
128
|
}], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
129
129
|
|
|
130
130
|
var ionicCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
@@ -185,8 +185,8 @@ class IonicDatepickerFieldComponent {
|
|
|
185
185
|
return format(date, 'MMM d, yyyy');
|
|
186
186
|
}
|
|
187
187
|
}
|
|
188
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
189
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
188
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
|
|
190
190
|
@let f = ngf.field();
|
|
191
191
|
@let dateValue = f().value();
|
|
192
192
|
@let inputId = ngf.key() + '-input';
|
|
@@ -239,9 +239,9 @@ class IonicDatepickerFieldComponent {
|
|
|
239
239
|
</ion-content>
|
|
240
240
|
</ng-template>
|
|
241
241
|
</ion-modal>
|
|
242
|
-
`, isInline: true, styles: ["
|
|
242
|
+
`, 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 });
|
|
243
243
|
}
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicDatepickerFieldComponent, decorators: [{
|
|
245
245
|
type: Component,
|
|
246
246
|
args: [{ selector: 'df-ion-datepicker', imports: [
|
|
247
247
|
IonInput,
|
|
@@ -310,7 +310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
310
310
|
</ion-content>
|
|
311
311
|
</ng-template>
|
|
312
312
|
</ion-modal>
|
|
313
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
313
|
+
`, 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"] }]
|
|
314
314
|
}], 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 }] }] } });
|
|
315
315
|
|
|
316
316
|
var ionicDatepicker_component = /*#__PURE__*/Object.freeze({
|
|
@@ -318,6 +318,77 @@ var ionicDatepicker_component = /*#__PURE__*/Object.freeze({
|
|
|
318
318
|
default: IonicDatepickerFieldComponent
|
|
319
319
|
});
|
|
320
320
|
|
|
321
|
+
/** Ionic adapter binding for the shared preset runner. */
|
|
322
|
+
function runIonicPresetAction(preset, ctx, collaborators) {
|
|
323
|
+
return runPresetAction(preset, ctx, collaborators, 'Ionic', 'ion-input');
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/**
|
|
327
|
+
* Inline `ion-button` addon — the host element IS `<ion-button>` so Ionic's
|
|
328
|
+
* `::slotted(ion-button[slot=start|end])` shadow CSS matches and applies its
|
|
329
|
+
* native icon-only sizing. `IonButtonAddonComponent` (tag selector) stays
|
|
330
|
+
* for the universal `<df-addon-slot>` dispatcher when the addon is rendered
|
|
331
|
+
* outside an `<ion-input>` host.
|
|
332
|
+
*/
|
|
333
|
+
class IonInlineButtonAddonComponent {
|
|
334
|
+
injector = inject(Injector);
|
|
335
|
+
action = injectNgForgeAddonAction();
|
|
336
|
+
addon = this.action.addon;
|
|
337
|
+
label = computed(() => this.addon().label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
338
|
+
ariaLabel = computed(() => this.addon().ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
339
|
+
icon = computed(() => this.addon().icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
340
|
+
color = computed(() => this.addon().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
341
|
+
fill = computed(() => this.addon().fill ?? 'clear', ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
342
|
+
iconOnly = computed(() => !!this.icon() && !this.label(), ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
343
|
+
// Host bindings can't use pipes (NG5001), so `DynamicText` is materialised
|
|
344
|
+
// via an effect (resolveDynamicValue's toSignal can't run inside computed).
|
|
345
|
+
_ariaLabelSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_ariaLabelSignal" }] : /* istanbul ignore next */ []));
|
|
346
|
+
resolvedAriaLabel = computed(() => this._ariaLabelSignal()?.() ?? undefined, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
347
|
+
constructor() {
|
|
348
|
+
explicitEffect([this.ariaLabel], ([raw]) => {
|
|
349
|
+
if (raw === undefined) {
|
|
350
|
+
this._ariaLabelSignal.set(undefined);
|
|
351
|
+
return;
|
|
352
|
+
}
|
|
353
|
+
this._ariaLabelSignal.set(resolveDynamicValue(raw, undefined, this.injector));
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonInlineButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: IonInlineButtonAddonComponent, 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: `
|
|
358
|
+
@if (action.loading()) {
|
|
359
|
+
<ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
|
|
360
|
+
<span class="df-ion-sr-only" role="status">Loading…</span>
|
|
361
|
+
} @else if (icon(); as ic) {
|
|
362
|
+
<ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
|
|
363
|
+
}
|
|
364
|
+
@if (label(); as lbl) {
|
|
365
|
+
{{ lbl | dynamicText | async }}
|
|
366
|
+
}
|
|
367
|
+
`, 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 });
|
|
368
|
+
}
|
|
369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonInlineButtonAddonComponent, decorators: [{
|
|
370
|
+
type: Component,
|
|
371
|
+
args: [{ selector: 'ion-button[df-ion-button-addon]', imports: [IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
|
|
372
|
+
@if (action.loading()) {
|
|
373
|
+
<ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
|
|
374
|
+
<span class="df-ion-sr-only" role="status">Loading…</span>
|
|
375
|
+
} @else if (icon(); as ic) {
|
|
376
|
+
<ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
|
|
377
|
+
}
|
|
378
|
+
@if (label(); as lbl) {
|
|
379
|
+
{{ lbl | dynamicText | async }}
|
|
380
|
+
}
|
|
381
|
+
`, host: {
|
|
382
|
+
// Stencil reflects [attr.*] to the underlying ion-button properties.
|
|
383
|
+
'[attr.color]': 'color() ?? null',
|
|
384
|
+
'[attr.fill]': 'fill()',
|
|
385
|
+
'[attr.disabled]': 'action.disabled() || action.loading() ? "true" : null',
|
|
386
|
+
'[attr.aria-label]': 'resolvedAriaLabel() ?? null',
|
|
387
|
+
'[attr.aria-busy]': 'action.loading() || null',
|
|
388
|
+
'(click)': 'action.dispatch()',
|
|
389
|
+
}, 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"] }]
|
|
390
|
+
}], ctorParameters: () => [] });
|
|
391
|
+
|
|
321
392
|
/**
|
|
322
393
|
* Injection token for Ionic form configuration.
|
|
323
394
|
* Use this to provide global configuration for Ionic form fields.
|
|
@@ -341,44 +412,70 @@ var ionicDatepicker_component = /*#__PURE__*/Object.freeze({
|
|
|
341
412
|
*/
|
|
342
413
|
const IONIC_CONFIG = new InjectionToken('IONIC_CONFIG');
|
|
343
414
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
//
|
|
358
|
-
//
|
|
359
|
-
//
|
|
360
|
-
//
|
|
361
|
-
// camelCase `maxLength` / `minLength` inputs so Signal Forms's setInputOnDirectives
|
|
362
|
-
// auto-wires. See packages/dynamic-forms-primeng/src/lib/fields/textarea/.
|
|
415
|
+
/**
|
|
416
|
+
* Per-field writable signal that overrides the input's `type` attribute.
|
|
417
|
+
*
|
|
418
|
+
* Provided at the `ion-input` field component level. The button addon's
|
|
419
|
+
* `'toggle-password-visibility'` preset writes to it; the field component
|
|
420
|
+
* reads it to compute its effective `type`.
|
|
421
|
+
*
|
|
422
|
+
* Optional from a button's perspective — when the button is hosted inside a
|
|
423
|
+
* field that doesn't provide this token (e.g., textarea or a future
|
|
424
|
+
* non-input field), the toggle preset is a no-op.
|
|
425
|
+
*/
|
|
426
|
+
const IONIC_INPUT_TYPE_OVERRIDE = new InjectionToken('IONIC_INPUT_TYPE_OVERRIDE');
|
|
427
|
+
|
|
428
|
+
// minlength/maxlength bindings: Signal Forms auto-syncs these on NATIVE
|
|
429
|
+
// inputs; <ion-input> is a Stencil web component so we bind directly from
|
|
430
|
+
// FieldState (`f().maxLength?.()` — the signal itself is missing when no
|
|
431
|
+
// validator is configured).
|
|
363
432
|
class IonicInputFieldComponent {
|
|
364
433
|
elementRef = inject((ElementRef));
|
|
365
434
|
ionicConfig = inject(IONIC_CONFIG, { optional: true });
|
|
366
435
|
ngf = injectNgForgeField();
|
|
436
|
+
ngfa = injectNgForgeAddons();
|
|
367
437
|
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
438
|
+
/**
|
|
439
|
+
* Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the
|
|
440
|
+
* component level so `setInputIfDeclared` (which uses
|
|
441
|
+
* `reflectComponentType`) can write it.
|
|
442
|
+
*/
|
|
443
|
+
fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
444
|
+
/** Per-instance type override populated by `toggle-password-visibility` preset. */
|
|
445
|
+
typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
|
|
368
446
|
fill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
369
447
|
shape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
370
|
-
|
|
448
|
+
/** Default 'stacked' (label above the input) for adapter parity with Material /
|
|
449
|
+
* Bootstrap / PrimeNG. Consumers can opt into Ionic's native inline 'start'
|
|
450
|
+
* or 'fixed' via props.labelPlacement or the IONIC_CONFIG token. */
|
|
451
|
+
labelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'stacked', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
|
|
371
452
|
color = computed(() => this.props()?.color ?? this.ionicConfig?.color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
453
|
+
/** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */
|
|
454
|
+
type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
455
|
+
/** Per-kind split: ion-button addons render inline via the attribute-
|
|
456
|
+
* selector inline component (so the slotted element is a native
|
|
457
|
+
* <ion-button> Ionic can style); everything else (icon/text/template/
|
|
458
|
+
* component kinds) goes through the universal <df-addon-slot> dispatcher
|
|
459
|
+
* wrapped in <span slot="start|end"> for safe shadow-DOM projection. */
|
|
460
|
+
buttonPrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.kind === 'ion-button'), ...(ngDevMode ? [{ debugName: "buttonPrefixAddons" }] : /* istanbul ignore next */ []));
|
|
461
|
+
buttonSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.kind === 'ion-button'), ...(ngDevMode ? [{ debugName: "buttonSuffixAddons" }] : /* istanbul ignore next */ []));
|
|
462
|
+
decorativePrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.kind !== 'ion-button'), ...(ngDevMode ? [{ debugName: "decorativePrefixAddons" }] : /* istanbul ignore next */ []));
|
|
463
|
+
decorativeSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.kind !== 'ion-button'), ...(ngDevMode ? [{ debugName: "decorativeSuffixAddons" }] : /* istanbul ignore next */ []));
|
|
464
|
+
/** Set when the component is destroyed — guards async aria-describedby sync against teardown. */
|
|
465
|
+
destroyed = false;
|
|
372
466
|
constructor() {
|
|
467
|
+
inject(DestroyRef).onDestroy(() => (this.destroyed = true));
|
|
373
468
|
// ion-input encapsulates a native <input> in shadow DOM and does not automatically
|
|
374
469
|
// propagate aria-describedby to it. This effect imperatively syncs the attribute
|
|
375
470
|
// after a microtask to ensure Ionic has resolved the internal element.
|
|
376
471
|
explicitEffect([this.ngf.ariaDescribedBy], ([describedBy]) => {
|
|
377
472
|
queueMicrotask(() => {
|
|
473
|
+
if (this.destroyed)
|
|
474
|
+
return;
|
|
378
475
|
const ionInput = this.elementRef.nativeElement.querySelector('ion-input');
|
|
379
476
|
if (ionInput?.getInputElement) {
|
|
380
477
|
ionInput.getInputElement().then((inputEl) => {
|
|
381
|
-
if (!inputEl)
|
|
478
|
+
if (this.destroyed || !inputEl)
|
|
382
479
|
return;
|
|
383
480
|
if (describedBy) {
|
|
384
481
|
inputEl.setAttribute('aria-describedby', describedBy);
|
|
@@ -391,15 +488,47 @@ class IonicInputFieldComponent {
|
|
|
391
488
|
});
|
|
392
489
|
});
|
|
393
490
|
}
|
|
394
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: IonicInputFieldComponent, isStandalone: true, selector: "df-ion-input", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
493
|
+
{
|
|
494
|
+
provide: IONIC_INPUT_TYPE_OVERRIDE,
|
|
495
|
+
useFactory: () => signal(undefined),
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
// Adapter-specific preset semantics for `ion-button` addons (clear /
|
|
499
|
+
// reset / paste / copy / toggle-password-visibility). The directive
|
|
500
|
+
// (`NgForgeAddonAction`) delegates here when an addon configures a
|
|
501
|
+
// `preset`. Per-ion-input-instance so the `typeOverride` signal is
|
|
502
|
+
// scoped to one field.
|
|
503
|
+
provide: ADDON_PRESET_HANDLER,
|
|
504
|
+
useFactory: () => {
|
|
505
|
+
const typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
|
|
506
|
+
const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
|
|
507
|
+
const logger = inject(DynamicFormLogger);
|
|
508
|
+
// forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.
|
|
509
|
+
const host = inject(forwardRef(() => IonicInputFieldComponent));
|
|
510
|
+
return {
|
|
511
|
+
run: (preset, ctx) => {
|
|
512
|
+
const fieldKey = ctx.field.key;
|
|
513
|
+
return runIonicPresetAction(preset, ctx, {
|
|
514
|
+
typeOverride,
|
|
515
|
+
fieldValueSetter: ctx.setValue,
|
|
516
|
+
fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
|
|
517
|
+
baselineType: () => host.props()?.type,
|
|
518
|
+
logger,
|
|
519
|
+
});
|
|
520
|
+
},
|
|
521
|
+
};
|
|
522
|
+
},
|
|
523
|
+
},
|
|
524
|
+
], hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
|
|
396
525
|
@let f = ngf.field();
|
|
397
526
|
@let inputId = ngf.key() + '-input';
|
|
398
527
|
|
|
399
528
|
<ion-input
|
|
400
529
|
ngForgeControl
|
|
401
530
|
[id]="inputId"
|
|
402
|
-
[type]="
|
|
531
|
+
[type]="type()"
|
|
403
532
|
[formField]="f"
|
|
404
533
|
[label]="(ngf.label() | dynamicText | async) ?? undefined"
|
|
405
534
|
[labelPlacement]="labelPlacement()"
|
|
@@ -414,22 +543,39 @@ class IonicInputFieldComponent {
|
|
|
414
543
|
[readonly]="f().readonly()"
|
|
415
544
|
[helperText]="ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined"
|
|
416
545
|
[attr.tabindex]="ngf.tabIndex()"
|
|
417
|
-
|
|
546
|
+
>
|
|
547
|
+
@for (a of decorativePrefixAddons(); track $index) {
|
|
548
|
+
<span slot="start">
|
|
549
|
+
<df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
|
|
550
|
+
</span>
|
|
551
|
+
}
|
|
552
|
+
@for (a of buttonPrefixAddons(); track $index) {
|
|
553
|
+
<ion-button df-ion-button-addon slot="start" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
|
|
554
|
+
}
|
|
555
|
+
@for (a of buttonSuffixAddons(); track $index) {
|
|
556
|
+
<ion-button df-ion-button-addon slot="end" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
|
|
557
|
+
}
|
|
558
|
+
@for (a of decorativeSuffixAddons(); track $index) {
|
|
559
|
+
<span slot="end">
|
|
560
|
+
<df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
|
|
561
|
+
</span>
|
|
562
|
+
}
|
|
563
|
+
</ion-input>
|
|
418
564
|
@if (ngf.errorsToDisplay()[0]; as error) {
|
|
419
565
|
<ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
|
|
420
566
|
}
|
|
421
|
-
`, isInline: true, styles: ["
|
|
567
|
+
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}:host{--df-ion-addon-prefix-outer-padding: 0;--df-ion-addon-prefix-inner-padding: .5rem;--df-ion-addon-suffix-inner-padding: .5rem;--df-ion-addon-suffix-outer-padding: 0}:host ::ng-deep ion-input [slot=start],:host ::ng-deep ion-input [slot=end]{display:inline-flex;align-items:center;align-self:center;line-height:1}:host ::ng-deep ion-input [slot=start] df-addon-slot,:host ::ng-deep ion-input [slot=end] df-addon-slot,:host ::ng-deep ion-input [slot=start] df-ion-icon-addon,:host ::ng-deep ion-input [slot=end] df-ion-icon-addon{display:inline-flex;align-items:center;line-height:1}:host ::ng-deep ion-input [slot=start]{padding-inline-start:var(--df-ion-addon-prefix-outer-padding);padding-inline-end:var(--df-ion-addon-prefix-inner-padding)}:host ::ng-deep ion-input [slot=end]{padding-inline-start:var(--df-ion-addon-suffix-inner-padding);padding-inline-end:var(--df-ion-addon-suffix-outer-padding)}:host ::ng-deep ion-input ion-icon{color:inherit}\n"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "component", type: IonInlineButtonAddonComponent, selector: "ion-button[df-ion-button-addon]" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
422
568
|
}
|
|
423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicInputFieldComponent, decorators: [{
|
|
424
570
|
type: Component,
|
|
425
|
-
args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
571
|
+
args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot, IonInlineButtonAddonComponent], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
|
|
426
572
|
@let f = ngf.field();
|
|
427
573
|
@let inputId = ngf.key() + '-input';
|
|
428
574
|
|
|
429
575
|
<ion-input
|
|
430
576
|
ngForgeControl
|
|
431
577
|
[id]="inputId"
|
|
432
|
-
[type]="
|
|
578
|
+
[type]="type()"
|
|
433
579
|
[formField]="f"
|
|
434
580
|
[label]="(ngf.label() | dynamicText | async) ?? undefined"
|
|
435
581
|
[labelPlacement]="labelPlacement()"
|
|
@@ -444,12 +590,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
444
590
|
[readonly]="f().readonly()"
|
|
445
591
|
[helperText]="ngf.errorsToDisplay().length === 0 ? ((props()?.hint | dynamicText | async) ?? undefined) : undefined"
|
|
446
592
|
[attr.tabindex]="ngf.tabIndex()"
|
|
447
|
-
|
|
593
|
+
>
|
|
594
|
+
@for (a of decorativePrefixAddons(); track $index) {
|
|
595
|
+
<span slot="start">
|
|
596
|
+
<df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
|
|
597
|
+
</span>
|
|
598
|
+
}
|
|
599
|
+
@for (a of buttonPrefixAddons(); track $index) {
|
|
600
|
+
<ion-button df-ion-button-addon slot="start" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
|
|
601
|
+
}
|
|
602
|
+
@for (a of buttonSuffixAddons(); track $index) {
|
|
603
|
+
<ion-button df-ion-button-addon slot="end" [addon]="a" [fieldInputs]="fieldInputs()"></ion-button>
|
|
604
|
+
}
|
|
605
|
+
@for (a of decorativeSuffixAddons(); track $index) {
|
|
606
|
+
<span slot="end">
|
|
607
|
+
<df-addon-slot [addon]="a" [fieldInputs]="fieldInputs()" [hidden]="ngfa.hiddenSignalCache().get(a)" />
|
|
608
|
+
</span>
|
|
609
|
+
}
|
|
610
|
+
</ion-input>
|
|
448
611
|
@if (ngf.errorsToDisplay()[0]; as error) {
|
|
449
612
|
<ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
|
|
450
613
|
}
|
|
451
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
452
|
-
|
|
614
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
615
|
+
{
|
|
616
|
+
provide: IONIC_INPUT_TYPE_OVERRIDE,
|
|
617
|
+
useFactory: () => signal(undefined),
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
// Adapter-specific preset semantics for `ion-button` addons (clear /
|
|
621
|
+
// reset / paste / copy / toggle-password-visibility). The directive
|
|
622
|
+
// (`NgForgeAddonAction`) delegates here when an addon configures a
|
|
623
|
+
// `preset`. Per-ion-input-instance so the `typeOverride` signal is
|
|
624
|
+
// scoped to one field.
|
|
625
|
+
provide: ADDON_PRESET_HANDLER,
|
|
626
|
+
useFactory: () => {
|
|
627
|
+
const typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
|
|
628
|
+
const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
|
|
629
|
+
const logger = inject(DynamicFormLogger);
|
|
630
|
+
// forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.
|
|
631
|
+
const host = inject(forwardRef(() => IonicInputFieldComponent));
|
|
632
|
+
return {
|
|
633
|
+
run: (preset, ctx) => {
|
|
634
|
+
const fieldKey = ctx.field.key;
|
|
635
|
+
return runIonicPresetAction(preset, ctx, {
|
|
636
|
+
typeOverride,
|
|
637
|
+
fieldValueSetter: ctx.setValue,
|
|
638
|
+
fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
|
|
639
|
+
baselineType: () => host.props()?.type,
|
|
640
|
+
logger,
|
|
641
|
+
});
|
|
642
|
+
},
|
|
643
|
+
};
|
|
644
|
+
},
|
|
645
|
+
},
|
|
646
|
+
], styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}:host{--df-ion-addon-prefix-outer-padding: 0;--df-ion-addon-prefix-inner-padding: .5rem;--df-ion-addon-suffix-inner-padding: .5rem;--df-ion-addon-suffix-outer-padding: 0}:host ::ng-deep ion-input [slot=start],:host ::ng-deep ion-input [slot=end]{display:inline-flex;align-items:center;align-self:center;line-height:1}:host ::ng-deep ion-input [slot=start] df-addon-slot,:host ::ng-deep ion-input [slot=end] df-addon-slot,:host ::ng-deep ion-input [slot=start] df-ion-icon-addon,:host ::ng-deep ion-input [slot=end] df-ion-icon-addon{display:inline-flex;align-items:center;line-height:1}:host ::ng-deep ion-input [slot=start]{padding-inline-start:var(--df-ion-addon-prefix-outer-padding);padding-inline-end:var(--df-ion-addon-prefix-inner-padding)}:host ::ng-deep ion-input [slot=end]{padding-inline-start:var(--df-ion-addon-suffix-inner-padding);padding-inline-end:var(--df-ion-addon-suffix-outer-padding)}:host ::ng-deep ion-input ion-icon{color:inherit}\n"] }]
|
|
647
|
+
}], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
|
|
453
648
|
|
|
454
649
|
var ionicInput_component = /*#__PURE__*/Object.freeze({
|
|
455
650
|
__proto__: null,
|
|
@@ -498,8 +693,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
498
693
|
}
|
|
499
694
|
});
|
|
500
695
|
}
|
|
501
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
502
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
696
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ion-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
503
698
|
@let f = ngf.field();
|
|
504
699
|
@let checked = checkedValuesMap();
|
|
505
700
|
@if (ngf.label(); as label) {
|
|
@@ -537,9 +732,9 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
537
732
|
} @else if (props()?.hint; as hint) {
|
|
538
733
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
539
734
|
}
|
|
540
|
-
`, isInline: true, styles: ["
|
|
735
|
+
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
541
736
|
}
|
|
542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
|
|
543
738
|
type: Component,
|
|
544
739
|
args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
545
740
|
@let f = ngf.field();
|
|
@@ -579,7 +774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
579
774
|
} @else if (props()?.hint; as hint) {
|
|
580
775
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
581
776
|
}
|
|
582
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
777
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"] }]
|
|
583
778
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
584
779
|
|
|
585
780
|
var ionicMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
@@ -592,8 +787,8 @@ class IonicRadioFieldComponent {
|
|
|
592
787
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
593
788
|
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
594
789
|
defaultCompare = Object.is;
|
|
595
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
790
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
791
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ion-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
597
792
|
@let f = ngf.field();
|
|
598
793
|
@let radioGroupId = ngf.key() + '-radio-group';
|
|
599
794
|
@if (ngf.label(); as label) {
|
|
@@ -629,9 +824,9 @@ class IonicRadioFieldComponent {
|
|
|
629
824
|
} @else if (props()?.hint; as hint) {
|
|
630
825
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
631
826
|
}
|
|
632
|
-
`, isInline: true, styles: ["
|
|
827
|
+
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"], dependencies: [{ kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
633
828
|
}
|
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
|
|
635
830
|
type: Component,
|
|
636
831
|
args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
637
832
|
@let f = ngf.field();
|
|
@@ -669,7 +864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
669
864
|
} @else if (props()?.hint; as hint) {
|
|
670
865
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
671
866
|
}
|
|
672
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
867
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"] }]
|
|
673
868
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
674
869
|
|
|
675
870
|
var ionicRadio_component = /*#__PURE__*/Object.freeze({
|
|
@@ -682,8 +877,8 @@ class IonicSelectFieldComponent {
|
|
|
682
877
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
683
878
|
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
684
879
|
defaultCompare = Object.is;
|
|
685
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
686
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
880
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
881
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: IonicSelectFieldComponent, isStandalone: true, selector: "df-ion-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
687
882
|
@let f = ngf.field();
|
|
688
883
|
@let selectId = ngf.key() + '-select';
|
|
689
884
|
|
|
@@ -716,9 +911,9 @@ class IonicSelectFieldComponent {
|
|
|
716
911
|
} @else if (props()?.hint; as hint) {
|
|
717
912
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
718
913
|
}
|
|
719
|
-
`, isInline: true, styles: ["
|
|
914
|
+
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
720
915
|
}
|
|
721
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicSelectFieldComponent, decorators: [{
|
|
722
917
|
type: Component,
|
|
723
918
|
args: [{ selector: 'df-ion-select', imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
724
919
|
@let f = ngf.field();
|
|
@@ -753,7 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
753
948
|
} @else if (props()?.hint; as hint) {
|
|
754
949
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
755
950
|
}
|
|
756
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
951
|
+
`, 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"] }]
|
|
757
952
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
758
953
|
|
|
759
954
|
var ionicSelect_component = /*#__PURE__*/Object.freeze({
|
|
@@ -766,8 +961,8 @@ class IonicSliderFieldComponent {
|
|
|
766
961
|
step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
767
962
|
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
768
963
|
defaultPinFormatter = (value) => String(value);
|
|
769
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
770
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
964
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
965
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
|
|
771
966
|
@let f = ngf.field();
|
|
772
967
|
@let inputId = ngf.key() + '-input';
|
|
773
968
|
|
|
@@ -792,9 +987,9 @@ class IonicSliderFieldComponent {
|
|
|
792
987
|
} @else if (props()?.hint; as hint) {
|
|
793
988
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
794
989
|
}
|
|
795
|
-
`, isInline: true, styles: ["
|
|
990
|
+
`, 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 });
|
|
796
991
|
}
|
|
797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicSliderFieldComponent, decorators: [{
|
|
798
993
|
type: Component,
|
|
799
994
|
args: [{ selector: 'df-ion-slider', imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost, NgForgeHostControl], template: `
|
|
800
995
|
@let f = ngf.field();
|
|
@@ -821,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
821
1016
|
} @else if (props()?.hint; as hint) {
|
|
822
1017
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
823
1018
|
}
|
|
824
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
1019
|
+
`, 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"] }]
|
|
825
1020
|
}], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
826
1021
|
|
|
827
1022
|
var ionicSlider_component = /*#__PURE__*/Object.freeze({
|
|
@@ -855,8 +1050,8 @@ class IonicTextareaFieldComponent {
|
|
|
855
1050
|
});
|
|
856
1051
|
});
|
|
857
1052
|
}
|
|
858
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
859
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1053
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
|
|
860
1055
|
@let f = ngf.field();
|
|
861
1056
|
@let textareaId = ngf.key() + '-textarea';
|
|
862
1057
|
|
|
@@ -882,9 +1077,9 @@ class IonicTextareaFieldComponent {
|
|
|
882
1077
|
@if (ngf.errorsToDisplay()[0]; as error) {
|
|
883
1078
|
<ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
|
|
884
1079
|
}
|
|
885
|
-
`, isInline: true, styles: ["
|
|
1080
|
+
`, 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 });
|
|
886
1081
|
}
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicTextareaFieldComponent, decorators: [{
|
|
888
1083
|
type: Component,
|
|
889
1084
|
args: [{ selector: 'df-ion-textarea', imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
890
1085
|
@let f = ngf.field();
|
|
@@ -912,7 +1107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
912
1107
|
@if (ngf.errorsToDisplay()[0]; as error) {
|
|
913
1108
|
<ion-note color="danger" class="df-ion-error" [id]="ngf.errorId()" role="alert">{{ error.message }}</ion-note>
|
|
914
1109
|
}
|
|
915
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
1110
|
+
`, 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"] }]
|
|
916
1111
|
}], ctorParameters: () => [], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
917
1112
|
|
|
918
1113
|
var ionicTextarea_component = /*#__PURE__*/Object.freeze({
|
|
@@ -974,8 +1169,8 @@ class IonicToggleControlComponent {
|
|
|
974
1169
|
onBlur() {
|
|
975
1170
|
this.touched.set(true);
|
|
976
1171
|
}
|
|
977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1172
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", 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: `
|
|
979
1174
|
<ion-toggle
|
|
980
1175
|
ngForgeControl
|
|
981
1176
|
[checked]="isChecked()"
|
|
@@ -991,9 +1186,9 @@ class IonicToggleControlComponent {
|
|
|
991
1186
|
>
|
|
992
1187
|
<ng-content />
|
|
993
1188
|
</ion-toggle>
|
|
994
|
-
`, isInline: true, styles: ["
|
|
1189
|
+
`, 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 });
|
|
995
1190
|
}
|
|
996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
|
|
997
1192
|
type: Component,
|
|
998
1193
|
args: [{ selector: 'df-ion-toggle-control', imports: [IonToggle, NgForgeControl], template: `
|
|
999
1194
|
<ion-toggle
|
|
@@ -1013,14 +1208,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1013
1208
|
</ion-toggle>
|
|
1014
1209
|
`, host: {
|
|
1015
1210
|
style: 'display: block',
|
|
1016
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
1211
|
+
}, 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"] }]
|
|
1017
1212
|
}], 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 }] }] } });
|
|
1018
1213
|
|
|
1019
1214
|
class IonicToggleFieldComponent {
|
|
1020
1215
|
ngf = injectNgForgeField();
|
|
1021
1216
|
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1022
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1217
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1218
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
|
|
1024
1219
|
@let f = ngf.field();
|
|
1025
1220
|
@let toggleId = ngf.key() + '-toggle';
|
|
1026
1221
|
|
|
@@ -1041,9 +1236,9 @@ class IonicToggleFieldComponent {
|
|
|
1041
1236
|
} @else if (props()?.hint; as hint) {
|
|
1042
1237
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
1043
1238
|
}
|
|
1044
|
-
`, isInline: true, styles: ["
|
|
1239
|
+
`, 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 });
|
|
1045
1240
|
}
|
|
1046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonicToggleFieldComponent, decorators: [{
|
|
1047
1242
|
type: Component,
|
|
1048
1243
|
args: [{ selector: 'df-ion-toggle', imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost], template: `
|
|
1049
1244
|
@let f = ngf.field();
|
|
@@ -1066,7 +1261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1066
1261
|
} @else if (props()?.hint; as hint) {
|
|
1067
1262
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
1068
1263
|
}
|
|
1069
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
1264
|
+
`, 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"] }]
|
|
1070
1265
|
}], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
1071
1266
|
|
|
1072
1267
|
var ionicToggle_component = /*#__PURE__*/Object.freeze({
|
|
@@ -1164,8 +1359,12 @@ function buttonFieldMapper(fieldDef) {
|
|
|
1164
1359
|
* disabled state resolution based on form validity and options.
|
|
1165
1360
|
*/
|
|
1166
1361
|
|
|
1362
|
+
const VALUE_FIELD_TYPES_BASE = {
|
|
1363
|
+
renderReadyWhen: ['field'],
|
|
1364
|
+
};
|
|
1167
1365
|
const BUTTON_FIELD_TYPES_BASE = {
|
|
1168
1366
|
renderReadyWhen: [],
|
|
1367
|
+
valueHandling: 'exclude',
|
|
1169
1368
|
};
|
|
1170
1369
|
/**
|
|
1171
1370
|
* Ionic field type definitions
|
|
@@ -1178,87 +1377,83 @@ const IONIC_FIELD_TYPES = [
|
|
|
1178
1377
|
mapper: valueFieldMapper,
|
|
1179
1378
|
propsToMeta: ['type'],
|
|
1180
1379
|
scope: ['text-input', 'numeric'],
|
|
1380
|
+
addons: {
|
|
1381
|
+
slots: ['prefix', 'suffix'],
|
|
1382
|
+
},
|
|
1383
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1181
1384
|
},
|
|
1182
1385
|
{
|
|
1183
1386
|
name: IonicField.Select,
|
|
1184
1387
|
loadComponent: () => Promise.resolve().then(function () { return ionicSelect_component; }),
|
|
1185
1388
|
mapper: optionsFieldMapper,
|
|
1186
1389
|
scope: 'single-select',
|
|
1390
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1187
1391
|
},
|
|
1188
1392
|
{
|
|
1189
1393
|
name: IonicField.Checkbox,
|
|
1190
1394
|
loadComponent: () => Promise.resolve().then(function () { return ionicCheckbox_component; }),
|
|
1191
1395
|
mapper: checkboxFieldMapper,
|
|
1192
1396
|
scope: 'boolean',
|
|
1397
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1193
1398
|
},
|
|
1194
1399
|
{
|
|
1195
1400
|
name: IonicField.Button,
|
|
1196
1401
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1197
1402
|
mapper: buttonFieldMapper,
|
|
1198
|
-
valueHandling: 'exclude',
|
|
1199
1403
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1200
1404
|
},
|
|
1201
1405
|
{
|
|
1202
1406
|
name: IonicField.Submit,
|
|
1203
1407
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1204
1408
|
mapper: submitButtonFieldMapper,
|
|
1205
|
-
valueHandling: 'exclude',
|
|
1206
1409
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1207
1410
|
},
|
|
1208
1411
|
{
|
|
1209
1412
|
name: IonicField.Next,
|
|
1210
1413
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1211
1414
|
mapper: nextButtonFieldMapper,
|
|
1212
|
-
valueHandling: 'exclude',
|
|
1213
1415
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1214
1416
|
},
|
|
1215
1417
|
{
|
|
1216
1418
|
name: IonicField.Previous,
|
|
1217
1419
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1218
1420
|
mapper: previousButtonFieldMapper,
|
|
1219
|
-
valueHandling: 'exclude',
|
|
1220
1421
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1221
1422
|
},
|
|
1222
1423
|
{
|
|
1223
1424
|
name: IonicField.AddArrayItem,
|
|
1224
1425
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1225
1426
|
mapper: addArrayItemButtonMapper,
|
|
1226
|
-
valueHandling: 'exclude',
|
|
1227
1427
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1228
1428
|
},
|
|
1229
1429
|
{
|
|
1230
1430
|
name: IonicField.PrependArrayItem,
|
|
1231
1431
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1232
1432
|
mapper: prependArrayItemButtonMapper,
|
|
1233
|
-
valueHandling: 'exclude',
|
|
1234
1433
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1235
1434
|
},
|
|
1236
1435
|
{
|
|
1237
1436
|
name: IonicField.InsertArrayItem,
|
|
1238
1437
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1239
1438
|
mapper: insertArrayItemButtonMapper,
|
|
1240
|
-
valueHandling: 'exclude',
|
|
1241
1439
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1242
1440
|
},
|
|
1243
1441
|
{
|
|
1244
1442
|
name: IonicField.RemoveArrayItem,
|
|
1245
1443
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1246
1444
|
mapper: removeArrayItemButtonMapper,
|
|
1247
|
-
valueHandling: 'exclude',
|
|
1248
1445
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1249
1446
|
},
|
|
1250
1447
|
{
|
|
1251
1448
|
name: IonicField.PopArrayItem,
|
|
1252
1449
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1253
1450
|
mapper: popArrayItemButtonMapper,
|
|
1254
|
-
valueHandling: 'exclude',
|
|
1255
1451
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1256
1452
|
},
|
|
1257
1453
|
{
|
|
1258
1454
|
name: IonicField.ShiftArrayItem,
|
|
1259
1455
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1260
1456
|
mapper: shiftArrayItemButtonMapper,
|
|
1261
|
-
valueHandling: 'exclude',
|
|
1262
1457
|
...BUTTON_FIELD_TYPES_BASE,
|
|
1263
1458
|
},
|
|
1264
1459
|
{
|
|
@@ -1267,36 +1462,42 @@ const IONIC_FIELD_TYPES = [
|
|
|
1267
1462
|
mapper: valueFieldMapper,
|
|
1268
1463
|
propsToMeta: ['rows'],
|
|
1269
1464
|
scope: 'text-input',
|
|
1465
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1270
1466
|
},
|
|
1271
1467
|
{
|
|
1272
1468
|
name: IonicField.Radio,
|
|
1273
1469
|
loadComponent: () => Promise.resolve().then(function () { return ionicRadio_component; }),
|
|
1274
1470
|
mapper: optionsFieldMapper,
|
|
1275
1471
|
scope: 'single-select',
|
|
1472
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1276
1473
|
},
|
|
1277
1474
|
{
|
|
1278
1475
|
name: IonicField.MultiCheckbox,
|
|
1279
1476
|
loadComponent: () => Promise.resolve().then(function () { return ionicMultiCheckbox_component; }),
|
|
1280
1477
|
mapper: optionsFieldMapper,
|
|
1281
1478
|
scope: 'multi-select',
|
|
1479
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1282
1480
|
},
|
|
1283
1481
|
{
|
|
1284
1482
|
name: IonicField.Datepicker,
|
|
1285
1483
|
loadComponent: () => Promise.resolve().then(function () { return ionicDatepicker_component; }),
|
|
1286
1484
|
mapper: datepickerFieldMapper,
|
|
1287
1485
|
scope: 'date',
|
|
1486
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1288
1487
|
},
|
|
1289
1488
|
{
|
|
1290
1489
|
name: IonicField.Slider,
|
|
1291
1490
|
loadComponent: () => Promise.resolve().then(function () { return ionicSlider_component; }),
|
|
1292
1491
|
mapper: valueFieldMapper,
|
|
1293
1492
|
scope: 'numeric',
|
|
1493
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1294
1494
|
},
|
|
1295
1495
|
{
|
|
1296
1496
|
name: IonicField.Toggle,
|
|
1297
1497
|
loadComponent: () => Promise.resolve().then(function () { return ionicToggle_component; }),
|
|
1298
1498
|
mapper: checkboxFieldMapper,
|
|
1299
1499
|
scope: 'boolean',
|
|
1500
|
+
...VALUE_FIELD_TYPES_BASE,
|
|
1300
1501
|
},
|
|
1301
1502
|
];
|
|
1302
1503
|
|
|
@@ -1307,19 +1508,191 @@ const IONIC_FIELD_TYPES = [
|
|
|
1307
1508
|
*/
|
|
1308
1509
|
|
|
1309
1510
|
function withIonicFields(config) {
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
{
|
|
1511
|
+
// Always include the addons feature — ion-icon / ion-button are part of
|
|
1512
|
+
// the canonical Ionic surface.
|
|
1513
|
+
const base = [...IONIC_FIELD_TYPES, withIonicAddons()];
|
|
1514
|
+
if (config) {
|
|
1515
|
+
base.push({
|
|
1316
1516
|
ɵkind: 'ionic-config',
|
|
1317
1517
|
ɵproviders: [{ provide: IONIC_CONFIG, useValue: config }],
|
|
1318
|
-
}
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
return
|
|
1518
|
+
});
|
|
1519
|
+
return base;
|
|
1520
|
+
}
|
|
1521
|
+
return base;
|
|
1322
1522
|
}
|
|
1523
|
+
/* -- Ionic addon kinds ------------------------------------------------- */
|
|
1524
|
+
const ION_ICON_KIND = {
|
|
1525
|
+
kind: 'ion-icon',
|
|
1526
|
+
loadComponent: () => Promise.resolve().then(function () { return ionIconAddon_component; }).then((m) => m.IonIconAddonComponent),
|
|
1527
|
+
validate: (addon, fieldKey) => {
|
|
1528
|
+
if (typeof addon.icon !== 'string' || addon.icon.length === 0) {
|
|
1529
|
+
throw new DynamicFormError(`Addon kind 'ion-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);
|
|
1530
|
+
}
|
|
1531
|
+
},
|
|
1532
|
+
};
|
|
1533
|
+
const ION_BUTTON_KIND = {
|
|
1534
|
+
kind: 'ion-button',
|
|
1535
|
+
loadComponent: () => Promise.resolve().then(function () { return ionButtonAddon_component; }).then((m) => m.IonButtonAddonComponent),
|
|
1536
|
+
validate: (addon, fieldKey) => {
|
|
1537
|
+
// Exactly one of preset / actionRef / action — validator drops the addon
|
|
1538
|
+
// (with warning) if the rule is violated.
|
|
1539
|
+
const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);
|
|
1540
|
+
if (set.length > 1) {
|
|
1541
|
+
throw new DynamicFormError(`Addon kind 'ion-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`);
|
|
1542
|
+
}
|
|
1543
|
+
// Icon-only buttons require ariaLabel for screen readers.
|
|
1544
|
+
if (addon.icon && !addon.label && !addon.ariaLabel) {
|
|
1545
|
+
throw new DynamicFormError(`Addon kind 'ion-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);
|
|
1546
|
+
}
|
|
1547
|
+
},
|
|
1548
|
+
};
|
|
1549
|
+
/**
|
|
1550
|
+
* Register Ionic-shipped addon kinds (`ion-icon`, `ion-button`) standalone.
|
|
1551
|
+
*
|
|
1552
|
+
* **Most users don't need this** — `withIonicFields()` auto-includes
|
|
1553
|
+
* these kinds. Call `withIonicAddons()` directly only when you want
|
|
1554
|
+
* Ionic addon kinds without the Ionic field types (e.g., a custom
|
|
1555
|
+
* field set that wants to render `ion-icon` prefixes), or when you're
|
|
1556
|
+
* stitching addons through a different DI scope.
|
|
1557
|
+
*
|
|
1558
|
+
* @example
|
|
1559
|
+
* ```typescript
|
|
1560
|
+
* // Custom field types + Ionic addon kinds.
|
|
1561
|
+
* provideDynamicForm(
|
|
1562
|
+
* ...myCustomFields(),
|
|
1563
|
+
* withIonicAddons(),
|
|
1564
|
+
* );
|
|
1565
|
+
* ```
|
|
1566
|
+
*
|
|
1567
|
+
* Adapter authors who need to override a kind with a customised renderer
|
|
1568
|
+
* should call `withCustomAddon(...)` directly instead.
|
|
1569
|
+
*/
|
|
1570
|
+
function withIonicAddons() {
|
|
1571
|
+
return {
|
|
1572
|
+
ɵkind: 'addons',
|
|
1573
|
+
ɵproviders: [
|
|
1574
|
+
{ provide: ADDON_KIND_DEFINITIONS, useValue: ION_ICON_KIND, multi: true },
|
|
1575
|
+
{ provide: ADDON_KIND_DEFINITIONS, useValue: ION_BUTTON_KIND, multi: true },
|
|
1576
|
+
],
|
|
1577
|
+
};
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
/**
|
|
1581
|
+
* Renderer for the `ion-button` addon kind.
|
|
1582
|
+
*
|
|
1583
|
+
* Wraps Ionic's `<ion-button>`. Click dispatch (preset / actionRef /
|
|
1584
|
+
* action precedence, multi-set warning, `disabled` / `loading`
|
|
1585
|
+
* resolution) lives on `NgForgeAddonAction`; this component focuses on
|
|
1586
|
+
* the visual layer. While `action.loading()`, an `<ion-spinner>` is
|
|
1587
|
+
* rendered in place of the icon and the button is disabled.
|
|
1588
|
+
*/
|
|
1589
|
+
class IonButtonAddonComponent {
|
|
1590
|
+
action = injectNgForgeAddonAction();
|
|
1591
|
+
/** Re-exposed for template binding — same signal stored on the directive. */
|
|
1592
|
+
addon = this.action.addon;
|
|
1593
|
+
label = computed(() => this.addon().label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1594
|
+
ariaLabel = computed(() => this.addon().ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1595
|
+
icon = computed(() => this.addon().icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1596
|
+
/** Default color is undefined so the button inherits the theme's text color
|
|
1597
|
+
* (Ionic's `medium` would force low-contrast grey, which fails WCAG on dark
|
|
1598
|
+
* surfaces). Consumers can still set `color: 'primary' | 'success' | ...`
|
|
1599
|
+
* explicitly when they want adapter-styled coloring. */
|
|
1600
|
+
color = computed(() => this.addon().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1601
|
+
fill = computed(() => this.addon().fill ?? 'clear', ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
1602
|
+
/** Icon-only when there is an icon but no label — drives the `slot` choice.
|
|
1603
|
+
* Truthy check on `label` mirrors Material's heuristic; empty-string label
|
|
1604
|
+
* is treated as "no label" so the button doesn't render an invisible text
|
|
1605
|
+
* slot beside the icon. */
|
|
1606
|
+
iconOnly = computed(() => !!this.icon() && !this.label(), ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
1607
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: IonButtonAddonComponent, isStandalone: true, selector: "df-ion-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
|
|
1609
|
+
<ion-button
|
|
1610
|
+
[attr.color]="color() ?? null"
|
|
1611
|
+
[fill]="fill()"
|
|
1612
|
+
[disabled]="action.disabled() || action.loading()"
|
|
1613
|
+
[attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
|
|
1614
|
+
[attr.aria-busy]="action.loading() || null"
|
|
1615
|
+
(click)="action.dispatch()"
|
|
1616
|
+
>
|
|
1617
|
+
@if (action.loading()) {
|
|
1618
|
+
<ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
|
|
1619
|
+
} @else if (icon(); as ic) {
|
|
1620
|
+
<ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
|
|
1621
|
+
}
|
|
1622
|
+
@if (label(); as lbl) {
|
|
1623
|
+
{{ lbl | dynamicText | async }}
|
|
1624
|
+
}
|
|
1625
|
+
</ion-button>
|
|
1626
|
+
@if (action.loading()) {
|
|
1627
|
+
<span class="df-ion-sr-only" role="status">Loading…</span>
|
|
1628
|
+
}
|
|
1629
|
+
`, 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 });
|
|
1630
|
+
}
|
|
1631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonButtonAddonComponent, decorators: [{
|
|
1632
|
+
type: Component,
|
|
1633
|
+
args: [{ selector: 'df-ion-button-addon', imports: [IonButton, IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
|
|
1634
|
+
<ion-button
|
|
1635
|
+
[attr.color]="color() ?? null"
|
|
1636
|
+
[fill]="fill()"
|
|
1637
|
+
[disabled]="action.disabled() || action.loading()"
|
|
1638
|
+
[attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
|
|
1639
|
+
[attr.aria-busy]="action.loading() || null"
|
|
1640
|
+
(click)="action.dispatch()"
|
|
1641
|
+
>
|
|
1642
|
+
@if (action.loading()) {
|
|
1643
|
+
<ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
|
|
1644
|
+
} @else if (icon(); as ic) {
|
|
1645
|
+
<ion-icon [name]="ic" [slot]="iconOnly() ? 'icon-only' : 'start'"></ion-icon>
|
|
1646
|
+
}
|
|
1647
|
+
@if (label(); as lbl) {
|
|
1648
|
+
{{ lbl | dynamicText | async }}
|
|
1649
|
+
}
|
|
1650
|
+
</ion-button>
|
|
1651
|
+
@if (action.loading()) {
|
|
1652
|
+
<span class="df-ion-sr-only" role="status">Loading…</span>
|
|
1653
|
+
}
|
|
1654
|
+
`, 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"] }]
|
|
1655
|
+
}] });
|
|
1656
|
+
|
|
1657
|
+
var ionButtonAddon_component = /*#__PURE__*/Object.freeze({
|
|
1658
|
+
__proto__: null,
|
|
1659
|
+
IonButtonAddonComponent: IonButtonAddonComponent
|
|
1660
|
+
});
|
|
1661
|
+
|
|
1662
|
+
/**
|
|
1663
|
+
* Renderer for the `ion-icon` addon kind.
|
|
1664
|
+
*
|
|
1665
|
+
* Outputs `<ion-icon [name]="icon">`. The host is set `aria-hidden="true"`
|
|
1666
|
+
* by default; if the addon supplies an `ariaLabel`, it is applied so the
|
|
1667
|
+
* icon is announced by screen readers.
|
|
1668
|
+
*/
|
|
1669
|
+
class IonIconAddonComponent {
|
|
1670
|
+
addon = input.required(...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
|
|
1671
|
+
/** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every kind must declare it. */
|
|
1672
|
+
fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
1673
|
+
iconName = computed(() => this.addon().icon, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
1674
|
+
ariaLabel = computed(() => this.addon().ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1675
|
+
hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1676
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: IonIconAddonComponent, 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 });
|
|
1678
|
+
}
|
|
1679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IonIconAddonComponent, decorators: [{
|
|
1680
|
+
type: Component,
|
|
1681
|
+
args: [{
|
|
1682
|
+
selector: 'df-ion-icon-addon',
|
|
1683
|
+
imports: [IonIcon, AsyncPipe, DynamicTextPipe],
|
|
1684
|
+
template: `<ion-icon [name]="iconName()" [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"></ion-icon>`,
|
|
1685
|
+
host: {
|
|
1686
|
+
'[attr.aria-hidden]': 'hasAriaLabel() ? null : "true"',
|
|
1687
|
+
},
|
|
1688
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1689
|
+
}]
|
|
1690
|
+
}], propDecorators: { addon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addon", required: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
|
|
1691
|
+
|
|
1692
|
+
var ionIconAddon_component = /*#__PURE__*/Object.freeze({
|
|
1693
|
+
__proto__: null,
|
|
1694
|
+
IonIconAddonComponent: IonIconAddonComponent
|
|
1695
|
+
});
|
|
1323
1696
|
|
|
1324
1697
|
// Field fields
|
|
1325
1698
|
|
|
@@ -1327,5 +1700,5 @@ function withIonicFields(config) {
|
|
|
1327
1700
|
* Generated bundle index. Do not edit.
|
|
1328
1701
|
*/
|
|
1329
1702
|
|
|
1330
|
-
export { IONIC_CONFIG, IONIC_FIELD_TYPES, IonicButtonFieldComponent, IonicCheckboxFieldComponent, IonicDatepickerFieldComponent, IonicField, IonicInputFieldComponent, IonicMultiCheckboxFieldComponent, IonicRadioFieldComponent, IonicSelectFieldComponent, IonicSliderFieldComponent, IonicTextareaFieldComponent, IonicToggleFieldComponent, withIonicFields };
|
|
1703
|
+
export { IONIC_CONFIG, IONIC_FIELD_TYPES, IONIC_INPUT_TYPE_OVERRIDE, IonButtonAddonComponent, IonIconAddonComponent, IonicButtonFieldComponent, IonicCheckboxFieldComponent, IonicDatepickerFieldComponent, IonicField, IonicInputFieldComponent, IonicMultiCheckboxFieldComponent, IonicRadioFieldComponent, IonicSelectFieldComponent, IonicSliderFieldComponent, IonicTextareaFieldComponent, IonicToggleFieldComponent, withIonicAddons, withIonicFields };
|
|
1331
1704
|
//# sourceMappingURL=ng-forge-dynamic-forms-ionic.mjs.map
|