@ng-forge/dynamic-forms-ionic 0.6.1 → 0.8.0-next.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.
|
@@ -11,20 +11,20 @@ import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
|
11
11
|
class IonicButtonFieldComponent {
|
|
12
12
|
eventBus = inject(EventBus);
|
|
13
13
|
arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
14
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
15
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
16
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
17
|
-
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
18
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
19
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
14
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
15
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
16
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
17
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
18
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
19
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
20
20
|
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
21
|
-
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
22
|
-
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
23
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
24
|
-
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
21
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : /* istanbul ignore next */ []));
|
|
22
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : /* istanbul ignore next */ []));
|
|
23
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
24
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : /* istanbul ignore next */ []));
|
|
25
25
|
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
26
|
-
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
27
|
-
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
26
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
|
|
27
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
|
|
28
28
|
/**
|
|
29
29
|
* Handle button click.
|
|
30
30
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -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.2.
|
|
68
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
67
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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.2.
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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()}`',
|
|
@@ -145,20 +145,20 @@ function createAriaDescribedBySignal(errorsToDisplay, errorId, hintId, hasHint)
|
|
|
145
145
|
|
|
146
146
|
class IonicCheckboxFieldComponent {
|
|
147
147
|
elementRef = inject((ElementRef));
|
|
148
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
149
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
148
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
149
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
150
150
|
// Properties
|
|
151
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
152
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
153
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
154
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
155
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
156
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
157
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
158
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
151
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
152
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
153
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
154
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
155
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
156
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
157
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
158
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
159
159
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
160
160
|
showErrors = shouldShowErrors(this.field);
|
|
161
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
161
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
162
162
|
constructor() {
|
|
163
163
|
// Shadow DOM - apply meta to ion-checkbox element
|
|
164
164
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -169,22 +169,22 @@ class IonicCheckboxFieldComponent {
|
|
|
169
169
|
// Accessibility
|
|
170
170
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
171
171
|
/** Base ID for error elements */
|
|
172
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
172
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
173
173
|
/** Unique ID for the helper text element */
|
|
174
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
174
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
175
175
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
176
176
|
ariaInvalid = computed(() => {
|
|
177
177
|
const fieldState = this.field()();
|
|
178
178
|
return fieldState.invalid() && fieldState.touched();
|
|
179
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
179
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
180
180
|
/** Whether the field has a required validator */
|
|
181
181
|
ariaRequired = computed(() => {
|
|
182
182
|
return this.field()().required?.() === true ? true : null;
|
|
183
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
183
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
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.2.
|
|
187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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"], exportAs: ["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.2.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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();
|
|
@@ -251,23 +251,23 @@ var ionicCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
251
251
|
|
|
252
252
|
class IonicDatepickerFieldComponent {
|
|
253
253
|
elementRef = inject((ElementRef));
|
|
254
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
255
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
256
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
257
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
258
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
259
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
260
|
-
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
261
|
-
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
262
|
-
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
263
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
264
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
265
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
266
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
254
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
255
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
256
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
257
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
258
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
259
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
260
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
261
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
262
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
263
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
264
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
265
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
266
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
267
267
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
268
268
|
showErrors = shouldShowErrors(this.field);
|
|
269
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
270
|
-
isModalOpen = signal(false, ...(ngDevMode ? [{ debugName: "isModalOpen" }] : []));
|
|
269
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
270
|
+
isModalOpen = signal(false, ...(ngDevMode ? [{ debugName: "isModalOpen" }] : /* istanbul ignore next */ []));
|
|
271
271
|
constructor() {
|
|
272
272
|
// Shadow DOM - apply meta to ion-input element
|
|
273
273
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -278,18 +278,18 @@ class IonicDatepickerFieldComponent {
|
|
|
278
278
|
// Accessibility
|
|
279
279
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
280
280
|
/** Base ID for error elements */
|
|
281
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
281
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
282
282
|
/** Unique ID for the helper text element */
|
|
283
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
283
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
284
284
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
285
285
|
ariaInvalid = computed(() => {
|
|
286
286
|
const fieldState = this.field()();
|
|
287
287
|
return fieldState.invalid() && fieldState.touched();
|
|
288
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
288
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
289
289
|
/** Whether the field has a required validator */
|
|
290
290
|
ariaRequired = computed(() => {
|
|
291
291
|
return this.field()().required?.() === true ? true : null;
|
|
292
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
292
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
293
293
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
294
294
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
295
295
|
openModal() {
|
|
@@ -338,8 +338,8 @@ class IonicDatepickerFieldComponent {
|
|
|
338
338
|
return format(date, 'MMM d, yyyy');
|
|
339
339
|
}
|
|
340
340
|
}
|
|
341
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
343
343
|
@let f = field();
|
|
344
344
|
@let dateValue = f().value();
|
|
345
345
|
@let inputId = key() + '-input';
|
|
@@ -396,7 +396,7 @@ class IonicDatepickerFieldComponent {
|
|
|
396
396
|
</ion-modal>
|
|
397
397
|
`, 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 });
|
|
398
398
|
}
|
|
399
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicDatepickerFieldComponent, decorators: [{
|
|
400
400
|
type: Component,
|
|
401
401
|
args: [{ selector: 'df-ion-datepicker', imports: [
|
|
402
402
|
IonInput,
|
|
@@ -505,23 +505,23 @@ const IONIC_CONFIG = new InjectionToken('IONIC_CONFIG');
|
|
|
505
505
|
class IonicInputFieldComponent {
|
|
506
506
|
elementRef = inject((ElementRef));
|
|
507
507
|
ionicConfig = inject(IONIC_CONFIG, { optional: true });
|
|
508
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
509
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
510
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
511
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
512
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
513
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
514
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
515
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
516
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
517
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
518
|
-
effectiveFill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', ...(ngDevMode ? [{ debugName: "effectiveFill" }] : []));
|
|
519
|
-
effectiveShape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, ...(ngDevMode ? [{ debugName: "effectiveShape" }] : []));
|
|
520
|
-
effectiveLabelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'start', ...(ngDevMode ? [{ debugName: "effectiveLabelPlacement" }] : []));
|
|
521
|
-
effectiveColor = computed(() => this.props()?.color ?? this.ionicConfig?.color, ...(ngDevMode ? [{ debugName: "effectiveColor" }] : []));
|
|
508
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
509
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
510
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
511
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
512
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
513
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
514
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
515
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
516
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
517
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
518
|
+
effectiveFill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', ...(ngDevMode ? [{ debugName: "effectiveFill" }] : /* istanbul ignore next */ []));
|
|
519
|
+
effectiveShape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, ...(ngDevMode ? [{ debugName: "effectiveShape" }] : /* istanbul ignore next */ []));
|
|
520
|
+
effectiveLabelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'start', ...(ngDevMode ? [{ debugName: "effectiveLabelPlacement" }] : /* istanbul ignore next */ []));
|
|
521
|
+
effectiveColor = computed(() => this.props()?.color ?? this.ionicConfig?.color, ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
|
|
522
522
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
523
523
|
showErrors = shouldShowErrors(this.field);
|
|
524
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
524
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
525
525
|
constructor() {
|
|
526
526
|
// Shadow DOM - apply meta to ion-input element
|
|
527
527
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -552,22 +552,22 @@ class IonicInputFieldComponent {
|
|
|
552
552
|
// Accessibility
|
|
553
553
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
554
554
|
/** Base ID for error elements */
|
|
555
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
555
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
556
556
|
/** Unique ID for the helper text element */
|
|
557
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
557
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
558
558
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
559
559
|
ariaInvalid = computed(() => {
|
|
560
560
|
const fieldState = this.field()();
|
|
561
561
|
return fieldState.invalid() && fieldState.touched();
|
|
562
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
562
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
563
563
|
/** Whether the field has a required validator */
|
|
564
564
|
ariaRequired = computed(() => {
|
|
565
565
|
return this.field()().required?.() === true ? true : null;
|
|
566
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
566
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
567
567
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
568
568
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
569
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
569
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
571
571
|
@let f = field();
|
|
572
572
|
@let inputId = key() + '-input';
|
|
573
573
|
|
|
@@ -595,7 +595,7 @@ class IonicInputFieldComponent {
|
|
|
595
595
|
}
|
|
596
596
|
`, 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"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
597
597
|
}
|
|
598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicInputFieldComponent, decorators: [{
|
|
599
599
|
type: Component,
|
|
600
600
|
args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
601
601
|
@let f = field();
|
|
@@ -638,42 +638,42 @@ var ionicInput_component = /*#__PURE__*/Object.freeze({
|
|
|
638
638
|
|
|
639
639
|
class IonicMultiCheckboxFieldComponent {
|
|
640
640
|
elementRef = inject((ElementRef));
|
|
641
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
642
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
643
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
644
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
645
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
646
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
647
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
648
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
649
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
650
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
651
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
641
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
642
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
643
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
644
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
645
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
646
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
647
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
648
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
649
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
650
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
651
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
652
652
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
653
653
|
showErrors = shouldShowErrors(this.field);
|
|
654
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
654
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
655
655
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
656
656
|
// Accessibility
|
|
657
657
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
658
658
|
/** Base ID for error elements */
|
|
659
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
659
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
660
660
|
/** Unique ID for the helper text element */
|
|
661
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
661
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
662
662
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
663
663
|
ariaInvalid = computed(() => {
|
|
664
664
|
const fieldState = this.field()();
|
|
665
665
|
return fieldState.invalid() && fieldState.touched();
|
|
666
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
666
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
667
667
|
/** Whether the field has a required validator */
|
|
668
668
|
ariaRequired = computed(() => {
|
|
669
669
|
return this.field()().required?.() === true ? true : null;
|
|
670
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
670
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
671
671
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
672
672
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
673
673
|
valueViewModel = linkedSignal(() => {
|
|
674
674
|
const currentValues = this.field()().value();
|
|
675
675
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
676
|
-
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : {}), equal: isEqual });
|
|
676
|
+
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
|
|
677
677
|
/** Computed map of checked option values for O(1) lookup in template */
|
|
678
678
|
checkedValuesMap = computed(() => {
|
|
679
679
|
const map = {};
|
|
@@ -681,7 +681,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
681
681
|
map[String(opt.value)] = true;
|
|
682
682
|
}
|
|
683
683
|
return map;
|
|
684
|
-
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : []));
|
|
684
|
+
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
|
|
685
685
|
constructor() {
|
|
686
686
|
// Shadow DOM - apply meta to ion-checkbox elements, re-apply when options change
|
|
687
687
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -713,8 +713,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
713
713
|
}
|
|
714
714
|
});
|
|
715
715
|
}
|
|
716
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
716
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
717
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
718
718
|
@let f = field();
|
|
719
719
|
@let checked = checkedValuesMap();
|
|
720
720
|
@if (label(); as label) {
|
|
@@ -753,7 +753,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
753
753
|
}
|
|
754
754
|
`, 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 });
|
|
755
755
|
}
|
|
756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
|
|
757
757
|
type: Component,
|
|
758
758
|
args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe], template: `
|
|
759
759
|
@let f = field();
|
|
@@ -807,21 +807,21 @@ var ionicMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
807
807
|
|
|
808
808
|
class IonicRadioFieldComponent {
|
|
809
809
|
elementRef = inject((ElementRef));
|
|
810
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
811
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
810
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
811
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
812
812
|
// Properties
|
|
813
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
814
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
815
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
816
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
817
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
818
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
819
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
820
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
821
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
813
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
814
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
815
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
816
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
817
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
818
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
819
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
820
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
821
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
822
822
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
823
823
|
showErrors = shouldShowErrors(this.field);
|
|
824
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
824
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
825
825
|
defaultCompare = Object.is;
|
|
826
826
|
constructor() {
|
|
827
827
|
// Shadow DOM - apply meta to ion-radio elements, re-apply when options change
|
|
@@ -834,22 +834,22 @@ class IonicRadioFieldComponent {
|
|
|
834
834
|
// Accessibility
|
|
835
835
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
836
836
|
/** Base ID for error elements */
|
|
837
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
837
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
838
838
|
/** Unique ID for the helper text element */
|
|
839
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
839
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
840
840
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
841
841
|
ariaInvalid = computed(() => {
|
|
842
842
|
const fieldState = this.field()();
|
|
843
843
|
return fieldState.invalid() && fieldState.touched();
|
|
844
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
844
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
845
845
|
/** Whether the field has a required validator */
|
|
846
846
|
ariaRequired = computed(() => {
|
|
847
847
|
return this.field()().required?.() === true ? true : null;
|
|
848
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
848
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
849
849
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
850
850
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
851
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
853
853
|
@let f = field();
|
|
854
854
|
@let radioGroupId = key() + '-radio-group';
|
|
855
855
|
@if (label(); as label) {
|
|
@@ -886,7 +886,7 @@ class IonicRadioFieldComponent {
|
|
|
886
886
|
}
|
|
887
887
|
`, 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"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
888
888
|
}
|
|
889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
|
|
890
890
|
type: Component,
|
|
891
891
|
args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
892
892
|
@let f = field();
|
|
@@ -938,44 +938,44 @@ var ionicRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
938
938
|
|
|
939
939
|
class IonicSelectFieldComponent {
|
|
940
940
|
elementRef = inject((ElementRef));
|
|
941
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
942
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
943
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
944
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
945
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
946
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
947
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
948
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
949
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
950
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
951
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
941
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
942
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
943
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
944
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
945
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
946
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
947
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
948
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
949
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
950
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
951
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
952
952
|
constructor() {
|
|
953
953
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'ion-select' });
|
|
954
954
|
}
|
|
955
955
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
956
956
|
showErrors = shouldShowErrors(this.field);
|
|
957
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
957
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
958
958
|
defaultCompare = Object.is;
|
|
959
959
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
960
960
|
// Accessibility
|
|
961
961
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
962
962
|
/** Base ID for error elements */
|
|
963
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
963
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
964
964
|
/** Unique ID for the helper text element */
|
|
965
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
965
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
966
966
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
967
967
|
ariaInvalid = computed(() => {
|
|
968
968
|
const fieldState = this.field()();
|
|
969
969
|
return fieldState.invalid() && fieldState.touched();
|
|
970
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
970
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
971
971
|
/** Whether the field has a required validator */
|
|
972
972
|
ariaRequired = computed(() => {
|
|
973
973
|
return this.field()().required?.() === true ? true : null;
|
|
974
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
974
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
975
975
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
976
976
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
977
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
978
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
979
979
|
@let f = field();
|
|
980
980
|
@let selectId = key() + '-select';
|
|
981
981
|
|
|
@@ -984,7 +984,7 @@ class IonicSelectFieldComponent {
|
|
|
984
984
|
[formField]="f"
|
|
985
985
|
[label]="(label() | dynamicText | async) ?? undefined"
|
|
986
986
|
[labelPlacement]="props()?.labelPlacement ?? 'stacked'"
|
|
987
|
-
[placeholder]="(placeholder()
|
|
987
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
988
988
|
[multiple]="props()?.multiple ?? false"
|
|
989
989
|
[compareWith]="props()?.compareWith ?? defaultCompare"
|
|
990
990
|
[interface]="props()?.interface ?? 'alert'"
|
|
@@ -1012,7 +1012,7 @@ class IonicSelectFieldComponent {
|
|
|
1012
1012
|
}
|
|
1013
1013
|
`, 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"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1014
1014
|
}
|
|
1015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicSelectFieldComponent, decorators: [{
|
|
1016
1016
|
type: Component,
|
|
1017
1017
|
args: [{ selector: 'df-ion-select', imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1018
1018
|
@let f = field();
|
|
@@ -1023,7 +1023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1023
1023
|
[formField]="f"
|
|
1024
1024
|
[label]="(label() | dynamicText | async) ?? undefined"
|
|
1025
1025
|
[labelPlacement]="props()?.labelPlacement ?? 'stacked'"
|
|
1026
|
-
[placeholder]="(placeholder()
|
|
1026
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
1027
1027
|
[multiple]="props()?.multiple ?? false"
|
|
1028
1028
|
[compareWith]="props()?.compareWith ?? defaultCompare"
|
|
1029
1029
|
[interface]="props()?.interface ?? 'alert'"
|
|
@@ -1064,43 +1064,43 @@ var ionicSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1064
1064
|
|
|
1065
1065
|
class IonicSliderFieldComponent {
|
|
1066
1066
|
elementRef = inject((ElementRef));
|
|
1067
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1068
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1069
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1070
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1071
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1072
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1073
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1074
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1075
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1076
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1067
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1068
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1069
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1070
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1071
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1072
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1073
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1074
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1075
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1076
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1077
1077
|
constructor() {
|
|
1078
1078
|
setupMetaTracking(this.elementRef, this.meta);
|
|
1079
1079
|
}
|
|
1080
1080
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1081
1081
|
showErrors = shouldShowErrors(this.field);
|
|
1082
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1082
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1083
1083
|
defaultPinFormatter = (value) => String(value);
|
|
1084
1084
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1085
1085
|
// Accessibility
|
|
1086
1086
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1087
1087
|
/** Base ID for error elements */
|
|
1088
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1088
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1089
1089
|
/** Unique ID for the helper text element */
|
|
1090
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1090
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1091
1091
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1092
1092
|
ariaInvalid = computed(() => {
|
|
1093
1093
|
const fieldState = this.field()();
|
|
1094
1094
|
return fieldState.invalid() && fieldState.touched();
|
|
1095
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1095
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1096
1096
|
/** Whether the field has a required validator */
|
|
1097
1097
|
ariaRequired = computed(() => {
|
|
1098
1098
|
return this.field()().required?.() === true ? true : null;
|
|
1099
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1099
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1100
1100
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1101
1101
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1102
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
1104
1104
|
@let f = field();
|
|
1105
1105
|
@let inputId = key() + '-input';
|
|
1106
1106
|
|
|
@@ -1131,7 +1131,7 @@ class IonicSliderFieldComponent {
|
|
|
1131
1131
|
}
|
|
1132
1132
|
`, 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"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1133
1133
|
}
|
|
1134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicSliderFieldComponent, decorators: [{
|
|
1135
1135
|
type: Component,
|
|
1136
1136
|
args: [{ selector: 'df-ion-slider', imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1137
1137
|
@let f = field();
|
|
@@ -1177,19 +1177,19 @@ var ionicSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1177
1177
|
|
|
1178
1178
|
class IonicTextareaFieldComponent {
|
|
1179
1179
|
elementRef = inject((ElementRef));
|
|
1180
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1181
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1182
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1183
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1184
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1185
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1186
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1187
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1188
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1189
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1180
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1181
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1182
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1183
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1184
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1185
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1186
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1187
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1188
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1189
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1190
1190
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1191
1191
|
showErrors = shouldShowErrors(this.field);
|
|
1192
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1192
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1193
1193
|
constructor() {
|
|
1194
1194
|
// Shadow DOM - apply meta to ion-textarea element
|
|
1195
1195
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -1220,22 +1220,22 @@ class IonicTextareaFieldComponent {
|
|
|
1220
1220
|
// Accessibility
|
|
1221
1221
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1222
1222
|
/** Base ID for error elements */
|
|
1223
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1223
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1224
1224
|
/** Unique ID for the helper text element */
|
|
1225
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1225
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1226
1226
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1227
1227
|
ariaInvalid = computed(() => {
|
|
1228
1228
|
const fieldState = this.field()();
|
|
1229
1229
|
return fieldState.invalid() && fieldState.touched();
|
|
1230
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1230
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1231
1231
|
/** Whether the field has a required validator */
|
|
1232
1232
|
ariaRequired = computed(() => {
|
|
1233
1233
|
return this.field()().required?.() === true ? true : null;
|
|
1234
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1234
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1235
1235
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1236
1236
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1237
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1238
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1237
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1238
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
1239
1239
|
@let f = field();
|
|
1240
1240
|
@let textareaId = key() + '-textarea';
|
|
1241
1241
|
|
|
@@ -1263,7 +1263,7 @@ class IonicTextareaFieldComponent {
|
|
|
1263
1263
|
}
|
|
1264
1264
|
`, 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"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1265
1265
|
}
|
|
1266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicTextareaFieldComponent, decorators: [{
|
|
1267
1267
|
type: Component,
|
|
1268
1268
|
args: [{ selector: 'df-ion-textarea', imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1269
1269
|
@let f = field();
|
|
@@ -1317,27 +1317,27 @@ class IonicToggleControlComponent {
|
|
|
1317
1317
|
// FormCheckboxControl implementation
|
|
1318
1318
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1319
1319
|
/** The checked state - required by FormCheckboxControl */
|
|
1320
|
-
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1320
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
1321
1321
|
/** Tracks whether the field has been touched - used by Field directive */
|
|
1322
|
-
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
1322
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1323
1323
|
/** Whether the field is disabled */
|
|
1324
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1324
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1325
1325
|
/** Whether the field is readonly */
|
|
1326
|
-
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1326
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1327
1327
|
/** Whether the field is invalid (from Field directive) */
|
|
1328
|
-
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
1328
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
1329
1329
|
/** Whether the field is required (from Field directive) */
|
|
1330
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1330
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1331
1331
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1332
1332
|
// Ionic-specific props
|
|
1333
1333
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1334
|
-
labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
|
|
1335
|
-
justify = input(undefined, ...(ngDevMode ? [{ debugName: "justify" }] : []));
|
|
1336
|
-
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1337
|
-
enableOnOffLabels = input(false, ...(ngDevMode ? [{ debugName: "enableOnOffLabels" }] : []));
|
|
1338
|
-
tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
|
|
1339
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1340
|
-
ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1334
|
+
labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
|
|
1335
|
+
justify = input(undefined, ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
|
|
1336
|
+
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1337
|
+
enableOnOffLabels = input(false, ...(ngDevMode ? [{ debugName: "enableOnOffLabels" }] : /* istanbul ignore next */ []));
|
|
1338
|
+
tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1339
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1340
|
+
ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
1341
1341
|
constructor() {
|
|
1342
1342
|
// Shadow DOM - apply meta to ion-toggle element
|
|
1343
1343
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -1350,26 +1350,26 @@ class IonicToggleControlComponent {
|
|
|
1350
1350
|
/** aria-invalid: true when field is invalid AND touched */
|
|
1351
1351
|
ariaInvalid = computed(() => {
|
|
1352
1352
|
return this.invalid() && this.touched();
|
|
1353
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1353
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1354
1354
|
/** aria-required: true if field is required, null otherwise */
|
|
1355
1355
|
ariaRequired = computed(() => {
|
|
1356
1356
|
return this.required() ? true : null;
|
|
1357
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1357
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1358
1358
|
/** aria-readonly: true if field is readonly, null otherwise */
|
|
1359
1359
|
ariaReadonly = computed(() => {
|
|
1360
1360
|
return this.readonly() ? true : null;
|
|
1361
|
-
}, ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : []));
|
|
1361
|
+
}, ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : /* istanbul ignore next */ []));
|
|
1362
1362
|
/** Computed checked state - ensures proper boolean conversion for ion-toggle */
|
|
1363
1363
|
isChecked = computed(() => {
|
|
1364
1364
|
return this.checked() === true;
|
|
1365
|
-
}, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
|
|
1365
|
+
}, ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
|
|
1366
1366
|
/**
|
|
1367
1367
|
* ion-toggle doesn't have a native readonly attribute.
|
|
1368
1368
|
* When readonly, we disable the toggle to prevent changes while maintaining the visual state.
|
|
1369
1369
|
*/
|
|
1370
1370
|
isEffectivelyDisabled = computed(() => {
|
|
1371
1371
|
return this.disabled() || this.readonly();
|
|
1372
|
-
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : []));
|
|
1372
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
1373
1373
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1374
1374
|
// Event Handlers
|
|
1375
1375
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -1381,8 +1381,8 @@ class IonicToggleControlComponent {
|
|
|
1381
1381
|
onBlur() {
|
|
1382
1382
|
this.touched.set(true);
|
|
1383
1383
|
}
|
|
1384
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1385
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1384
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1385
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: `
|
|
1386
1386
|
<ion-toggle
|
|
1387
1387
|
[checked]="isChecked()"
|
|
1388
1388
|
(ionChange)="onToggleChange($event)"
|
|
@@ -1402,7 +1402,7 @@ class IonicToggleControlComponent {
|
|
|
1402
1402
|
</ion-toggle>
|
|
1403
1403
|
`, 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 });
|
|
1404
1404
|
}
|
|
1405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
|
|
1406
1406
|
type: Component,
|
|
1407
1407
|
args: [{ selector: 'df-ion-toggle-control', imports: [IonToggle], template: `
|
|
1408
1408
|
<ion-toggle
|
|
@@ -1429,34 +1429,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1429
1429
|
|
|
1430
1430
|
class IonicToggleFieldComponent {
|
|
1431
1431
|
elementRef = inject((ElementRef));
|
|
1432
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1433
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1432
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1433
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1434
1434
|
// Properties
|
|
1435
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1436
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1437
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1438
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1439
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1440
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1441
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1442
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1435
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1436
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1437
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1438
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1439
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1440
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1441
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1442
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1443
1443
|
constructor() {
|
|
1444
1444
|
setupMetaTracking(this.elementRef, this.meta);
|
|
1445
1445
|
}
|
|
1446
1446
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1447
1447
|
showErrors = shouldShowErrors(this.field);
|
|
1448
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1448
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1449
1449
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1450
1450
|
// Accessibility
|
|
1451
1451
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1452
1452
|
/** Base ID for error elements */
|
|
1453
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1453
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1454
1454
|
/** Unique ID for the helper text element */
|
|
1455
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1455
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1456
1456
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1457
1457
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1458
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1458
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
1460
1460
|
@let f = field();
|
|
1461
1461
|
@let toggleId = key() + '-toggle';
|
|
1462
1462
|
|
|
@@ -1481,7 +1481,7 @@ class IonicToggleFieldComponent {
|
|
|
1481
1481
|
}
|
|
1482
1482
|
`, 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"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1483
1483
|
}
|
|
1484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IonicToggleFieldComponent, decorators: [{
|
|
1485
1485
|
type: Component,
|
|
1486
1486
|
args: [{ selector: 'df-ion-toggle', imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1487
1487
|
@let f = field();
|
|
@@ -1609,6 +1609,9 @@ function buttonFieldMapper(fieldDef) {
|
|
|
1609
1609
|
* disabled state resolution based on form validity and options.
|
|
1610
1610
|
*/
|
|
1611
1611
|
|
|
1612
|
+
const BUTTON_FIELD_TYPES_BASE = {
|
|
1613
|
+
renderReadyWhen: [],
|
|
1614
|
+
};
|
|
1612
1615
|
/**
|
|
1613
1616
|
* Ionic field type definitions
|
|
1614
1617
|
* Follows the FieldTypeDefinition interface for proper registry integration
|
|
@@ -1619,107 +1622,126 @@ const IONIC_FIELD_TYPES = [
|
|
|
1619
1622
|
loadComponent: () => Promise.resolve().then(function () { return ionicInput_component; }),
|
|
1620
1623
|
mapper: valueFieldMapper,
|
|
1621
1624
|
propsToMeta: ['type'],
|
|
1625
|
+
scope: ['text-input', 'numeric'],
|
|
1622
1626
|
},
|
|
1623
1627
|
{
|
|
1624
1628
|
name: IonicField.Select,
|
|
1625
1629
|
loadComponent: () => Promise.resolve().then(function () { return ionicSelect_component; }),
|
|
1626
1630
|
mapper: optionsFieldMapper,
|
|
1631
|
+
scope: 'single-select',
|
|
1627
1632
|
},
|
|
1628
1633
|
{
|
|
1629
1634
|
name: IonicField.Checkbox,
|
|
1630
1635
|
loadComponent: () => Promise.resolve().then(function () { return ionicCheckbox_component; }),
|
|
1631
1636
|
mapper: checkboxFieldMapper,
|
|
1637
|
+
scope: 'boolean',
|
|
1632
1638
|
},
|
|
1633
1639
|
{
|
|
1634
1640
|
name: IonicField.Button,
|
|
1635
1641
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1636
1642
|
mapper: buttonFieldMapper,
|
|
1637
1643
|
valueHandling: 'exclude',
|
|
1644
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1638
1645
|
},
|
|
1639
1646
|
{
|
|
1640
1647
|
name: IonicField.Submit,
|
|
1641
1648
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1642
1649
|
mapper: submitButtonFieldMapper,
|
|
1643
1650
|
valueHandling: 'exclude',
|
|
1651
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1644
1652
|
},
|
|
1645
1653
|
{
|
|
1646
1654
|
name: IonicField.Next,
|
|
1647
1655
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1648
1656
|
mapper: nextButtonFieldMapper,
|
|
1649
1657
|
valueHandling: 'exclude',
|
|
1658
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1650
1659
|
},
|
|
1651
1660
|
{
|
|
1652
1661
|
name: IonicField.Previous,
|
|
1653
1662
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1654
1663
|
mapper: previousButtonFieldMapper,
|
|
1655
1664
|
valueHandling: 'exclude',
|
|
1665
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1656
1666
|
},
|
|
1657
1667
|
{
|
|
1658
1668
|
name: IonicField.AddArrayItem,
|
|
1659
1669
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1660
1670
|
mapper: addArrayItemButtonMapper,
|
|
1661
1671
|
valueHandling: 'exclude',
|
|
1672
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1662
1673
|
},
|
|
1663
1674
|
{
|
|
1664
1675
|
name: IonicField.PrependArrayItem,
|
|
1665
1676
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1666
1677
|
mapper: prependArrayItemButtonMapper,
|
|
1667
1678
|
valueHandling: 'exclude',
|
|
1679
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1668
1680
|
},
|
|
1669
1681
|
{
|
|
1670
1682
|
name: IonicField.InsertArrayItem,
|
|
1671
1683
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1672
1684
|
mapper: insertArrayItemButtonMapper,
|
|
1673
1685
|
valueHandling: 'exclude',
|
|
1686
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1674
1687
|
},
|
|
1675
1688
|
{
|
|
1676
1689
|
name: IonicField.RemoveArrayItem,
|
|
1677
1690
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1678
1691
|
mapper: removeArrayItemButtonMapper,
|
|
1679
1692
|
valueHandling: 'exclude',
|
|
1693
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1680
1694
|
},
|
|
1681
1695
|
{
|
|
1682
1696
|
name: IonicField.PopArrayItem,
|
|
1683
1697
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1684
1698
|
mapper: popArrayItemButtonMapper,
|
|
1685
1699
|
valueHandling: 'exclude',
|
|
1700
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1686
1701
|
},
|
|
1687
1702
|
{
|
|
1688
1703
|
name: IonicField.ShiftArrayItem,
|
|
1689
1704
|
loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
|
|
1690
1705
|
mapper: shiftArrayItemButtonMapper,
|
|
1691
1706
|
valueHandling: 'exclude',
|
|
1707
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1692
1708
|
},
|
|
1693
1709
|
{
|
|
1694
1710
|
name: IonicField.Textarea,
|
|
1695
1711
|
loadComponent: () => Promise.resolve().then(function () { return ionicTextarea_component; }),
|
|
1696
1712
|
mapper: valueFieldMapper,
|
|
1697
1713
|
propsToMeta: ['rows'],
|
|
1714
|
+
scope: 'text-input',
|
|
1698
1715
|
},
|
|
1699
1716
|
{
|
|
1700
1717
|
name: IonicField.Radio,
|
|
1701
1718
|
loadComponent: () => Promise.resolve().then(function () { return ionicRadio_component; }),
|
|
1702
1719
|
mapper: optionsFieldMapper,
|
|
1720
|
+
scope: 'single-select',
|
|
1703
1721
|
},
|
|
1704
1722
|
{
|
|
1705
1723
|
name: IonicField.MultiCheckbox,
|
|
1706
1724
|
loadComponent: () => Promise.resolve().then(function () { return ionicMultiCheckbox_component; }),
|
|
1707
1725
|
mapper: optionsFieldMapper,
|
|
1726
|
+
scope: 'multi-select',
|
|
1708
1727
|
},
|
|
1709
1728
|
{
|
|
1710
1729
|
name: IonicField.Datepicker,
|
|
1711
1730
|
loadComponent: () => Promise.resolve().then(function () { return ionicDatepicker_component; }),
|
|
1712
1731
|
mapper: datepickerFieldMapper,
|
|
1732
|
+
scope: 'date',
|
|
1713
1733
|
},
|
|
1714
1734
|
{
|
|
1715
1735
|
name: IonicField.Slider,
|
|
1716
1736
|
loadComponent: () => Promise.resolve().then(function () { return ionicSlider_component; }),
|
|
1717
1737
|
mapper: valueFieldMapper,
|
|
1738
|
+
scope: 'numeric',
|
|
1718
1739
|
},
|
|
1719
1740
|
{
|
|
1720
1741
|
name: IonicField.Toggle,
|
|
1721
1742
|
loadComponent: () => Promise.resolve().then(function () { return ionicToggle_component; }),
|
|
1722
1743
|
mapper: checkboxFieldMapper,
|
|
1744
|
+
scope: 'boolean',
|
|
1723
1745
|
},
|
|
1724
1746
|
];
|
|
1725
1747
|
|
|
@@ -1729,54 +1751,19 @@ const IONIC_FIELD_TYPES = [
|
|
|
1729
1751
|
* all Ionic field types provided by this library.
|
|
1730
1752
|
*/
|
|
1731
1753
|
|
|
1732
|
-
/**
|
|
1733
|
-
* Configure dynamic forms with Ionic field types.
|
|
1734
|
-
* Provides all Ionic field types for use with provideDynamicForm.
|
|
1735
|
-
*
|
|
1736
|
-
* @param config - Optional global configuration for Ionic form fields
|
|
1737
|
-
*
|
|
1738
|
-
* @example
|
|
1739
|
-
* ```typescript
|
|
1740
|
-
* // Application-level setup
|
|
1741
|
-
* import { ApplicationConfig } from '@angular/core';
|
|
1742
|
-
* import { provideDynamicForm } from '@ng-forge/dynamic-form';
|
|
1743
|
-
* import { withIonicFields } from '@ng-forge/dynamic-form-ionic';
|
|
1744
|
-
*
|
|
1745
|
-
* export const appConfig: ApplicationConfig = {
|
|
1746
|
-
* providers: [
|
|
1747
|
-
* provideDynamicForm(...withIonicFields())
|
|
1748
|
-
* ]
|
|
1749
|
-
* };
|
|
1750
|
-
* ```
|
|
1751
|
-
*
|
|
1752
|
-
* @example
|
|
1753
|
-
* ```typescript
|
|
1754
|
-
* // With global configuration
|
|
1755
|
-
* export const appConfig: ApplicationConfig = {
|
|
1756
|
-
* providers: [
|
|
1757
|
-
* provideDynamicForm(
|
|
1758
|
-
* ...withIonicFields({
|
|
1759
|
-
* fill: 'outline',
|
|
1760
|
-
* labelPlacement: 'floating'
|
|
1761
|
-
* })
|
|
1762
|
-
* )
|
|
1763
|
-
* ]
|
|
1764
|
-
* };
|
|
1765
|
-
* ```
|
|
1766
|
-
*
|
|
1767
|
-
* @returns Array of field type definitions for Ionic components
|
|
1768
|
-
*/
|
|
1769
1754
|
function withIonicFields(config) {
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
fields.__configProviders = [
|
|
1773
|
-
{
|
|
1774
|
-
provide: IONIC_CONFIG,
|
|
1775
|
-
useValue: config,
|
|
1776
|
-
},
|
|
1777
|
-
];
|
|
1755
|
+
if (!config) {
|
|
1756
|
+
return IONIC_FIELD_TYPES;
|
|
1778
1757
|
}
|
|
1779
|
-
|
|
1758
|
+
const fieldsWithConfig = [
|
|
1759
|
+
...IONIC_FIELD_TYPES,
|
|
1760
|
+
{
|
|
1761
|
+
ɵkind: 'ionic-config',
|
|
1762
|
+
ɵproviders: [{ provide: IONIC_CONFIG, useValue: config }],
|
|
1763
|
+
},
|
|
1764
|
+
];
|
|
1765
|
+
// Safe: this preserves all Ionic field definitions and appends exactly one config feature.
|
|
1766
|
+
return fieldsWithConfig;
|
|
1780
1767
|
}
|
|
1781
1768
|
|
|
1782
1769
|
// Field fields
|