@ng-forge/dynamic-forms-ionic 0.9.0-next.12 → 0.9.0-next.14
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({
|
|
@@ -1182,6 +1377,9 @@ const IONIC_FIELD_TYPES = [
|
|
|
1182
1377
|
mapper: valueFieldMapper,
|
|
1183
1378
|
propsToMeta: ['type'],
|
|
1184
1379
|
scope: ['text-input', 'numeric'],
|
|
1380
|
+
addons: {
|
|
1381
|
+
slots: ['prefix', 'suffix'],
|
|
1382
|
+
},
|
|
1185
1383
|
...VALUE_FIELD_TYPES_BASE,
|
|
1186
1384
|
},
|
|
1187
1385
|
{
|
|
@@ -1310,19 +1508,191 @@ const IONIC_FIELD_TYPES = [
|
|
|
1310
1508
|
*/
|
|
1311
1509
|
|
|
1312
1510
|
function withIonicFields(config) {
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
{
|
|
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({
|
|
1319
1516
|
ɵkind: 'ionic-config',
|
|
1320
1517
|
ɵproviders: [{ provide: IONIC_CONFIG, useValue: config }],
|
|
1321
|
-
}
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
return
|
|
1518
|
+
});
|
|
1519
|
+
return base;
|
|
1520
|
+
}
|
|
1521
|
+
return base;
|
|
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 });
|
|
1325
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
|
+
});
|
|
1326
1696
|
|
|
1327
1697
|
// Field fields
|
|
1328
1698
|
|
|
@@ -1330,5 +1700,5 @@ function withIonicFields(config) {
|
|
|
1330
1700
|
* Generated bundle index. Do not edit.
|
|
1331
1701
|
*/
|
|
1332
1702
|
|
|
1333
|
-
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 };
|
|
1334
1704
|
//# sourceMappingURL=ng-forge-dynamic-forms-ionic.mjs.map
|