@ng-forge/dynamic-forms-ionic 0.1.0 → 0.1.1
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.
|
@@ -10,20 +10,20 @@ import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
|
10
10
|
class IonicButtonFieldComponent {
|
|
11
11
|
eventBus = inject(EventBus);
|
|
12
12
|
arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
13
|
-
key = input.required(
|
|
14
|
-
label = input.required(
|
|
15
|
-
disabled = input(false,
|
|
16
|
-
hidden = input(false,
|
|
17
|
-
tabIndex = input(
|
|
18
|
-
className = input('',
|
|
13
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
14
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
15
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
16
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
17
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
18
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
19
19
|
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
20
|
-
event = input(
|
|
21
|
-
eventArgs = input(
|
|
22
|
-
props = input(
|
|
23
|
-
eventContext = input(
|
|
20
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
21
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
22
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
23
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
24
24
|
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
25
|
-
buttonType = computed(() => this.props()?.type ?? 'button',
|
|
26
|
-
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`,
|
|
25
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
26
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
27
27
|
/**
|
|
28
28
|
* Handle button click.
|
|
29
29
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -63,8 +63,8 @@ class IonicButtonFieldComponent {
|
|
|
63
63
|
this.eventBus.dispatch(event);
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
67
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
66
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
67
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: IonicButtonFieldComponent, isStandalone: true, selector: "df-ionic-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()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
|
|
68
68
|
<ion-button
|
|
69
69
|
[type]="buttonType()"
|
|
70
70
|
[expand]="props()?.expand"
|
|
@@ -82,7 +82,7 @@ class IonicButtonFieldComponent {
|
|
|
82
82
|
</ion-button>
|
|
83
83
|
`, isInline: true, 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 });
|
|
84
84
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicButtonFieldComponent, decorators: [{
|
|
86
86
|
type: Component,
|
|
87
87
|
args: [{
|
|
88
88
|
selector: 'df-ionic-button',
|
|
@@ -120,35 +120,35 @@ var ionicButton_component = /*#__PURE__*/Object.freeze({
|
|
|
120
120
|
// Public API - component
|
|
121
121
|
|
|
122
122
|
class IonicCheckboxFieldComponent {
|
|
123
|
-
field = input.required(
|
|
124
|
-
key = input.required(
|
|
123
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
124
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
125
125
|
// Properties
|
|
126
|
-
label = input(
|
|
127
|
-
placeholder = input(
|
|
128
|
-
className = input('',
|
|
129
|
-
tabIndex = input(
|
|
130
|
-
props = input(
|
|
131
|
-
validationMessages = input(
|
|
132
|
-
defaultValidationMessages = input(
|
|
126
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
127
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
128
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
129
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
130
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
131
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
132
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
133
133
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
134
134
|
showErrors = shouldShowErrors(this.field);
|
|
135
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
135
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
136
136
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
137
137
|
// Accessibility
|
|
138
138
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
139
139
|
/** Base ID for error elements */
|
|
140
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
140
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
141
141
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
142
142
|
isAriaInvalid = computed(() => {
|
|
143
143
|
const fieldState = this.field()();
|
|
144
144
|
return fieldState.invalid() && fieldState.touched();
|
|
145
|
-
},
|
|
145
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
146
146
|
/** Whether the field has a required validator */
|
|
147
147
|
isRequired = computed(() => {
|
|
148
148
|
return this.field()().required?.() === true;
|
|
149
|
-
},
|
|
150
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
151
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
149
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
150
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicCheckboxFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
152
152
|
@let f = field();
|
|
153
153
|
|
|
154
154
|
<ion-checkbox
|
|
@@ -169,7 +169,7 @@ class IonicCheckboxFieldComponent {
|
|
|
169
169
|
}
|
|
170
170
|
`, isInline: true, styles: [":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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
171
171
|
}
|
|
172
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicCheckboxFieldComponent, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
174
|
args: [{ selector: 'df-ionic-checkbox', imports: [IonCheckbox, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
175
175
|
@let f = field();
|
|
@@ -204,36 +204,36 @@ var ionicCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
204
204
|
});
|
|
205
205
|
|
|
206
206
|
class IonicDatepickerFieldComponent {
|
|
207
|
-
field = input.required(
|
|
208
|
-
key = input.required(
|
|
209
|
-
label = input(
|
|
210
|
-
placeholder = input(
|
|
211
|
-
className = input('',
|
|
212
|
-
tabIndex = input(
|
|
213
|
-
minDate = input(null,
|
|
214
|
-
maxDate = input(null,
|
|
215
|
-
startAt = input(null,
|
|
216
|
-
props = input(
|
|
217
|
-
validationMessages = input(
|
|
218
|
-
defaultValidationMessages = input(
|
|
207
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
208
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
209
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
210
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
211
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
212
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
213
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
214
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
215
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
216
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
217
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
218
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
219
219
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
220
220
|
showErrors = shouldShowErrors(this.field);
|
|
221
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
222
|
-
isModalOpen = signal(false,
|
|
221
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
222
|
+
isModalOpen = signal(false, ...(ngDevMode ? [{ debugName: "isModalOpen" }] : []));
|
|
223
223
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
224
224
|
// Accessibility
|
|
225
225
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
226
226
|
/** Base ID for error elements */
|
|
227
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
227
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
228
228
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
229
229
|
isAriaInvalid = computed(() => {
|
|
230
230
|
const fieldState = this.field()();
|
|
231
231
|
return fieldState.invalid() && fieldState.touched();
|
|
232
|
-
},
|
|
232
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
233
233
|
/** Whether the field has a required validator */
|
|
234
234
|
isRequired = computed(() => {
|
|
235
235
|
return this.field()().required?.() === true;
|
|
236
|
-
},
|
|
236
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
237
237
|
openModal() {
|
|
238
238
|
this.isModalOpen.set(true);
|
|
239
239
|
}
|
|
@@ -278,8 +278,8 @@ class IonicDatepickerFieldComponent {
|
|
|
278
278
|
return format(date, 'MMM d, yyyy');
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
282
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
281
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
282
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicDatepickerFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
283
283
|
@let f = field(); @let dateValue = f().value();
|
|
284
284
|
|
|
285
285
|
<ion-input
|
|
@@ -335,7 +335,7 @@ class IonicDatepickerFieldComponent {
|
|
|
335
335
|
</ion-modal>
|
|
336
336
|
`, isInline: true, styles: ["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 });
|
|
337
337
|
}
|
|
338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicDatepickerFieldComponent, decorators: [{
|
|
339
339
|
type: Component,
|
|
340
340
|
args: [{ selector: 'df-ionic-datepicker', imports: [
|
|
341
341
|
IonInput,
|
|
@@ -442,38 +442,38 @@ const IONIC_CONFIG = new InjectionToken('IONIC_CONFIG');
|
|
|
442
442
|
|
|
443
443
|
class IonicInputFieldComponent {
|
|
444
444
|
ionicConfig = inject(IONIC_CONFIG, { optional: true });
|
|
445
|
-
field = input.required(
|
|
446
|
-
key = input.required(
|
|
447
|
-
label = input(
|
|
448
|
-
placeholder = input(
|
|
449
|
-
className = input('',
|
|
450
|
-
tabIndex = input(
|
|
451
|
-
props = input(
|
|
452
|
-
validationMessages = input(
|
|
453
|
-
defaultValidationMessages = input(
|
|
454
|
-
effectiveFill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid',
|
|
455
|
-
effectiveShape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape,
|
|
456
|
-
effectiveLabelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'start',
|
|
457
|
-
effectiveColor = computed(() => this.props()?.color ?? this.ionicConfig?.color,
|
|
445
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
446
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
447
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
448
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
449
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
450
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
451
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
452
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
453
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
454
|
+
effectiveFill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', ...(ngDevMode ? [{ debugName: "effectiveFill" }] : []));
|
|
455
|
+
effectiveShape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, ...(ngDevMode ? [{ debugName: "effectiveShape" }] : []));
|
|
456
|
+
effectiveLabelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'start', ...(ngDevMode ? [{ debugName: "effectiveLabelPlacement" }] : []));
|
|
457
|
+
effectiveColor = computed(() => this.props()?.color ?? this.ionicConfig?.color, ...(ngDevMode ? [{ debugName: "effectiveColor" }] : []));
|
|
458
458
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
459
459
|
showErrors = shouldShowErrors(this.field);
|
|
460
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
460
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
461
461
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
462
462
|
// Accessibility
|
|
463
463
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
464
464
|
/** Base ID for error elements */
|
|
465
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
465
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
466
466
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
467
467
|
isAriaInvalid = computed(() => {
|
|
468
468
|
const fieldState = this.field()();
|
|
469
469
|
return fieldState.invalid() && fieldState.touched();
|
|
470
|
-
},
|
|
470
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
471
471
|
/** Whether the field has a required validator */
|
|
472
472
|
isRequired = computed(() => {
|
|
473
473
|
return this.field()().required?.() === true;
|
|
474
|
-
},
|
|
475
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
476
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
474
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
476
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicInputFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
477
477
|
@let f = field();
|
|
478
478
|
@let ariaInvalid = isAriaInvalid();
|
|
479
479
|
@let ariaRequired = isRequired() || null;
|
|
@@ -650,7 +650,7 @@ class IonicInputFieldComponent {
|
|
|
650
650
|
}
|
|
651
651
|
`, isInline: true, styles: [":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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
652
652
|
}
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicInputFieldComponent, decorators: [{
|
|
654
654
|
type: Component,
|
|
655
655
|
args: [{ selector: 'df-ionic-input', imports: [IonInput, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
656
656
|
@let f = field();
|
|
@@ -844,10 +844,10 @@ class ValueInArrayPipe {
|
|
|
844
844
|
transform(element, array) {
|
|
845
845
|
return array?.includes(element) ?? false;
|
|
846
846
|
}
|
|
847
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
848
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
847
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
848
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, isStandalone: true, name: "inArray" });
|
|
849
849
|
}
|
|
850
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, decorators: [{
|
|
851
851
|
type: Pipe,
|
|
852
852
|
args: [{
|
|
853
853
|
pure: true,
|
|
@@ -884,33 +884,33 @@ function isEqual(a, b) {
|
|
|
884
884
|
}
|
|
885
885
|
|
|
886
886
|
class IonicMultiCheckboxFieldComponent {
|
|
887
|
-
field = input.required(
|
|
888
|
-
key = input.required(
|
|
889
|
-
label = input(
|
|
890
|
-
placeholder = input(
|
|
891
|
-
className = input('',
|
|
892
|
-
tabIndex = input(
|
|
893
|
-
options = input([],
|
|
894
|
-
props = input(
|
|
895
|
-
validationMessages = input(
|
|
896
|
-
defaultValidationMessages = input(
|
|
887
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
888
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
889
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
890
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
891
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
892
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
893
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
894
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
895
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
896
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
897
897
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
898
898
|
showErrors = shouldShowErrors(this.field);
|
|
899
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
899
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
900
900
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
901
901
|
// Accessibility
|
|
902
902
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
903
903
|
/** Base ID for error elements */
|
|
904
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
904
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
905
905
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
906
906
|
isAriaInvalid = computed(() => {
|
|
907
907
|
const fieldState = this.field()();
|
|
908
908
|
return fieldState.invalid() && fieldState.touched();
|
|
909
|
-
},
|
|
909
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
910
910
|
/** Whether the field has a required validator */
|
|
911
911
|
isRequired = computed(() => {
|
|
912
912
|
return this.field()().required?.() === true;
|
|
913
|
-
},
|
|
913
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
914
914
|
valueViewModel = linkedSignal(() => {
|
|
915
915
|
const currentValues = this.field()().value();
|
|
916
916
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
@@ -941,8 +941,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
941
941
|
}
|
|
942
942
|
});
|
|
943
943
|
}
|
|
944
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
944
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
945
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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" } }, providers: [ValueInArrayPipe], ngImport: i0, template: `
|
|
946
946
|
@let f = field();
|
|
947
947
|
@if (label(); as label) {
|
|
948
948
|
<div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
|
|
@@ -970,7 +970,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
970
970
|
}
|
|
971
971
|
`, isInline: true, styles: [":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: ValueInArrayPipe, name: "inArray" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
972
972
|
}
|
|
973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
|
|
974
974
|
type: Component,
|
|
975
975
|
args: [{ selector: 'df-ionic-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, ValueInArrayPipe, DynamicTextPipe, AsyncPipe], template: `
|
|
976
976
|
@let f = field();
|
|
@@ -1012,37 +1012,37 @@ var ionicMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
1012
1012
|
});
|
|
1013
1013
|
|
|
1014
1014
|
class IonicRadioFieldComponent {
|
|
1015
|
-
field = input.required(
|
|
1016
|
-
key = input.required(
|
|
1015
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1016
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1017
1017
|
// Properties
|
|
1018
|
-
label = input(
|
|
1019
|
-
placeholder = input(
|
|
1020
|
-
className = input('',
|
|
1021
|
-
tabIndex = input(
|
|
1022
|
-
options = input([],
|
|
1023
|
-
props = input(
|
|
1024
|
-
validationMessages = input(
|
|
1025
|
-
defaultValidationMessages = input(
|
|
1018
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1019
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1020
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1021
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1022
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1023
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1024
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1025
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1026
1026
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1027
1027
|
showErrors = shouldShowErrors(this.field);
|
|
1028
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1028
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1029
1029
|
defaultCompare = Object.is;
|
|
1030
1030
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1031
1031
|
// Accessibility
|
|
1032
1032
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1033
1033
|
/** Base ID for error elements */
|
|
1034
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1034
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1035
1035
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1036
1036
|
isAriaInvalid = computed(() => {
|
|
1037
1037
|
const fieldState = this.field()();
|
|
1038
1038
|
return fieldState.invalid() && fieldState.touched();
|
|
1039
|
-
},
|
|
1039
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
1040
1040
|
/** Whether the field has a required validator */
|
|
1041
1041
|
isRequired = computed(() => {
|
|
1042
1042
|
return this.field()().required?.() === true;
|
|
1043
|
-
},
|
|
1044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1045
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1043
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
1044
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1045
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
1046
1046
|
@let f = field();
|
|
1047
1047
|
@if (label(); as label) {
|
|
1048
1048
|
<div class="radio-label">{{ label | dynamicText | async }}</div>
|
|
@@ -1074,7 +1074,7 @@ class IonicRadioFieldComponent {
|
|
|
1074
1074
|
}
|
|
1075
1075
|
`, isInline: true, styles: [":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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1076
1076
|
}
|
|
1077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
|
|
1078
1078
|
type: Component,
|
|
1079
1079
|
args: [{ selector: 'df-ionic-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1080
1080
|
@let f = field();
|
|
@@ -1120,36 +1120,36 @@ var ionicRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
1120
1120
|
});
|
|
1121
1121
|
|
|
1122
1122
|
class IonicSelectFieldComponent {
|
|
1123
|
-
field = input.required(
|
|
1124
|
-
key = input.required(
|
|
1125
|
-
label = input(
|
|
1126
|
-
placeholder = input(
|
|
1127
|
-
className = input('',
|
|
1128
|
-
tabIndex = input(
|
|
1129
|
-
options = input([],
|
|
1130
|
-
props = input(
|
|
1131
|
-
validationMessages = input(
|
|
1132
|
-
defaultValidationMessages = input(
|
|
1123
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1124
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1125
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1126
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1127
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1128
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1129
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
1130
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1131
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1132
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1133
1133
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1134
1134
|
showErrors = shouldShowErrors(this.field);
|
|
1135
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1135
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1136
1136
|
defaultCompare = Object.is;
|
|
1137
1137
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1138
1138
|
// Accessibility
|
|
1139
1139
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1140
1140
|
/** Base ID for error elements */
|
|
1141
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1141
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1142
1142
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1143
1143
|
isAriaInvalid = computed(() => {
|
|
1144
1144
|
const fieldState = this.field()();
|
|
1145
1145
|
return fieldState.invalid() && fieldState.touched();
|
|
1146
|
-
},
|
|
1146
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
1147
1147
|
/** Whether the field has a required validator */
|
|
1148
1148
|
isRequired = computed(() => {
|
|
1149
1149
|
return this.field()().required?.() === true;
|
|
1150
|
-
},
|
|
1151
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1152
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1150
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
1151
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicSelectFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
1153
1153
|
@let f = field();
|
|
1154
1154
|
|
|
1155
1155
|
<ion-select
|
|
@@ -1185,7 +1185,7 @@ class IonicSelectFieldComponent {
|
|
|
1185
1185
|
</ion-select>
|
|
1186
1186
|
`, isInline: true, styles: [":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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1187
1187
|
}
|
|
1188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicSelectFieldComponent, decorators: [{
|
|
1189
1189
|
type: Component,
|
|
1190
1190
|
args: [{ selector: 'df-ionic-select', imports: [IonSelect, IonSelectOption, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1191
1191
|
@let f = field();
|
|
@@ -1235,35 +1235,35 @@ var ionicSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1235
1235
|
});
|
|
1236
1236
|
|
|
1237
1237
|
class IonicSliderFieldComponent {
|
|
1238
|
-
field = input.required(
|
|
1239
|
-
key = input.required(
|
|
1240
|
-
label = input(
|
|
1241
|
-
placeholder = input(
|
|
1242
|
-
className = input('',
|
|
1243
|
-
tabIndex = input(
|
|
1244
|
-
props = input(
|
|
1245
|
-
validationMessages = input(
|
|
1246
|
-
defaultValidationMessages = input(
|
|
1238
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1239
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1240
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1241
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1242
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1243
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1244
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1245
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1246
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1247
1247
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1248
1248
|
showErrors = shouldShowErrors(this.field);
|
|
1249
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1249
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1250
1250
|
defaultPinFormatter = (value) => String(value);
|
|
1251
1251
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1252
1252
|
// Accessibility
|
|
1253
1253
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1254
1254
|
/** Base ID for error elements */
|
|
1255
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1255
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1256
1256
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1257
1257
|
isAriaInvalid = computed(() => {
|
|
1258
1258
|
const fieldState = this.field()();
|
|
1259
1259
|
return fieldState.invalid() && fieldState.touched();
|
|
1260
|
-
},
|
|
1260
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
1261
1261
|
/** Whether the field has a required validator */
|
|
1262
1262
|
isRequired = computed(() => {
|
|
1263
1263
|
return this.field()().required?.() === true;
|
|
1264
|
-
},
|
|
1265
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1266
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1264
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
1265
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicSliderFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
1267
1267
|
@let f = field();
|
|
1268
1268
|
|
|
1269
1269
|
<ion-range
|
|
@@ -1287,7 +1287,7 @@ class IonicSliderFieldComponent {
|
|
|
1287
1287
|
}
|
|
1288
1288
|
`, isInline: true, styles: [":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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1289
1289
|
}
|
|
1290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicSliderFieldComponent, decorators: [{
|
|
1291
1291
|
type: Component,
|
|
1292
1292
|
args: [{ selector: 'df-ionic-slider', imports: [IonRange, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1293
1293
|
@let f = field();
|
|
@@ -1325,34 +1325,34 @@ var ionicSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1325
1325
|
});
|
|
1326
1326
|
|
|
1327
1327
|
class IonicTextareaFieldComponent {
|
|
1328
|
-
field = input.required(
|
|
1329
|
-
key = input.required(
|
|
1330
|
-
label = input(
|
|
1331
|
-
placeholder = input(
|
|
1332
|
-
className = input('',
|
|
1333
|
-
tabIndex = input(
|
|
1334
|
-
props = input(
|
|
1335
|
-
validationMessages = input(
|
|
1336
|
-
defaultValidationMessages = input(
|
|
1328
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1329
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1330
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1331
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1332
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1333
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1334
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1335
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1336
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1337
1337
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1338
1338
|
showErrors = shouldShowErrors(this.field);
|
|
1339
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1339
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1340
1340
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1341
1341
|
// Accessibility
|
|
1342
1342
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1343
1343
|
/** Base ID for error elements */
|
|
1344
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1344
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1345
1345
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1346
1346
|
isAriaInvalid = computed(() => {
|
|
1347
1347
|
const fieldState = this.field()();
|
|
1348
1348
|
return fieldState.invalid() && fieldState.touched();
|
|
1349
|
-
},
|
|
1349
|
+
}, ...(ngDevMode ? [{ debugName: "isAriaInvalid" }] : []));
|
|
1350
1350
|
/** Whether the field has a required validator */
|
|
1351
1351
|
isRequired = computed(() => {
|
|
1352
1352
|
return this.field()().required?.() === true;
|
|
1353
|
-
},
|
|
1354
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1355
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1353
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
1354
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1355
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicTextareaFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
1356
1356
|
@let f = field();
|
|
1357
1357
|
|
|
1358
1358
|
<ion-textarea
|
|
@@ -1383,7 +1383,7 @@ class IonicTextareaFieldComponent {
|
|
|
1383
1383
|
</ion-textarea>
|
|
1384
1384
|
`, isInline: true, styles: [":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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1385
1385
|
}
|
|
1386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicTextareaFieldComponent, decorators: [{
|
|
1387
1387
|
type: Component,
|
|
1388
1388
|
args: [{ selector: 'df-ionic-textarea', imports: [IonTextarea, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1389
1389
|
@let f = field();
|
|
@@ -1439,51 +1439,51 @@ class IonicToggleControlComponent {
|
|
|
1439
1439
|
// FormCheckboxControl implementation
|
|
1440
1440
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1441
1441
|
/** The checked state - required by FormCheckboxControl */
|
|
1442
|
-
checked = model(false,
|
|
1442
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1443
1443
|
/** Tracks whether the field has been touched - used by Field directive */
|
|
1444
|
-
touched = model(false,
|
|
1444
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
1445
1445
|
/** Whether the field is disabled */
|
|
1446
|
-
disabled = input(false,
|
|
1446
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1447
1447
|
/** Whether the field is readonly */
|
|
1448
|
-
readonly = input(false,
|
|
1448
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1449
1449
|
/** Whether the field is invalid (from Field directive) */
|
|
1450
|
-
invalid = input(false,
|
|
1450
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
1451
1451
|
/** Whether the field is required (from Field directive) */
|
|
1452
|
-
required = input(false,
|
|
1452
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1453
1453
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1454
1454
|
// Ionic-specific props
|
|
1455
1455
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1456
|
-
labelPlacement = input('end',
|
|
1457
|
-
justify = input(undefined,
|
|
1458
|
-
color = input('primary',
|
|
1459
|
-
enableOnOffLabels = input(false,
|
|
1460
|
-
tabIndex = input(undefined,
|
|
1456
|
+
labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
|
|
1457
|
+
justify = input(undefined, ...(ngDevMode ? [{ debugName: "justify" }] : []));
|
|
1458
|
+
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1459
|
+
enableOnOffLabels = input(false, ...(ngDevMode ? [{ debugName: "enableOnOffLabels" }] : []));
|
|
1460
|
+
tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
|
|
1461
1461
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1462
1462
|
// Computed ARIA attributes
|
|
1463
1463
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1464
1464
|
/** aria-invalid: true when field is invalid AND touched */
|
|
1465
1465
|
ariaInvalid = computed(() => {
|
|
1466
1466
|
return this.invalid() && this.touched();
|
|
1467
|
-
},
|
|
1467
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1468
1468
|
/** aria-required: true if field is required, null otherwise */
|
|
1469
1469
|
ariaRequired = computed(() => {
|
|
1470
1470
|
return this.required() ? true : null;
|
|
1471
|
-
},
|
|
1471
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1472
1472
|
/** aria-readonly: true if field is readonly, null otherwise */
|
|
1473
1473
|
ariaReadonly = computed(() => {
|
|
1474
1474
|
return this.readonly() ? true : null;
|
|
1475
|
-
},
|
|
1475
|
+
}, ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : []));
|
|
1476
1476
|
/** Computed checked state - ensures proper boolean conversion for ion-toggle */
|
|
1477
1477
|
isChecked = computed(() => {
|
|
1478
1478
|
return this.checked() === true;
|
|
1479
|
-
},
|
|
1479
|
+
}, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
|
|
1480
1480
|
/**
|
|
1481
1481
|
* ion-toggle doesn't have a native readonly attribute.
|
|
1482
1482
|
* When readonly, we disable the toggle to prevent changes while maintaining the visual state.
|
|
1483
1483
|
*/
|
|
1484
1484
|
isEffectivelyDisabled = computed(() => {
|
|
1485
1485
|
return this.disabled() || this.readonly();
|
|
1486
|
-
},
|
|
1486
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : []));
|
|
1487
1487
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1488
1488
|
// Event Handlers
|
|
1489
1489
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -1495,8 +1495,8 @@ class IonicToggleControlComponent {
|
|
|
1495
1495
|
onBlur() {
|
|
1496
1496
|
this.touched.set(true);
|
|
1497
1497
|
}
|
|
1498
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1499
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
1498
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1499
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: IonicToggleControlComponent, isStandalone: true, selector: "df-ionic-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" }, ngImport: i0, template: `
|
|
1500
1500
|
<ion-toggle
|
|
1501
1501
|
[checked]="isChecked()"
|
|
1502
1502
|
(ionChange)="onToggleChange($event)"
|
|
@@ -1515,7 +1515,7 @@ class IonicToggleControlComponent {
|
|
|
1515
1515
|
</ion-toggle>
|
|
1516
1516
|
`, isInline: true, dependencies: [{ kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1517
1517
|
}
|
|
1518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
|
|
1519
1519
|
type: Component,
|
|
1520
1520
|
args: [{
|
|
1521
1521
|
selector: 'df-ionic-toggle-control',
|
|
@@ -1543,26 +1543,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1543
1543
|
}], 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 }] }] } });
|
|
1544
1544
|
|
|
1545
1545
|
class IonicToggleFieldComponent {
|
|
1546
|
-
field = input.required(
|
|
1547
|
-
key = input.required(
|
|
1546
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1547
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1548
1548
|
// Properties
|
|
1549
|
-
label = input(
|
|
1550
|
-
placeholder = input(
|
|
1551
|
-
className = input('',
|
|
1552
|
-
tabIndex = input(
|
|
1553
|
-
props = input(
|
|
1554
|
-
validationMessages = input(
|
|
1555
|
-
defaultValidationMessages = input(
|
|
1549
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1550
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1551
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1552
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1553
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1554
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1555
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1556
1556
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1557
1557
|
showErrors = shouldShowErrors(this.field);
|
|
1558
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1558
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1559
1559
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1560
1560
|
// Accessibility
|
|
1561
1561
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1562
1562
|
/** Base ID for error elements */
|
|
1563
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1564
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1563
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1564
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1565
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: IonicToggleFieldComponent, isStandalone: true, selector: "df-ionic-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 }, 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: `
|
|
1566
1566
|
@let f = field();
|
|
1567
1567
|
|
|
1568
1568
|
<df-ionic-toggle-control
|
|
@@ -1581,7 +1581,7 @@ class IonicToggleFieldComponent {
|
|
|
1581
1581
|
}
|
|
1582
1582
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonicToggleControlComponent, selector: "df-ionic-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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1583
1583
|
}
|
|
1584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IonicToggleFieldComponent, decorators: [{
|
|
1585
1585
|
type: Component,
|
|
1586
1586
|
args: [{ selector: 'df-ionic-toggle', imports: [IonicToggleControlComponent, IonNote, Field, DynamicTextPipe, AsyncPipe], template: `
|
|
1587
1587
|
@let f = field();
|