@ng-forge/dynamic-forms-ionic 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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.
|
|
68
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
67
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", 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.
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", 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.
|
|
187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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
|
|
|
@@ -208,9 +208,9 @@ class IonicCheckboxFieldComponent {
|
|
|
208
208
|
} @else if (props()?.hint; as hint) {
|
|
209
209
|
<ion-note class="df-ion-hint" [id]="hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
210
210
|
}
|
|
211
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", 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() {
|
|
@@ -300,7 +300,9 @@ class IonicDatepickerFieldComponent {
|
|
|
300
300
|
}
|
|
301
301
|
onDateChange(event) {
|
|
302
302
|
const value = event.detail.value;
|
|
303
|
-
|
|
303
|
+
// ion-datetime emits ISO 8601 strings internally; we convert to Date objects
|
|
304
|
+
// to match the FieldTree<Date | null> type contract.
|
|
305
|
+
if (value && typeof value === 'string' && value.length > 0) {
|
|
304
306
|
const date = new Date(value);
|
|
305
307
|
this.field()().value.set(date);
|
|
306
308
|
}
|
|
@@ -336,8 +338,8 @@ class IonicDatepickerFieldComponent {
|
|
|
336
338
|
return format(date, 'MMM d, yyyy');
|
|
337
339
|
}
|
|
338
340
|
}
|
|
339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicDatepickerFieldComponent, isStandalone: true, selector: "df-ion-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
341
343
|
@let f = field();
|
|
342
344
|
@let dateValue = f().value();
|
|
343
345
|
@let inputId = key() + '-input';
|
|
@@ -394,7 +396,7 @@ class IonicDatepickerFieldComponent {
|
|
|
394
396
|
</ion-modal>
|
|
395
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 });
|
|
396
398
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicDatepickerFieldComponent, decorators: [{
|
|
398
400
|
type: Component,
|
|
399
401
|
args: [{ selector: 'df-ion-datepicker', imports: [
|
|
400
402
|
IonInput,
|
|
@@ -503,43 +505,43 @@ const IONIC_CONFIG = new InjectionToken('IONIC_CONFIG');
|
|
|
503
505
|
class IonicInputFieldComponent {
|
|
504
506
|
elementRef = inject((ElementRef));
|
|
505
507
|
ionicConfig = inject(IONIC_CONFIG, { optional: true });
|
|
506
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
507
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
508
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
509
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
510
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
511
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
512
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
513
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
514
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
515
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
516
|
-
effectiveFill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', ...(ngDevMode ? [{ debugName: "effectiveFill" }] : []));
|
|
517
|
-
effectiveShape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, ...(ngDevMode ? [{ debugName: "effectiveShape" }] : []));
|
|
518
|
-
effectiveLabelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'start', ...(ngDevMode ? [{ debugName: "effectiveLabelPlacement" }] : []));
|
|
519
|
-
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 */ []));
|
|
520
522
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
521
523
|
showErrors = shouldShowErrors(this.field);
|
|
522
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
524
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
523
525
|
constructor() {
|
|
524
526
|
// Shadow DOM - apply meta to ion-input element
|
|
525
527
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
526
528
|
selector: 'ion-input',
|
|
527
529
|
});
|
|
528
|
-
//
|
|
529
|
-
//
|
|
530
|
-
// after a microtask to ensure Ionic has
|
|
530
|
+
// ion-input encapsulates a native <input> in shadow DOM and does not automatically
|
|
531
|
+
// propagate aria-describedby to it. This effect imperatively syncs the attribute
|
|
532
|
+
// after a microtask to ensure Ionic has resolved the internal element.
|
|
531
533
|
explicitEffect([this.ariaDescribedBy], ([describedBy]) => {
|
|
532
534
|
queueMicrotask(() => {
|
|
533
535
|
const ionInput = this.elementRef.nativeElement.querySelector('ion-input');
|
|
534
536
|
if (ionInput?.getInputElement) {
|
|
535
537
|
ionInput.getInputElement().then((inputEl) => {
|
|
536
|
-
if (inputEl)
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
538
|
+
if (!inputEl)
|
|
539
|
+
return;
|
|
540
|
+
if (describedBy) {
|
|
541
|
+
inputEl.setAttribute('aria-describedby', describedBy);
|
|
542
|
+
}
|
|
543
|
+
else {
|
|
544
|
+
inputEl.removeAttribute('aria-describedby');
|
|
543
545
|
}
|
|
544
546
|
});
|
|
545
547
|
}
|
|
@@ -550,22 +552,22 @@ class IonicInputFieldComponent {
|
|
|
550
552
|
// Accessibility
|
|
551
553
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
552
554
|
/** Base ID for error elements */
|
|
553
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
555
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
554
556
|
/** Unique ID for the helper text element */
|
|
555
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
557
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
556
558
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
557
559
|
ariaInvalid = computed(() => {
|
|
558
560
|
const fieldState = this.field()();
|
|
559
561
|
return fieldState.invalid() && fieldState.touched();
|
|
560
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
562
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
561
563
|
/** Whether the field has a required validator */
|
|
562
564
|
ariaRequired = computed(() => {
|
|
563
565
|
return this.field()().required?.() === true ? true : null;
|
|
564
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
566
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
565
567
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
566
568
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
567
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
568
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
569
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicInputFieldComponent, isStandalone: true, selector: "df-ion-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
569
571
|
@let f = field();
|
|
570
572
|
@let inputId = key() + '-input';
|
|
571
573
|
|
|
@@ -591,9 +593,9 @@ class IonicInputFieldComponent {
|
|
|
591
593
|
@if (errorsToDisplay()[0]; as error) {
|
|
592
594
|
<ion-note color="danger" class="df-ion-error" [id]="errorId()" role="alert">{{ error.message }}</ion-note>
|
|
593
595
|
}
|
|
594
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
595
597
|
}
|
|
596
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicInputFieldComponent, decorators: [{
|
|
597
599
|
type: Component,
|
|
598
600
|
args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
599
601
|
@let f = field();
|
|
@@ -636,42 +638,42 @@ var ionicInput_component = /*#__PURE__*/Object.freeze({
|
|
|
636
638
|
|
|
637
639
|
class IonicMultiCheckboxFieldComponent {
|
|
638
640
|
elementRef = inject((ElementRef));
|
|
639
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
640
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
641
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
642
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
643
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
644
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
645
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
646
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
647
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
648
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
649
|
-
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 */ []));
|
|
650
652
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
651
653
|
showErrors = shouldShowErrors(this.field);
|
|
652
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
654
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
653
655
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
654
656
|
// Accessibility
|
|
655
657
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
656
658
|
/** Base ID for error elements */
|
|
657
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
659
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
658
660
|
/** Unique ID for the helper text element */
|
|
659
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
661
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
660
662
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
661
663
|
ariaInvalid = computed(() => {
|
|
662
664
|
const fieldState = this.field()();
|
|
663
665
|
return fieldState.invalid() && fieldState.touched();
|
|
664
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
666
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
665
667
|
/** Whether the field has a required validator */
|
|
666
668
|
ariaRequired = computed(() => {
|
|
667
669
|
return this.field()().required?.() === true ? true : null;
|
|
668
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
670
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
669
671
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
670
672
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
671
673
|
valueViewModel = linkedSignal(() => {
|
|
672
674
|
const currentValues = this.field()().value();
|
|
673
675
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
674
|
-
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : {}), equal: isEqual });
|
|
676
|
+
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
|
|
675
677
|
/** Computed map of checked option values for O(1) lookup in template */
|
|
676
678
|
checkedValuesMap = computed(() => {
|
|
677
679
|
const map = {};
|
|
@@ -679,7 +681,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
679
681
|
map[String(opt.value)] = true;
|
|
680
682
|
}
|
|
681
683
|
return map;
|
|
682
|
-
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : []));
|
|
684
|
+
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
|
|
683
685
|
constructor() {
|
|
684
686
|
// Shadow DOM - apply meta to ion-checkbox elements, re-apply when options change
|
|
685
687
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -711,8 +713,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
711
713
|
}
|
|
712
714
|
});
|
|
713
715
|
}
|
|
714
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
716
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
717
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ion-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
716
718
|
@let f = field();
|
|
717
719
|
@let checked = checkedValuesMap();
|
|
718
720
|
@if (label(); as label) {
|
|
@@ -751,7 +753,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
751
753
|
}
|
|
752
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 });
|
|
753
755
|
}
|
|
754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
|
|
755
757
|
type: Component,
|
|
756
758
|
args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe], template: `
|
|
757
759
|
@let f = field();
|
|
@@ -805,21 +807,21 @@ var ionicMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
805
807
|
|
|
806
808
|
class IonicRadioFieldComponent {
|
|
807
809
|
elementRef = inject((ElementRef));
|
|
808
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
809
|
-
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 */ []));
|
|
810
812
|
// Properties
|
|
811
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
812
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
813
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
814
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
815
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
816
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
817
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
818
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
819
|
-
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 */ []));
|
|
820
822
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
821
823
|
showErrors = shouldShowErrors(this.field);
|
|
822
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
824
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
823
825
|
defaultCompare = Object.is;
|
|
824
826
|
constructor() {
|
|
825
827
|
// Shadow DOM - apply meta to ion-radio elements, re-apply when options change
|
|
@@ -832,22 +834,22 @@ class IonicRadioFieldComponent {
|
|
|
832
834
|
// Accessibility
|
|
833
835
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
834
836
|
/** Base ID for error elements */
|
|
835
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
837
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
836
838
|
/** Unique ID for the helper text element */
|
|
837
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
839
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
838
840
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
839
841
|
ariaInvalid = computed(() => {
|
|
840
842
|
const fieldState = this.field()();
|
|
841
843
|
return fieldState.invalid() && fieldState.touched();
|
|
842
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
844
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
843
845
|
/** Whether the field has a required validator */
|
|
844
846
|
ariaRequired = computed(() => {
|
|
845
847
|
return this.field()().required?.() === true ? true : null;
|
|
846
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
848
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
847
849
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
848
850
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
849
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ion-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
851
853
|
@let f = field();
|
|
852
854
|
@let radioGroupId = key() + '-radio-group';
|
|
853
855
|
@if (label(); as label) {
|
|
@@ -882,9 +884,9 @@ class IonicRadioFieldComponent {
|
|
|
882
884
|
} @else if (props()?.hint; as hint) {
|
|
883
885
|
<ion-note class="df-ion-hint" [id]="hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
884
886
|
}
|
|
885
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"], dependencies: [{ kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
886
888
|
}
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
|
|
888
890
|
type: Component,
|
|
889
891
|
args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
890
892
|
@let f = field();
|
|
@@ -936,44 +938,44 @@ var ionicRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
936
938
|
|
|
937
939
|
class IonicSelectFieldComponent {
|
|
938
940
|
elementRef = inject((ElementRef));
|
|
939
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
940
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
941
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
942
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
943
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
944
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
945
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
946
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
947
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
948
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
949
|
-
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 */ []));
|
|
950
952
|
constructor() {
|
|
951
953
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'ion-select' });
|
|
952
954
|
}
|
|
953
955
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
954
956
|
showErrors = shouldShowErrors(this.field);
|
|
955
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
957
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
956
958
|
defaultCompare = Object.is;
|
|
957
959
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
958
960
|
// Accessibility
|
|
959
961
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
960
962
|
/** Base ID for error elements */
|
|
961
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
963
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
962
964
|
/** Unique ID for the helper text element */
|
|
963
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
965
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
964
966
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
965
967
|
ariaInvalid = computed(() => {
|
|
966
968
|
const fieldState = this.field()();
|
|
967
969
|
return fieldState.invalid() && fieldState.touched();
|
|
968
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
970
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
969
971
|
/** Whether the field has a required validator */
|
|
970
972
|
ariaRequired = computed(() => {
|
|
971
973
|
return this.field()().required?.() === true ? true : null;
|
|
972
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
974
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
973
975
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
974
976
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
975
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
976
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
977
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
978
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicSelectFieldComponent, isStandalone: true, selector: "df-ion-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
977
979
|
@let f = field();
|
|
978
980
|
@let selectId = key() + '-select';
|
|
979
981
|
|
|
@@ -1008,9 +1010,9 @@ class IonicSelectFieldComponent {
|
|
|
1008
1010
|
} @else if (props()?.hint; as hint) {
|
|
1009
1011
|
<ion-note class="df-ion-hint" [id]="hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
1010
1012
|
}
|
|
1011
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
1012
1014
|
}
|
|
1013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicSelectFieldComponent, decorators: [{
|
|
1014
1016
|
type: Component,
|
|
1015
1017
|
args: [{ selector: 'df-ion-select', imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1016
1018
|
@let f = field();
|
|
@@ -1062,43 +1064,43 @@ var ionicSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1062
1064
|
|
|
1063
1065
|
class IonicSliderFieldComponent {
|
|
1064
1066
|
elementRef = inject((ElementRef));
|
|
1065
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1066
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1067
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1068
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1069
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1070
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1071
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1072
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1073
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1074
|
-
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 */ []));
|
|
1075
1077
|
constructor() {
|
|
1076
1078
|
setupMetaTracking(this.elementRef, this.meta);
|
|
1077
1079
|
}
|
|
1078
1080
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1079
1081
|
showErrors = shouldShowErrors(this.field);
|
|
1080
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1082
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1081
1083
|
defaultPinFormatter = (value) => String(value);
|
|
1082
1084
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1083
1085
|
// Accessibility
|
|
1084
1086
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1085
1087
|
/** Base ID for error elements */
|
|
1086
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1088
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1087
1089
|
/** Unique ID for the helper text element */
|
|
1088
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1090
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1089
1091
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1090
1092
|
ariaInvalid = computed(() => {
|
|
1091
1093
|
const fieldState = this.field()();
|
|
1092
1094
|
return fieldState.invalid() && fieldState.touched();
|
|
1093
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1095
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1094
1096
|
/** Whether the field has a required validator */
|
|
1095
1097
|
ariaRequired = computed(() => {
|
|
1096
1098
|
return this.field()().required?.() === true ? true : null;
|
|
1097
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1099
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1098
1100
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1099
1101
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1102
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicSliderFieldComponent, isStandalone: true, selector: "df-ion-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1102
1104
|
@let f = field();
|
|
1103
1105
|
@let inputId = key() + '-input';
|
|
1104
1106
|
|
|
@@ -1127,9 +1129,9 @@ class IonicSliderFieldComponent {
|
|
|
1127
1129
|
} @else if (props()?.hint; as hint) {
|
|
1128
1130
|
<ion-note class="df-ion-hint" [id]="hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
1129
1131
|
}
|
|
1130
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "label", "labelPlacement", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
1131
1133
|
}
|
|
1132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicSliderFieldComponent, decorators: [{
|
|
1133
1135
|
type: Component,
|
|
1134
1136
|
args: [{ selector: 'df-ion-slider', imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1135
1137
|
@let f = field();
|
|
@@ -1175,39 +1177,39 @@ var ionicSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1175
1177
|
|
|
1176
1178
|
class IonicTextareaFieldComponent {
|
|
1177
1179
|
elementRef = inject((ElementRef));
|
|
1178
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1179
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1180
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1181
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1182
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1183
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1184
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1185
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1186
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1187
|
-
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 */ []));
|
|
1188
1190
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1189
1191
|
showErrors = shouldShowErrors(this.field);
|
|
1190
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1192
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1191
1193
|
constructor() {
|
|
1192
1194
|
// Shadow DOM - apply meta to ion-textarea element
|
|
1193
1195
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
1194
1196
|
selector: 'ion-textarea',
|
|
1195
1197
|
});
|
|
1196
|
-
//
|
|
1197
|
-
//
|
|
1198
|
-
// after a microtask to ensure Ionic has
|
|
1198
|
+
// ion-textarea encapsulates a native <textarea> in shadow DOM and does not automatically
|
|
1199
|
+
// propagate aria-describedby to it. This effect imperatively syncs the attribute
|
|
1200
|
+
// after a microtask to ensure Ionic has resolved the internal element.
|
|
1199
1201
|
explicitEffect([this.ariaDescribedBy], ([describedBy]) => {
|
|
1200
1202
|
queueMicrotask(() => {
|
|
1201
1203
|
const ionTextarea = this.elementRef.nativeElement.querySelector('ion-textarea');
|
|
1202
1204
|
if (ionTextarea?.getInputElement) {
|
|
1203
1205
|
ionTextarea.getInputElement().then((textareaEl) => {
|
|
1204
|
-
if (textareaEl)
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1206
|
+
if (!textareaEl)
|
|
1207
|
+
return;
|
|
1208
|
+
if (describedBy) {
|
|
1209
|
+
textareaEl.setAttribute('aria-describedby', describedBy);
|
|
1210
|
+
}
|
|
1211
|
+
else {
|
|
1212
|
+
textareaEl.removeAttribute('aria-describedby');
|
|
1211
1213
|
}
|
|
1212
1214
|
});
|
|
1213
1215
|
}
|
|
@@ -1218,22 +1220,22 @@ class IonicTextareaFieldComponent {
|
|
|
1218
1220
|
// Accessibility
|
|
1219
1221
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1220
1222
|
/** Base ID for error elements */
|
|
1221
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1223
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1222
1224
|
/** Unique ID for the helper text element */
|
|
1223
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1225
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1224
1226
|
/** Whether the field is currently in an invalid state (invalid AND touched) */
|
|
1225
1227
|
ariaInvalid = computed(() => {
|
|
1226
1228
|
const fieldState = this.field()();
|
|
1227
1229
|
return fieldState.invalid() && fieldState.touched();
|
|
1228
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1230
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1229
1231
|
/** Whether the field has a required validator */
|
|
1230
1232
|
ariaRequired = computed(() => {
|
|
1231
1233
|
return this.field()().required?.() === true ? true : null;
|
|
1232
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1234
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1233
1235
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1234
1236
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1237
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1238
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicTextareaFieldComponent, isStandalone: true, selector: "df-ion-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1237
1239
|
@let f = field();
|
|
1238
1240
|
@let textareaId = key() + '-textarea';
|
|
1239
1241
|
|
|
@@ -1259,9 +1261,9 @@ class IonicTextareaFieldComponent {
|
|
|
1259
1261
|
@if (errorsToDisplay()[0]; as error) {
|
|
1260
1262
|
<ion-note color="danger" class="df-ion-error" [id]="errorId()" role="alert">{{ error.message }}</ion-note>
|
|
1261
1263
|
}
|
|
1262
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
1263
1265
|
}
|
|
1264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicTextareaFieldComponent, decorators: [{
|
|
1265
1267
|
type: Component,
|
|
1266
1268
|
args: [{ selector: 'df-ion-textarea', imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1267
1269
|
@let f = field();
|
|
@@ -1315,27 +1317,27 @@ class IonicToggleControlComponent {
|
|
|
1315
1317
|
// FormCheckboxControl implementation
|
|
1316
1318
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1317
1319
|
/** The checked state - required by FormCheckboxControl */
|
|
1318
|
-
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1320
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
1319
1321
|
/** Tracks whether the field has been touched - used by Field directive */
|
|
1320
|
-
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
1322
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1321
1323
|
/** Whether the field is disabled */
|
|
1322
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1324
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1323
1325
|
/** Whether the field is readonly */
|
|
1324
|
-
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1326
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1325
1327
|
/** Whether the field is invalid (from Field directive) */
|
|
1326
|
-
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
1328
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
1327
1329
|
/** Whether the field is required (from Field directive) */
|
|
1328
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1330
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1329
1331
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1330
1332
|
// Ionic-specific props
|
|
1331
1333
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1332
|
-
labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
|
|
1333
|
-
justify = input(undefined, ...(ngDevMode ? [{ debugName: "justify" }] : []));
|
|
1334
|
-
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1335
|
-
enableOnOffLabels = input(false, ...(ngDevMode ? [{ debugName: "enableOnOffLabels" }] : []));
|
|
1336
|
-
tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
|
|
1337
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1338
|
-
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 */ []));
|
|
1339
1341
|
constructor() {
|
|
1340
1342
|
// Shadow DOM - apply meta to ion-toggle element
|
|
1341
1343
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -1348,26 +1350,26 @@ class IonicToggleControlComponent {
|
|
|
1348
1350
|
/** aria-invalid: true when field is invalid AND touched */
|
|
1349
1351
|
ariaInvalid = computed(() => {
|
|
1350
1352
|
return this.invalid() && this.touched();
|
|
1351
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1353
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1352
1354
|
/** aria-required: true if field is required, null otherwise */
|
|
1353
1355
|
ariaRequired = computed(() => {
|
|
1354
1356
|
return this.required() ? true : null;
|
|
1355
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1357
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1356
1358
|
/** aria-readonly: true if field is readonly, null otherwise */
|
|
1357
1359
|
ariaReadonly = computed(() => {
|
|
1358
1360
|
return this.readonly() ? true : null;
|
|
1359
|
-
}, ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : []));
|
|
1361
|
+
}, ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : /* istanbul ignore next */ []));
|
|
1360
1362
|
/** Computed checked state - ensures proper boolean conversion for ion-toggle */
|
|
1361
1363
|
isChecked = computed(() => {
|
|
1362
1364
|
return this.checked() === true;
|
|
1363
|
-
}, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
|
|
1365
|
+
}, ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
|
|
1364
1366
|
/**
|
|
1365
1367
|
* ion-toggle doesn't have a native readonly attribute.
|
|
1366
1368
|
* When readonly, we disable the toggle to prevent changes while maintaining the visual state.
|
|
1367
1369
|
*/
|
|
1368
1370
|
isEffectivelyDisabled = computed(() => {
|
|
1369
1371
|
return this.disabled() || this.readonly();
|
|
1370
|
-
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : []));
|
|
1372
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
1371
1373
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1372
1374
|
// Event Handlers
|
|
1373
1375
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -1379,8 +1381,8 @@ class IonicToggleControlComponent {
|
|
|
1379
1381
|
onBlur() {
|
|
1380
1382
|
this.touched.set(true);
|
|
1381
1383
|
}
|
|
1382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
1384
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1385
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: IonicToggleControlComponent, isStandalone: true, selector: "df-ion-toggle-control", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, enableOnOffLabels: { classPropertyName: "enableOnOffLabels", publicName: "enableOnOffLabels", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
|
|
1384
1386
|
<ion-toggle
|
|
1385
1387
|
[checked]="isChecked()"
|
|
1386
1388
|
(ionChange)="onToggleChange($event)"
|
|
@@ -1400,7 +1402,7 @@ class IonicToggleControlComponent {
|
|
|
1400
1402
|
</ion-toggle>
|
|
1401
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 });
|
|
1402
1404
|
}
|
|
1403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
|
|
1404
1406
|
type: Component,
|
|
1405
1407
|
args: [{ selector: 'df-ion-toggle-control', imports: [IonToggle], template: `
|
|
1406
1408
|
<ion-toggle
|
|
@@ -1427,34 +1429,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
1427
1429
|
|
|
1428
1430
|
class IonicToggleFieldComponent {
|
|
1429
1431
|
elementRef = inject((ElementRef));
|
|
1430
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1431
|
-
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 */ []));
|
|
1432
1434
|
// Properties
|
|
1433
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1434
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1435
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1436
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1437
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1438
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1439
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1440
|
-
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 */ []));
|
|
1441
1443
|
constructor() {
|
|
1442
1444
|
setupMetaTracking(this.elementRef, this.meta);
|
|
1443
1445
|
}
|
|
1444
1446
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1445
1447
|
showErrors = shouldShowErrors(this.field);
|
|
1446
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1448
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1447
1449
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1448
1450
|
// Accessibility
|
|
1449
1451
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1450
1452
|
/** Base ID for error elements */
|
|
1451
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1453
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1452
1454
|
/** Unique ID for the helper text element */
|
|
1453
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1455
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1454
1456
|
/** aria-describedby linking to hint OR error elements (mutually exclusive) */
|
|
1455
1457
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1458
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IonicToggleFieldComponent, isStandalone: true, selector: "df-ion-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1458
1460
|
@let f = field();
|
|
1459
1461
|
@let toggleId = key() + '-toggle';
|
|
1460
1462
|
|
|
@@ -1477,9 +1479,9 @@ class IonicToggleFieldComponent {
|
|
|
1477
1479
|
} @else if (props()?.hint; as hint) {
|
|
1478
1480
|
<ion-note class="df-ion-hint" [id]="hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
1479
1481
|
}
|
|
1480
|
-
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: var(--ion-color-medium, #92949c);--df-hint-font-size: .875rem;--df-error-color: var(--ion-color-danger, #eb445a);--df-error-font-size: .875rem}.df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-ion-hint{display:block;color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-ion-error{display:block;color:var(--df-error-color);font-size:var(--df-error-font-size)}:host([hidden]){display:none!important}ion-input.ng-invalid.ng-touched,ion-textarea.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-select.ng-invalid.ng-touched{--highlight-color: var(--ion-color-danger);--border-color: var(--ion-color-danger)}ion-checkbox.ng-invalid.ng-touched{--checkbox-background-checked: var(--ion-color-danger);--border-color: var(--ion-color-danger);--border-color-checked: var(--ion-color-danger)}ion-radio.ng-invalid.ng-touched{--color: var(--ion-color-danger);--color-checked: var(--ion-color-danger)}ion-range.ng-invalid.ng-touched{--bar-background: var(--ion-color-danger);--knob-background: var(--ion-color-danger)}ion-toggle.ng-invalid.ng-touched{--track-background: var(--ion-color-danger-tint);--track-background-checked: var(--ion-color-danger);--handle-background-checked: var(--ion-color-danger-contrast)}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonicToggleControlComponent, selector: "df-ion-toggle-control", inputs: ["checked", "touched", "disabled", "readonly", "invalid", "required", "labelPlacement", "justify", "color", "enableOnOffLabels", "tabIndex", "meta", "ariaDescribedBy"], outputs: ["checkedChange", "touchedChange"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
1481
1483
|
}
|
|
1482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IonicToggleFieldComponent, decorators: [{
|
|
1483
1485
|
type: Component,
|
|
1484
1486
|
args: [{ selector: 'df-ion-toggle', imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe], template: `
|
|
1485
1487
|
@let f = field();
|
|
@@ -1617,16 +1619,19 @@ const IONIC_FIELD_TYPES = [
|
|
|
1617
1619
|
loadComponent: () => Promise.resolve().then(function () { return ionicInput_component; }),
|
|
1618
1620
|
mapper: valueFieldMapper,
|
|
1619
1621
|
propsToMeta: ['type'],
|
|
1622
|
+
scope: ['text-input', 'numeric'],
|
|
1620
1623
|
},
|
|
1621
1624
|
{
|
|
1622
1625
|
name: IonicField.Select,
|
|
1623
1626
|
loadComponent: () => Promise.resolve().then(function () { return ionicSelect_component; }),
|
|
1624
1627
|
mapper: optionsFieldMapper,
|
|
1628
|
+
scope: 'single-select',
|
|
1625
1629
|
},
|
|
1626
1630
|
{
|
|
1627
1631
|
name: IonicField.Checkbox,
|
|
1628
1632
|
loadComponent: () => Promise.resolve().then(function () { return ionicCheckbox_component; }),
|
|
1629
1633
|
mapper: checkboxFieldMapper,
|
|
1634
|
+
scope: 'boolean',
|
|
1630
1635
|
},
|
|
1631
1636
|
{
|
|
1632
1637
|
name: IonicField.Button,
|
|
@@ -1693,31 +1698,37 @@ const IONIC_FIELD_TYPES = [
|
|
|
1693
1698
|
loadComponent: () => Promise.resolve().then(function () { return ionicTextarea_component; }),
|
|
1694
1699
|
mapper: valueFieldMapper,
|
|
1695
1700
|
propsToMeta: ['rows'],
|
|
1701
|
+
scope: 'text-input',
|
|
1696
1702
|
},
|
|
1697
1703
|
{
|
|
1698
1704
|
name: IonicField.Radio,
|
|
1699
1705
|
loadComponent: () => Promise.resolve().then(function () { return ionicRadio_component; }),
|
|
1700
1706
|
mapper: optionsFieldMapper,
|
|
1707
|
+
scope: 'single-select',
|
|
1701
1708
|
},
|
|
1702
1709
|
{
|
|
1703
1710
|
name: IonicField.MultiCheckbox,
|
|
1704
1711
|
loadComponent: () => Promise.resolve().then(function () { return ionicMultiCheckbox_component; }),
|
|
1705
1712
|
mapper: optionsFieldMapper,
|
|
1713
|
+
scope: 'multi-select',
|
|
1706
1714
|
},
|
|
1707
1715
|
{
|
|
1708
1716
|
name: IonicField.Datepicker,
|
|
1709
1717
|
loadComponent: () => Promise.resolve().then(function () { return ionicDatepicker_component; }),
|
|
1710
1718
|
mapper: datepickerFieldMapper,
|
|
1719
|
+
scope: 'date',
|
|
1711
1720
|
},
|
|
1712
1721
|
{
|
|
1713
1722
|
name: IonicField.Slider,
|
|
1714
1723
|
loadComponent: () => Promise.resolve().then(function () { return ionicSlider_component; }),
|
|
1715
1724
|
mapper: valueFieldMapper,
|
|
1725
|
+
scope: 'numeric',
|
|
1716
1726
|
},
|
|
1717
1727
|
{
|
|
1718
1728
|
name: IonicField.Toggle,
|
|
1719
1729
|
loadComponent: () => Promise.resolve().then(function () { return ionicToggle_component; }),
|
|
1720
1730
|
mapper: checkboxFieldMapper,
|
|
1731
|
+
scope: 'boolean',
|
|
1721
1732
|
},
|
|
1722
1733
|
];
|
|
1723
1734
|
|