@ng-forge/dynamic-forms-ionic 0.5.1 → 0.6.0
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
2
|
import { inject, input, computed, ChangeDetectionStrategy, Component, ElementRef, signal, InjectionToken, linkedSignal, model, isSignal } from '@angular/core';
|
|
3
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';
|
|
4
|
-
import { EventBus, ARRAY_CONTEXT, resolveTokens, DynamicTextPipe, DEFAULT_PROPS, buildBaseInputs
|
|
4
|
+
import { EventBus, ARRAY_CONTEXT, resolveTokens, DynamicTextPipe, DEFAULT_PROPS, buildBaseInputs } from '@ng-forge/dynamic-forms';
|
|
5
5
|
import { AsyncPipe } from '@angular/common';
|
|
6
6
|
import { FormField } from '@angular/forms/signals';
|
|
7
|
-
import { createResolvedErrorsSignal, shouldShowErrors, setupMetaTracking, isEqual, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
7
|
+
import { createResolvedErrorsSignal, shouldShowErrors, setupMetaTracking, isEqual, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
8
8
|
import { format } from 'date-fns';
|
|
9
9
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
10
10
|
|
|
@@ -64,8 +64,8 @@ class IonicButtonFieldComponent {
|
|
|
64
64
|
this.eventBus.dispatch(event);
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
68
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.
|
|
67
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: IonicButtonFieldComponent, isStandalone: true, selector: "df-ion-button", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, eventArgs: { classPropertyName: "eventArgs", publicName: "eventArgs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, eventContext: { classPropertyName: "eventContext", publicName: "eventContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "class": "className()", "attr.data-testid": "key()", "attr.hidden": "hidden() || null" } }, ngImport: i0, template: `
|
|
69
69
|
@let buttonId = key() + '-button';
|
|
70
70
|
|
|
71
71
|
<ion-button
|
|
@@ -85,7 +85,7 @@ class IonicButtonFieldComponent {
|
|
|
85
85
|
</ion-button>
|
|
86
86
|
`, 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 });
|
|
87
87
|
}
|
|
88
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicButtonFieldComponent, decorators: [{
|
|
89
89
|
type: Component,
|
|
90
90
|
args: [{ selector: 'df-ion-button', imports: [IonButton, DynamicTextPipe, AsyncPipe], host: {
|
|
91
91
|
'[id]': '`${key()}`',
|
|
@@ -183,8 +183,8 @@ class IonicCheckboxFieldComponent {
|
|
|
183
183
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
184
184
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
185
185
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicCheckboxFieldComponent, isStandalone: true, selector: "df-ion-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
188
188
|
@let f = field();
|
|
189
189
|
@let checkboxId = key() + '-checkbox';
|
|
190
190
|
|
|
@@ -210,7 +210,7 @@ class IonicCheckboxFieldComponent {
|
|
|
210
210
|
}
|
|
211
211
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
212
212
|
}
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicCheckboxFieldComponent, decorators: [{
|
|
214
214
|
type: Component,
|
|
215
215
|
args: [{ selector: 'df-ion-checkbox', imports: [IonCheckbox, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
216
216
|
@let f = field();
|
|
@@ -336,8 +336,8 @@ class IonicDatepickerFieldComponent {
|
|
|
336
336
|
return format(date, 'MMM d, yyyy');
|
|
337
337
|
}
|
|
338
338
|
}
|
|
339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
339
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
340
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicDatepickerFieldComponent, isStandalone: true, selector: "df-ion-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, 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 }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
341
341
|
@let f = field();
|
|
342
342
|
@let dateValue = f().value();
|
|
343
343
|
@let inputId = key() + '-input';
|
|
@@ -394,7 +394,7 @@ class IonicDatepickerFieldComponent {
|
|
|
394
394
|
</ion-modal>
|
|
395
395
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
396
396
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicDatepickerFieldComponent, decorators: [{
|
|
398
398
|
type: Component,
|
|
399
399
|
args: [{ selector: 'df-ion-datepicker', imports: [
|
|
400
400
|
IonInput,
|
|
@@ -564,8 +564,8 @@ class IonicInputFieldComponent {
|
|
|
564
564
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
565
565
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
566
566
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
567
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
568
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
567
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
568
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicInputFieldComponent, isStandalone: true, selector: "df-ion-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
569
569
|
@let f = field();
|
|
570
570
|
@let inputId = key() + '-input';
|
|
571
571
|
|
|
@@ -593,7 +593,7 @@ class IonicInputFieldComponent {
|
|
|
593
593
|
}
|
|
594
594
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":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: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
595
595
|
}
|
|
596
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicInputFieldComponent, decorators: [{
|
|
597
597
|
type: Component,
|
|
598
598
|
args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
599
599
|
@let f = field();
|
|
@@ -711,8 +711,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
711
711
|
}
|
|
712
712
|
});
|
|
713
713
|
}
|
|
714
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ion-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
716
716
|
@let f = field();
|
|
717
717
|
@let checked = checkedValuesMap();
|
|
718
718
|
@if (label(); as label) {
|
|
@@ -751,7 +751,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
751
751
|
}
|
|
752
752
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
753
753
|
}
|
|
754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
|
|
755
755
|
type: Component,
|
|
756
756
|
args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe], template: `
|
|
757
757
|
@let f = field();
|
|
@@ -846,8 +846,8 @@ class IonicRadioFieldComponent {
|
|
|
846
846
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
847
847
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
848
848
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
849
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
849
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ion-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
851
851
|
@let f = field();
|
|
852
852
|
@let radioGroupId = key() + '-radio-group';
|
|
853
853
|
@if (label(); as label) {
|
|
@@ -884,7 +884,7 @@ class IonicRadioFieldComponent {
|
|
|
884
884
|
}
|
|
885
885
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
886
886
|
}
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
|
|
888
888
|
type: Component,
|
|
889
889
|
args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
890
890
|
@let f = field();
|
|
@@ -972,8 +972,8 @@ class IonicSelectFieldComponent {
|
|
|
972
972
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
973
973
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
974
974
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
975
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
976
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
975
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
976
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicSelectFieldComponent, isStandalone: true, selector: "df-ion-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
977
977
|
@let f = field();
|
|
978
978
|
@let selectId = key() + '-select';
|
|
979
979
|
|
|
@@ -1010,7 +1010,7 @@ class IonicSelectFieldComponent {
|
|
|
1010
1010
|
}
|
|
1011
1011
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1012
1012
|
}
|
|
1013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicSelectFieldComponent, decorators: [{
|
|
1014
1014
|
type: Component,
|
|
1015
1015
|
args: [{ selector: 'df-ion-select', imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1016
1016
|
@let f = field();
|
|
@@ -1097,8 +1097,8 @@ class IonicSliderFieldComponent {
|
|
|
1097
1097
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1098
1098
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1099
1099
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
1100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicSliderFieldComponent, isStandalone: true, selector: "df-ion-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1102
1102
|
@let f = field();
|
|
1103
1103
|
@let inputId = key() + '-input';
|
|
1104
1104
|
|
|
@@ -1129,7 +1129,7 @@ class IonicSliderFieldComponent {
|
|
|
1129
1129
|
}
|
|
1130
1130
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1131
1131
|
}
|
|
1132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicSliderFieldComponent, decorators: [{
|
|
1133
1133
|
type: Component,
|
|
1134
1134
|
args: [{ selector: 'df-ion-slider', imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1135
1135
|
@let f = field();
|
|
@@ -1232,8 +1232,8 @@ class IonicTextareaFieldComponent {
|
|
|
1232
1232
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1233
1233
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1234
1234
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
1235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicTextareaFieldComponent, isStandalone: true, selector: "df-ion-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1237
1237
|
@let f = field();
|
|
1238
1238
|
@let textareaId = key() + '-textarea';
|
|
1239
1239
|
|
|
@@ -1261,7 +1261,7 @@ class IonicTextareaFieldComponent {
|
|
|
1261
1261
|
}
|
|
1262
1262
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1263
1263
|
}
|
|
1264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicTextareaFieldComponent, decorators: [{
|
|
1265
1265
|
type: Component,
|
|
1266
1266
|
args: [{ selector: 'df-ion-textarea', imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1267
1267
|
@let f = field();
|
|
@@ -1379,8 +1379,8 @@ class IonicToggleControlComponent {
|
|
|
1379
1379
|
onBlur() {
|
|
1380
1380
|
this.touched.set(true);
|
|
1381
1381
|
}
|
|
1382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", 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 }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
|
|
1384
1384
|
<ion-toggle
|
|
1385
1385
|
[checked]="isChecked()"
|
|
1386
1386
|
(ionChange)="onToggleChange($event)"
|
|
@@ -1400,7 +1400,7 @@ class IonicToggleControlComponent {
|
|
|
1400
1400
|
</ion-toggle>
|
|
1401
1401
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n"], dependencies: [{ kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1402
1402
|
}
|
|
1403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
|
|
1404
1404
|
type: Component,
|
|
1405
1405
|
args: [{ selector: 'df-ion-toggle-control', imports: [IonToggle], template: `
|
|
1406
1406
|
<ion-toggle
|
|
@@ -1453,8 +1453,8 @@ class IonicToggleFieldComponent {
|
|
|
1453
1453
|
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1454
1454
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1455
1455
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
1456
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: IonicToggleFieldComponent, isStandalone: true, selector: "df-ion-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1458
1458
|
@let f = field();
|
|
1459
1459
|
@let toggleId = key() + '-toggle';
|
|
1460
1460
|
|
|
@@ -1479,7 +1479,7 @@ class IonicToggleFieldComponent {
|
|
|
1479
1479
|
}
|
|
1480
1480
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\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", "meta", "ariaDescribedBy"], outputs: ["checkedChange", "touchedChange"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1481
1481
|
}
|
|
1482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: IonicToggleFieldComponent, decorators: [{
|
|
1483
1483
|
type: Component,
|
|
1484
1484
|
args: [{ selector: 'df-ion-toggle', imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1485
1485
|
@let f = field();
|
|
@@ -1533,7 +1533,11 @@ const IonicField = {
|
|
|
1533
1533
|
Next: 'next',
|
|
1534
1534
|
Previous: 'previous',
|
|
1535
1535
|
AddArrayItem: 'addArrayItem',
|
|
1536
|
+
PrependArrayItem: 'prependArrayItem',
|
|
1537
|
+
InsertArrayItem: 'insertArrayItem',
|
|
1536
1538
|
RemoveArrayItem: 'removeArrayItem',
|
|
1539
|
+
PopArrayItem: 'popArrayItem',
|
|
1540
|
+
ShiftArrayItem: 'shiftArrayItem',
|
|
1537
1541
|
Textarea: 'textarea',
|
|
1538
1542
|
Radio: 'radio',
|
|
1539
1543
|
MultiCheckbox: 'multi-checkbox',
|
|
@@ -1547,11 +1551,15 @@ const IonicField = {
|
|
|
1547
1551
|
* For specific button types (submit, next, prev, add/remove array items),
|
|
1548
1552
|
* use the dedicated field types and their specific mappers.
|
|
1549
1553
|
*
|
|
1554
|
+
* Supports template property for array events (AppendArrayItemEvent, PrependArrayItemEvent, InsertArrayItemEvent)
|
|
1555
|
+
* which enables the $template token in eventArgs.
|
|
1556
|
+
*
|
|
1550
1557
|
* @param fieldDef The button field definition
|
|
1551
1558
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
1552
1559
|
*/
|
|
1553
1560
|
function buttonFieldMapper(fieldDef) {
|
|
1554
1561
|
const defaultProps = inject(DEFAULT_PROPS);
|
|
1562
|
+
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1555
1563
|
return computed(() => {
|
|
1556
1564
|
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1557
1565
|
const inputs = {
|
|
@@ -1571,226 +1579,33 @@ function buttonFieldMapper(fieldDef) {
|
|
|
1571
1579
|
if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {
|
|
1572
1580
|
inputs['eventArgs'] = fieldDef.eventArgs;
|
|
1573
1581
|
}
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
*
|
|
1585
|
-
* Disabled state is resolved using the button-logic-resolver which considers:
|
|
1586
|
-
* 1. Explicit `disabled: true` on the field definition
|
|
1587
|
-
* 2. Field-level `logic` array (if present, overrides form-level defaults)
|
|
1588
|
-
* 3. Form-level `options.submitButton` defaults (disableWhenInvalid, disableWhileSubmitting)
|
|
1589
|
-
*
|
|
1590
|
-
* @param fieldDef The submit button field definition
|
|
1591
|
-
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
1592
|
-
*/
|
|
1593
|
-
function submitButtonFieldMapper(fieldDef) {
|
|
1594
|
-
const rootFormRegistry = inject(RootFormRegistryService);
|
|
1595
|
-
const defaultProps = inject(DEFAULT_PROPS);
|
|
1596
|
-
const formOptions = inject(FORM_OPTIONS);
|
|
1597
|
-
const fieldWithLogic = fieldDef;
|
|
1598
|
-
return computed(() => {
|
|
1599
|
-
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1600
|
-
// Use rootFormRegistry instead of fieldSignalContext.form because when the submit button
|
|
1601
|
-
// is inside a group/array, fieldSignalContext.form points to the nested form tree,
|
|
1602
|
-
// not the root form. We need root form validity for submit button disabled state (#157).
|
|
1603
|
-
const disabledSignal = resolveSubmitButtonDisabled({
|
|
1604
|
-
form: rootFormRegistry.getRootForm(),
|
|
1605
|
-
formOptions: formOptions(),
|
|
1606
|
-
fieldLogic: fieldWithLogic.logic,
|
|
1607
|
-
explicitlyDisabled: fieldDef.disabled,
|
|
1608
|
-
});
|
|
1609
|
-
const inputs = {
|
|
1610
|
-
...baseInputs,
|
|
1611
|
-
// No event - native form submit handles it via form's onNativeSubmit
|
|
1612
|
-
// Set type="submit" to trigger native form submission
|
|
1613
|
-
props: { ...fieldDef.props, type: 'submit' },
|
|
1614
|
-
// Evaluate the signal inside the computed - component receives plain boolean
|
|
1615
|
-
disabled: disabledSignal(),
|
|
1616
|
-
};
|
|
1617
|
-
if (fieldDef.hidden !== undefined) {
|
|
1618
|
-
inputs['hidden'] = fieldDef.hidden;
|
|
1619
|
-
}
|
|
1620
|
-
return inputs;
|
|
1621
|
-
});
|
|
1622
|
-
}
|
|
1623
|
-
/**
|
|
1624
|
-
* Mapper for next page button - preconfigures NextPageEvent
|
|
1625
|
-
*
|
|
1626
|
-
* Disabled state is resolved using the button-logic-resolver which considers:
|
|
1627
|
-
* 1. Explicit `disabled: true` on the field definition
|
|
1628
|
-
* 2. Field-level `logic` array (if present, overrides form-level defaults)
|
|
1629
|
-
* 3. Form-level `options.nextButton` defaults (disableWhenPageInvalid, disableWhileSubmitting)
|
|
1630
|
-
*
|
|
1631
|
-
* @param fieldDef The next button field definition
|
|
1632
|
-
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
1633
|
-
*/
|
|
1634
|
-
function nextButtonFieldMapper(fieldDef) {
|
|
1635
|
-
const fieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
|
|
1636
|
-
const defaultProps = inject(DEFAULT_PROPS);
|
|
1637
|
-
const formOptions = inject(FORM_OPTIONS);
|
|
1638
|
-
const fieldWithLogic = fieldDef;
|
|
1639
|
-
return computed(() => {
|
|
1640
|
-
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1641
|
-
const disabledSignal = resolveNextButtonDisabled({
|
|
1642
|
-
form: fieldSignalContext.form,
|
|
1643
|
-
formOptions: formOptions(),
|
|
1644
|
-
fieldLogic: fieldWithLogic.logic,
|
|
1645
|
-
explicitlyDisabled: fieldDef.disabled,
|
|
1646
|
-
currentPageValid: fieldSignalContext.currentPageValid,
|
|
1647
|
-
});
|
|
1648
|
-
const inputs = {
|
|
1649
|
-
...baseInputs,
|
|
1650
|
-
event: NextPageEvent,
|
|
1651
|
-
// Evaluate the signal inside the computed - component receives plain boolean
|
|
1652
|
-
disabled: disabledSignal(),
|
|
1653
|
-
};
|
|
1654
|
-
if (fieldDef.hidden !== undefined) {
|
|
1655
|
-
inputs['hidden'] = fieldDef.hidden;
|
|
1656
|
-
}
|
|
1657
|
-
return inputs;
|
|
1658
|
-
});
|
|
1659
|
-
}
|
|
1660
|
-
/**
|
|
1661
|
-
* Mapper for previous page button - preconfigures PreviousPageEvent
|
|
1662
|
-
* Note: Does not auto-disable based on validation. Users can explicitly disable if needed.
|
|
1663
|
-
*
|
|
1664
|
-
* @param fieldDef The previous button field definition
|
|
1665
|
-
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
1666
|
-
*/
|
|
1667
|
-
function previousButtonFieldMapper(fieldDef) {
|
|
1668
|
-
const defaultProps = inject(DEFAULT_PROPS);
|
|
1669
|
-
return computed(() => {
|
|
1670
|
-
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1671
|
-
const inputs = {
|
|
1672
|
-
...baseInputs,
|
|
1673
|
-
event: PreviousPageEvent,
|
|
1674
|
-
};
|
|
1675
|
-
// Add disabled binding only if explicitly set by user
|
|
1676
|
-
if (fieldDef.disabled !== undefined) {
|
|
1677
|
-
inputs['disabled'] = fieldDef.disabled;
|
|
1678
|
-
}
|
|
1679
|
-
if (fieldDef.hidden !== undefined) {
|
|
1680
|
-
inputs['hidden'] = fieldDef.hidden;
|
|
1681
|
-
}
|
|
1682
|
-
return inputs;
|
|
1683
|
-
});
|
|
1684
|
-
}
|
|
1685
|
-
/**
|
|
1686
|
-
* Mapper for add array item button - preconfigures AddArrayItemEvent with array context.
|
|
1687
|
-
*
|
|
1688
|
-
* Supports two modes:
|
|
1689
|
-
* 1. Inside array template: Uses ARRAY_CONTEXT to determine target array
|
|
1690
|
-
* 2. Outside array: Uses `arrayKey` property from field definition
|
|
1691
|
-
*
|
|
1692
|
-
* @param fieldDef The add array item button field definition
|
|
1693
|
-
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
1694
|
-
*/
|
|
1695
|
-
function addArrayItemButtonFieldMapper(fieldDef) {
|
|
1696
|
-
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1697
|
-
const logger = inject(DynamicFormLogger);
|
|
1698
|
-
const defaultProps = inject(DEFAULT_PROPS);
|
|
1699
|
-
// Determine the target array key
|
|
1700
|
-
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
1701
|
-
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
1702
|
-
if (!targetArrayKey) {
|
|
1703
|
-
logger.warn(`addArrayItem button "${fieldDef.key}" has no array context. ` +
|
|
1704
|
-
'Either place it inside an array field, or provide an explicit arrayKey property.');
|
|
1705
|
-
}
|
|
1706
|
-
// Set default eventArgs for AddArrayItemEvent (arrayKey)
|
|
1707
|
-
// User can override by providing eventArgs in field definition
|
|
1708
|
-
const defaultEventArgs = ['$arrayKey'];
|
|
1709
|
-
const eventArgs = 'eventArgs' in fieldDef && fieldDef.eventArgs !== undefined ? fieldDef.eventArgs : defaultEventArgs;
|
|
1710
|
-
return computed(() => {
|
|
1711
|
-
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1712
|
-
// Read signal value if index is a signal (supports differential updates)
|
|
1713
|
-
const getIndex = () => {
|
|
1714
|
-
if (!arrayContext)
|
|
1715
|
-
return -1;
|
|
1716
|
-
return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;
|
|
1717
|
-
};
|
|
1718
|
-
const inputs = {
|
|
1719
|
-
...baseInputs,
|
|
1720
|
-
event: AddArrayItemEvent,
|
|
1721
|
-
eventArgs,
|
|
1722
|
-
eventContext: {
|
|
1582
|
+
// Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)
|
|
1583
|
+
const template = 'template' in fieldDef ? fieldDef.template : undefined;
|
|
1584
|
+
if (template || arrayContext) {
|
|
1585
|
+
// Read signal value if index is a signal (supports differential updates)
|
|
1586
|
+
const getIndex = () => {
|
|
1587
|
+
if (!arrayContext)
|
|
1588
|
+
return -1;
|
|
1589
|
+
return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;
|
|
1590
|
+
};
|
|
1591
|
+
inputs['eventContext'] = {
|
|
1723
1592
|
key: fieldDef.key,
|
|
1724
1593
|
index: getIndex(),
|
|
1725
|
-
arrayKey:
|
|
1594
|
+
arrayKey: arrayContext?.arrayKey ?? '',
|
|
1726
1595
|
formValue: arrayContext?.formValue ?? {},
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
// Add disabled binding only if explicitly set by user
|
|
1730
|
-
if (fieldDef.disabled !== undefined) {
|
|
1731
|
-
inputs['disabled'] = fieldDef.disabled;
|
|
1732
|
-
}
|
|
1733
|
-
if (fieldDef.hidden !== undefined) {
|
|
1734
|
-
inputs['hidden'] = fieldDef.hidden;
|
|
1596
|
+
template,
|
|
1597
|
+
};
|
|
1735
1598
|
}
|
|
1736
1599
|
return inputs;
|
|
1737
1600
|
});
|
|
1738
1601
|
}
|
|
1602
|
+
|
|
1739
1603
|
/**
|
|
1740
|
-
*
|
|
1741
|
-
*
|
|
1742
|
-
* Supports two modes:
|
|
1743
|
-
* 1. Inside array template: Uses ARRAY_CONTEXT to determine target array and removes item at current index
|
|
1744
|
-
* 2. Outside array: Uses `arrayKey` property from field definition, removes last item by default
|
|
1604
|
+
* Navigation button mappers for Ionic - re-exported from integration package.
|
|
1745
1605
|
*
|
|
1746
|
-
*
|
|
1747
|
-
*
|
|
1606
|
+
* These mappers handle submit, next, and previous buttons with proper
|
|
1607
|
+
* disabled state resolution based on form validity and options.
|
|
1748
1608
|
*/
|
|
1749
|
-
function removeArrayItemButtonFieldMapper(fieldDef) {
|
|
1750
|
-
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1751
|
-
const logger = inject(DynamicFormLogger);
|
|
1752
|
-
const defaultProps = inject(DEFAULT_PROPS);
|
|
1753
|
-
// Determine the target array key
|
|
1754
|
-
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
1755
|
-
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
1756
|
-
if (!targetArrayKey) {
|
|
1757
|
-
logger.warn(`removeArrayItem button "${fieldDef.key}" has no array context. ` +
|
|
1758
|
-
'Either place it inside an array field, or provide an explicit arrayKey property.');
|
|
1759
|
-
}
|
|
1760
|
-
// Set default eventArgs for RemoveArrayItemEvent (arrayKey, index if inside array)
|
|
1761
|
-
// When outside array, only pass arrayKey (removes last by default)
|
|
1762
|
-
// User can override by providing eventArgs in field definition
|
|
1763
|
-
const defaultEventArgs = arrayContext ? ['$arrayKey', '$index'] : ['$arrayKey'];
|
|
1764
|
-
const eventArgs = 'eventArgs' in fieldDef && fieldDef.eventArgs !== undefined ? fieldDef.eventArgs : defaultEventArgs;
|
|
1765
|
-
return computed(() => {
|
|
1766
|
-
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1767
|
-
// Read signal value if index is a signal (supports differential updates)
|
|
1768
|
-
const getIndex = () => {
|
|
1769
|
-
if (!arrayContext)
|
|
1770
|
-
return -1; // -1 means remove last (no specific index)
|
|
1771
|
-
return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;
|
|
1772
|
-
};
|
|
1773
|
-
const inputs = {
|
|
1774
|
-
...baseInputs,
|
|
1775
|
-
event: RemoveArrayItemEvent,
|
|
1776
|
-
eventArgs,
|
|
1777
|
-
eventContext: {
|
|
1778
|
-
key: fieldDef.key,
|
|
1779
|
-
index: getIndex(),
|
|
1780
|
-
arrayKey: targetArrayKey ?? '',
|
|
1781
|
-
formValue: arrayContext?.formValue ?? {},
|
|
1782
|
-
},
|
|
1783
|
-
};
|
|
1784
|
-
// Add disabled binding only if explicitly set by user
|
|
1785
|
-
if (fieldDef.disabled !== undefined) {
|
|
1786
|
-
inputs['disabled'] = fieldDef.disabled;
|
|
1787
|
-
}
|
|
1788
|
-
if (fieldDef.hidden !== undefined) {
|
|
1789
|
-
inputs['hidden'] = fieldDef.hidden;
|
|
1790
|
-
}
|
|
1791
|
-
return inputs;
|
|
1792
|
-
});
|
|
1793
|
-
}
|
|
1794
1609
|
|
|
1795
1610
|
/**
|
|
1796
1611
|
* Ionic field type definitions
|
|
@@ -1840,13 +1655,37 @@ const IONIC_FIELD_TYPES = [
|
|
|
1840
1655
|
{
|
|
1841
1656
|
name: IonicField.AddArrayItem,
|
|
1842
1657
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1843
|
-
mapper:
|
|
1658
|
+
mapper: addArrayItemButtonMapper,
|
|
1659
|
+
valueHandling: 'exclude',
|
|
1660
|
+
},
|
|
1661
|
+
{
|
|
1662
|
+
name: IonicField.PrependArrayItem,
|
|
1663
|
+
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1664
|
+
mapper: prependArrayItemButtonMapper,
|
|
1665
|
+
valueHandling: 'exclude',
|
|
1666
|
+
},
|
|
1667
|
+
{
|
|
1668
|
+
name: IonicField.InsertArrayItem,
|
|
1669
|
+
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1670
|
+
mapper: insertArrayItemButtonMapper,
|
|
1844
1671
|
valueHandling: 'exclude',
|
|
1845
1672
|
},
|
|
1846
1673
|
{
|
|
1847
1674
|
name: IonicField.RemoveArrayItem,
|
|
1848
1675
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1849
|
-
mapper:
|
|
1676
|
+
mapper: removeArrayItemButtonMapper,
|
|
1677
|
+
valueHandling: 'exclude',
|
|
1678
|
+
},
|
|
1679
|
+
{
|
|
1680
|
+
name: IonicField.PopArrayItem,
|
|
1681
|
+
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1682
|
+
mapper: popArrayItemButtonMapper,
|
|
1683
|
+
valueHandling: 'exclude',
|
|
1684
|
+
},
|
|
1685
|
+
{
|
|
1686
|
+
name: IonicField.ShiftArrayItem,
|
|
1687
|
+
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1688
|
+
mapper: shiftArrayItemButtonMapper,
|
|
1850
1689
|
valueHandling: 'exclude',
|
|
1851
1690
|
},
|
|
1852
1691
|
{
|