@ng-forge/dynamic-forms-ionic 0.10.0-next.4 → 1.0.0-rc.2
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.
|
@@ -3,24 +3,27 @@ import { input, computed, ChangeDetectionStrategy, Component, signal, inject, In
|
|
|
3
3
|
import { IonButton, IonCheckbox, IonNote, IonInput, IonModal, IonDatetime, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonIcon, IonSpinner, IonItem, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonRange, IonTextarea, IonToggle } from '@ionic/angular/standalone';
|
|
4
4
|
import { AsyncPipe } from '@angular/common';
|
|
5
5
|
import * as i1 from '@ng-forge/dynamic-forms/integration';
|
|
6
|
-
import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost, injectNgForgeField, NgForgeControl, NgForgeFieldHost, runPresetAction, injectNgForgeAddonAction, resolveDynamicValue, NgForgeAddonAction, injectNgForgeAddons, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, NgForgeHostControl, DEFAULT_PROPS, ARRAY_CONTEXT, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper,
|
|
6
|
+
import { injectNgForgeAction, DynamicTextPipe, NgForgeActionHost, injectNgForgeField, NgForgeControl, NgForgeFieldHost, runPresetAction, injectNgForgeAddonAction, resolveDynamicValue, NgForgeAddonAction, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, NgForgeHostControl, DEFAULT_PROPS, ARRAY_CONTEXT, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS } from '@ng-forge/dynamic-forms/integration';
|
|
7
7
|
import { FormField } from '@angular/forms/signals';
|
|
8
8
|
import { format } from 'date-fns';
|
|
9
|
-
import {
|
|
9
|
+
import { DynamicFormLogger, DynamicFormError } from '@ng-forge/dynamic-forms';
|
|
10
10
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
11
11
|
|
|
12
12
|
class IonicButtonFieldComponent {
|
|
13
13
|
action = injectNgForgeAction();
|
|
14
|
-
props = input(
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
props = input(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
16
|
+
buttonType = computed(() => this.props()?.type ?? 'button', /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
|
|
18
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
|
|
17
20
|
onClick() {
|
|
18
21
|
if (this.buttonType() === 'submit')
|
|
19
22
|
return;
|
|
20
23
|
this.action.dispatch();
|
|
21
24
|
}
|
|
22
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
23
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
25
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: IonicButtonFieldComponent, isStandalone: true, selector: "df-ion-button", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeActionHost }], ngImport: i0, template: `
|
|
24
27
|
@let buttonId = action.key() + '-button';
|
|
25
28
|
|
|
26
29
|
<ion-button
|
|
@@ -41,7 +44,7 @@ class IonicButtonFieldComponent {
|
|
|
41
44
|
</ion-button>
|
|
42
45
|
`, isInline: true, styles: [":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43
46
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicButtonFieldComponent, decorators: [{
|
|
45
48
|
type: Component,
|
|
46
49
|
args: [{ selector: 'df-ion-button', imports: [IonButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
|
|
47
50
|
@let buttonId = action.key() + '-button';
|
|
@@ -73,9 +76,10 @@ var ionicButton_component = /*#__PURE__*/Object.freeze({
|
|
|
73
76
|
|
|
74
77
|
class IonicCheckboxFieldComponent {
|
|
75
78
|
ngf = injectNgForgeField();
|
|
76
|
-
props = input(
|
|
77
|
-
|
|
78
|
-
static
|
|
79
|
+
props = input(/* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
81
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicCheckboxFieldComponent, isStandalone: true, selector: "df-ion-checkbox", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
79
83
|
@let f = ngf.field();
|
|
80
84
|
@let checkboxId = ngf.key() + '-checkbox';
|
|
81
85
|
|
|
@@ -99,7 +103,7 @@ class IonicCheckboxFieldComponent {
|
|
|
99
103
|
}
|
|
100
104
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
101
105
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicCheckboxFieldComponent, decorators: [{
|
|
103
107
|
type: Component,
|
|
104
108
|
args: [{ selector: 'df-ion-checkbox', imports: [IonCheckbox, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
105
109
|
@let f = ngf.field();
|
|
@@ -133,11 +137,16 @@ var ionicCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
133
137
|
|
|
134
138
|
class IonicDatepickerFieldComponent {
|
|
135
139
|
ngf = injectNgForgeField();
|
|
136
|
-
minDate = input(null,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
140
|
+
minDate = input(null, /* @ts-ignore */
|
|
141
|
+
...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
142
|
+
maxDate = input(null, /* @ts-ignore */
|
|
143
|
+
...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
144
|
+
startAt = input(null, /* @ts-ignore */
|
|
145
|
+
...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
146
|
+
props = input(/* @ts-ignore */
|
|
147
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
148
|
+
isModalOpen = signal(false, /* @ts-ignore */
|
|
149
|
+
...(ngDevMode ? [{ debugName: "isModalOpen" }] : /* istanbul ignore next */ []));
|
|
141
150
|
openModal() {
|
|
142
151
|
this.isModalOpen.set(true);
|
|
143
152
|
}
|
|
@@ -182,8 +191,8 @@ class IonicDatepickerFieldComponent {
|
|
|
182
191
|
return format(date, 'MMM d, yyyy');
|
|
183
192
|
}
|
|
184
193
|
}
|
|
185
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
186
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
194
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicDatepickerFieldComponent, isStandalone: true, selector: "df-ion-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
187
196
|
@let f = ngf.field();
|
|
188
197
|
@let dateValue = f().value();
|
|
189
198
|
@let inputId = ngf.key() + '-input';
|
|
@@ -238,7 +247,7 @@ class IonicDatepickerFieldComponent {
|
|
|
238
247
|
</ion-modal>
|
|
239
248
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", "ion-input{cursor:pointer}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
240
249
|
}
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicDatepickerFieldComponent, decorators: [{
|
|
242
251
|
type: Component,
|
|
243
252
|
args: [{ selector: 'df-ion-datepicker', imports: [
|
|
244
253
|
IonInput,
|
|
@@ -323,14 +332,22 @@ class IonInlineButtonAddonComponent {
|
|
|
323
332
|
injector = inject(Injector);
|
|
324
333
|
action = injectNgForgeAddonAction();
|
|
325
334
|
addon = this.action.addon;
|
|
326
|
-
label = computed(() => this.addon().label,
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
335
|
+
label = computed(() => this.addon().label, /* @ts-ignore */
|
|
336
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
337
|
+
ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
|
|
338
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
339
|
+
icon = computed(() => this.addon().icon, /* @ts-ignore */
|
|
340
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
341
|
+
color = computed(() => this.addon().color, /* @ts-ignore */
|
|
342
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
343
|
+
fill = computed(() => this.addon().fill ?? 'clear', /* @ts-ignore */
|
|
344
|
+
...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
345
|
+
iconOnly = computed(() => !!this.icon() && !this.label(), /* @ts-ignore */
|
|
346
|
+
...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
347
|
+
_ariaLabelSignal = signal(undefined, /* @ts-ignore */
|
|
348
|
+
...(ngDevMode ? [{ debugName: "_ariaLabelSignal" }] : /* istanbul ignore next */ []));
|
|
349
|
+
resolvedAriaLabel = computed(() => this._ariaLabelSignal()?.() ?? undefined, /* @ts-ignore */
|
|
350
|
+
...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
334
351
|
constructor() {
|
|
335
352
|
explicitEffect([this.ariaLabel], ([raw]) => {
|
|
336
353
|
if (raw === undefined) {
|
|
@@ -340,8 +357,8 @@ class IonInlineButtonAddonComponent {
|
|
|
340
357
|
this._ariaLabelSignal.set(resolveDynamicValue(raw, undefined, this.injector));
|
|
341
358
|
});
|
|
342
359
|
}
|
|
343
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
344
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
360
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonInlineButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonInlineButtonAddonComponent, isStandalone: true, selector: "ion-button[df-ion-button-addon]", host: { listeners: { "click": "action.dispatch()" }, properties: { "attr.color": "color() ?? null", "attr.fill": "fill()", "attr.disabled": "action.disabled() || action.loading() ? \"true\" : null", "attr.aria-label": "resolvedAriaLabel() ?? null", "attr.aria-busy": "action.loading() || null" } }, hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
|
|
345
362
|
@if (action.loading()) {
|
|
346
363
|
<ion-spinner [slot]="iconOnly() ? 'icon-only' : 'start'" name="dots"></ion-spinner>
|
|
347
364
|
<span class="df-ion-sr-only" role="status">Loading…</span>
|
|
@@ -353,7 +370,7 @@ class IonInlineButtonAddonComponent {
|
|
|
353
370
|
}
|
|
354
371
|
`, isInline: true, styles: [".df-ion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
355
372
|
}
|
|
356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonInlineButtonAddonComponent, decorators: [{
|
|
357
374
|
type: Component,
|
|
358
375
|
args: [{ selector: 'ion-button[df-ion-button-addon]', imports: [IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
|
|
359
376
|
@if (action.loading()) {
|
|
@@ -384,18 +401,29 @@ class IonicInputFieldComponent {
|
|
|
384
401
|
ionicConfig = inject(IONIC_CONFIG, { optional: true });
|
|
385
402
|
ngf = injectNgForgeField();
|
|
386
403
|
ngfa = injectNgForgeAddons();
|
|
387
|
-
props = input(
|
|
388
|
-
|
|
404
|
+
props = input(/* @ts-ignore */
|
|
405
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
406
|
+
fieldInputs = input(/* @ts-ignore */
|
|
407
|
+
...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
389
408
|
typeOverride = inject(IONIC_INPUT_TYPE_OVERRIDE);
|
|
390
|
-
fill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid',
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
409
|
+
fill = computed(() => this.props()?.fill ?? this.ionicConfig?.fill ?? 'solid', /* @ts-ignore */
|
|
410
|
+
...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
411
|
+
shape = computed(() => this.props()?.shape ?? this.ionicConfig?.shape, /* @ts-ignore */
|
|
412
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
413
|
+
labelPlacement = computed(() => this.props()?.labelPlacement ?? this.ionicConfig?.labelPlacement ?? 'stacked', /* @ts-ignore */
|
|
414
|
+
...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
|
|
415
|
+
color = computed(() => this.props()?.color ?? this.ionicConfig?.color, /* @ts-ignore */
|
|
416
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
417
|
+
type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', /* @ts-ignore */
|
|
418
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
419
|
+
buttonPrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.type === 'ion-button'), /* @ts-ignore */
|
|
420
|
+
...(ngDevMode ? [{ debugName: "buttonPrefixAddons" }] : /* istanbul ignore next */ []));
|
|
421
|
+
buttonSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.type === 'ion-button'), /* @ts-ignore */
|
|
422
|
+
...(ngDevMode ? [{ debugName: "buttonSuffixAddons" }] : /* istanbul ignore next */ []));
|
|
423
|
+
decorativePrefixAddons = computed(() => this.ngfa.prefixAddons().filter((a) => a.type !== 'ion-button'), /* @ts-ignore */
|
|
424
|
+
...(ngDevMode ? [{ debugName: "decorativePrefixAddons" }] : /* istanbul ignore next */ []));
|
|
425
|
+
decorativeSuffixAddons = computed(() => this.ngfa.suffixAddons().filter((a) => a.type !== 'ion-button'), /* @ts-ignore */
|
|
426
|
+
...(ngDevMode ? [{ debugName: "decorativeSuffixAddons" }] : /* istanbul ignore next */ []));
|
|
399
427
|
destroyed = false;
|
|
400
428
|
constructor() {
|
|
401
429
|
inject(DestroyRef).onDestroy(() => (this.destroyed = true));
|
|
@@ -419,8 +447,8 @@ class IonicInputFieldComponent {
|
|
|
419
447
|
});
|
|
420
448
|
});
|
|
421
449
|
}
|
|
422
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
423
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
450
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicInputFieldComponent, isStandalone: true, selector: "df-ion-input", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
424
452
|
{
|
|
425
453
|
provide: IONIC_INPUT_TYPE_OVERRIDE,
|
|
426
454
|
useFactory: () => signal(undefined),
|
|
@@ -491,7 +519,7 @@ class IonicInputFieldComponent {
|
|
|
491
519
|
}
|
|
492
520
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}:host{--df-ion-addon-prefix-outer-padding: 0;--df-ion-addon-prefix-inner-padding: .5rem;--df-ion-addon-suffix-inner-padding: .5rem;--df-ion-addon-suffix-outer-padding: 0}:host ::ng-deep ion-input [slot=start],:host ::ng-deep ion-input [slot=end]{display:inline-flex;align-items:center;align-self:center;line-height:1}:host ::ng-deep ion-input [slot=start] df-addon-slot,:host ::ng-deep ion-input [slot=end] df-addon-slot,:host ::ng-deep ion-input [slot=start] df-ion-icon-addon,:host ::ng-deep ion-input [slot=end] df-ion-icon-addon{display:inline-flex;align-items:center;line-height:1}:host ::ng-deep ion-input [slot=start]{padding-inline-start:var(--df-ion-addon-prefix-outer-padding);padding-inline-end:var(--df-ion-addon-prefix-inner-padding)}:host ::ng-deep ion-input [slot=end]{padding-inline-start:var(--df-ion-addon-suffix-inner-padding);padding-inline-end:var(--df-ion-addon-suffix-outer-padding)}:host ::ng-deep ion-input ion-icon{color:inherit}\n"], dependencies: [{ kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "component", type: IonInlineButtonAddonComponent, selector: "ion-button[df-ion-button-addon]" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
493
521
|
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicInputFieldComponent, decorators: [{
|
|
495
523
|
type: Component,
|
|
496
524
|
args: [{ selector: 'df-ion-input', imports: [IonInput, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl, DfAddonSlot, IonInlineButtonAddonComponent], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
|
|
497
525
|
@let f = ngf.field();
|
|
@@ -572,8 +600,10 @@ var ionicInput_component = /*#__PURE__*/Object.freeze({
|
|
|
572
600
|
|
|
573
601
|
class IonicMultiCheckboxFieldComponent {
|
|
574
602
|
ngf = injectNgForgeField();
|
|
575
|
-
options = input([],
|
|
576
|
-
|
|
603
|
+
options = input([], /* @ts-ignore */
|
|
604
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
605
|
+
props = input(/* @ts-ignore */
|
|
606
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
577
607
|
valueViewModel = linkedSignal(() => {
|
|
578
608
|
const currentValues = this.ngf.field()().value();
|
|
579
609
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
@@ -584,7 +614,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
584
614
|
map[String(opt.value)] = true;
|
|
585
615
|
}
|
|
586
616
|
return map;
|
|
587
|
-
},
|
|
617
|
+
}, /* @ts-ignore */
|
|
618
|
+
...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
|
|
588
619
|
constructor() {
|
|
589
620
|
explicitEffect([this.valueViewModel], ([selectedOptions]) => {
|
|
590
621
|
const selectedValues = selectedOptions.map((option) => option.value);
|
|
@@ -611,8 +642,8 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
611
642
|
}
|
|
612
643
|
});
|
|
613
644
|
}
|
|
614
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
645
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
646
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ion-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
616
647
|
@let f = ngf.field();
|
|
617
648
|
@let checked = checkedValuesMap();
|
|
618
649
|
@if (ngf.label(); as label) {
|
|
@@ -652,7 +683,7 @@ class IonicMultiCheckboxFieldComponent {
|
|
|
652
683
|
}
|
|
653
684
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
654
685
|
}
|
|
655
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
686
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
|
|
656
687
|
type: Component,
|
|
657
688
|
args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
658
689
|
@let f = ngf.field();
|
|
@@ -702,11 +733,13 @@ var ionicMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
702
733
|
|
|
703
734
|
class IonicRadioFieldComponent {
|
|
704
735
|
ngf = injectNgForgeField();
|
|
705
|
-
options = input([],
|
|
706
|
-
|
|
736
|
+
options = input([], /* @ts-ignore */
|
|
737
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
738
|
+
props = input(/* @ts-ignore */
|
|
739
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
707
740
|
defaultCompare = Object.is;
|
|
708
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
709
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
741
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
742
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ion-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
710
743
|
@let f = ngf.field();
|
|
711
744
|
@let radioGroupId = ngf.key() + '-radio-group';
|
|
712
745
|
@if (ngf.label(); as label) {
|
|
@@ -744,7 +777,7 @@ class IonicRadioFieldComponent {
|
|
|
744
777
|
}
|
|
745
778
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"], dependencies: [{ kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
746
779
|
}
|
|
747
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
780
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
|
|
748
781
|
type: Component,
|
|
749
782
|
args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
750
783
|
@let f = ngf.field();
|
|
@@ -792,11 +825,13 @@ var ionicRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
792
825
|
|
|
793
826
|
class IonicSelectFieldComponent {
|
|
794
827
|
ngf = injectNgForgeField();
|
|
795
|
-
options = input([],
|
|
796
|
-
|
|
828
|
+
options = input([], /* @ts-ignore */
|
|
829
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
830
|
+
props = input(/* @ts-ignore */
|
|
831
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
797
832
|
defaultCompare = Object.is;
|
|
798
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
833
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicSelectFieldComponent, isStandalone: true, selector: "df-ion-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
800
835
|
@let f = ngf.field();
|
|
801
836
|
@let selectId = ngf.key() + '-select';
|
|
802
837
|
|
|
@@ -831,7 +866,7 @@ class IonicSelectFieldComponent {
|
|
|
831
866
|
}
|
|
832
867
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
833
868
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicSelectFieldComponent, decorators: [{
|
|
835
870
|
type: Component,
|
|
836
871
|
args: [{ selector: 'df-ion-select', imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
837
872
|
@let f = ngf.field();
|
|
@@ -876,11 +911,13 @@ var ionicSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
876
911
|
|
|
877
912
|
class IonicSliderFieldComponent {
|
|
878
913
|
ngf = injectNgForgeField();
|
|
879
|
-
step = input(
|
|
880
|
-
|
|
914
|
+
step = input(/* @ts-ignore */
|
|
915
|
+
...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
916
|
+
props = input(/* @ts-ignore */
|
|
917
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
881
918
|
defaultPinFormatter = (value) => String(value);
|
|
882
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
883
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
919
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
920
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicSliderFieldComponent, isStandalone: true, selector: "df-ion-slider", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeHostControl }], ngImport: i0, template: `
|
|
884
921
|
@let f = ngf.field();
|
|
885
922
|
@let inputId = ngf.key() + '-input';
|
|
886
923
|
|
|
@@ -907,7 +944,7 @@ class IonicSliderFieldComponent {
|
|
|
907
944
|
}
|
|
908
945
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "label", "labelPlacement", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
909
946
|
}
|
|
910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicSliderFieldComponent, decorators: [{
|
|
911
948
|
type: Component,
|
|
912
949
|
args: [{ selector: 'df-ion-slider', imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost, NgForgeHostControl], template: `
|
|
913
950
|
@let f = ngf.field();
|
|
@@ -945,7 +982,8 @@ var ionicSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
945
982
|
class IonicTextareaFieldComponent {
|
|
946
983
|
elementRef = inject((ElementRef));
|
|
947
984
|
ngf = injectNgForgeField();
|
|
948
|
-
props = input(
|
|
985
|
+
props = input(/* @ts-ignore */
|
|
986
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
949
987
|
constructor() {
|
|
950
988
|
explicitEffect([this.ngf.ariaDescribedBy], ([describedBy]) => {
|
|
951
989
|
queueMicrotask(() => {
|
|
@@ -965,8 +1003,8 @@ class IonicTextareaFieldComponent {
|
|
|
965
1003
|
});
|
|
966
1004
|
});
|
|
967
1005
|
}
|
|
968
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
969
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1006
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1007
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicTextareaFieldComponent, isStandalone: true, selector: "df-ion-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
970
1008
|
@let f = ngf.field();
|
|
971
1009
|
@let textareaId = ngf.key() + '-textarea';
|
|
972
1010
|
|
|
@@ -994,7 +1032,7 @@ class IonicTextareaFieldComponent {
|
|
|
994
1032
|
}
|
|
995
1033
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
996
1034
|
}
|
|
997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicTextareaFieldComponent, decorators: [{
|
|
998
1036
|
type: Component,
|
|
999
1037
|
args: [{ selector: 'df-ion-textarea', imports: [IonTextarea, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
1000
1038
|
@let f = ngf.field();
|
|
@@ -1031,32 +1069,46 @@ var ionicTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
1031
1069
|
});
|
|
1032
1070
|
|
|
1033
1071
|
class IonicToggleControlComponent {
|
|
1034
|
-
checked = model(false,
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1072
|
+
checked = model(false, /* @ts-ignore */
|
|
1073
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
1074
|
+
touched = model(false, /* @ts-ignore */
|
|
1075
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1076
|
+
disabled = input(false, /* @ts-ignore */
|
|
1077
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1078
|
+
readonly = input(false, /* @ts-ignore */
|
|
1079
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1080
|
+
invalid = input(false, /* @ts-ignore */
|
|
1081
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
1082
|
+
required = input(false, /* @ts-ignore */
|
|
1083
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1084
|
+
labelPlacement = input('end', /* @ts-ignore */
|
|
1085
|
+
...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
|
|
1086
|
+
justify = input(undefined, /* @ts-ignore */
|
|
1087
|
+
...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
|
|
1088
|
+
color = input('primary', /* @ts-ignore */
|
|
1089
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1090
|
+
enableOnOffLabels = input(false, /* @ts-ignore */
|
|
1091
|
+
...(ngDevMode ? [{ debugName: "enableOnOffLabels" }] : /* istanbul ignore next */ []));
|
|
1092
|
+
tabIndex = input(undefined, /* @ts-ignore */
|
|
1093
|
+
...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1094
|
+
ariaReadonly = computed(() => (this.readonly() ? true : null), /* @ts-ignore */
|
|
1095
|
+
...(ngDevMode ? [{ debugName: "ariaReadonly" }] : /* istanbul ignore next */ []));
|
|
1046
1096
|
isChecked = computed(() => {
|
|
1047
1097
|
return this.checked() === true;
|
|
1048
|
-
},
|
|
1098
|
+
}, /* @ts-ignore */
|
|
1099
|
+
...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
|
|
1049
1100
|
isEffectivelyDisabled = computed(() => {
|
|
1050
1101
|
return this.disabled() || this.readonly();
|
|
1051
|
-
},
|
|
1102
|
+
}, /* @ts-ignore */
|
|
1103
|
+
...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
1052
1104
|
onToggleChange(event) {
|
|
1053
1105
|
this.checked.set(event.detail.checked);
|
|
1054
1106
|
}
|
|
1055
1107
|
onBlur() {
|
|
1056
1108
|
this.touched.set(true);
|
|
1057
1109
|
}
|
|
1058
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1059
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicToggleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: IonicToggleControlComponent, isStandalone: true, selector: "df-ion-toggle-control", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, enableOnOffLabels: { classPropertyName: "enableOnOffLabels", publicName: "enableOnOffLabels", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: `
|
|
1060
1112
|
<ion-toggle
|
|
1061
1113
|
ngForgeControl
|
|
1062
1114
|
[checked]="isChecked()"
|
|
@@ -1074,7 +1126,7 @@ class IonicToggleControlComponent {
|
|
|
1074
1126
|
</ion-toggle>
|
|
1075
1127
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1076
1128
|
}
|
|
1077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicToggleControlComponent, decorators: [{
|
|
1078
1130
|
type: Component,
|
|
1079
1131
|
args: [{ selector: 'df-ion-toggle-control', imports: [IonToggle, NgForgeControl], template: `
|
|
1080
1132
|
<ion-toggle
|
|
@@ -1099,9 +1151,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1099
1151
|
|
|
1100
1152
|
class IonicToggleFieldComponent {
|
|
1101
1153
|
ngf = injectNgForgeField();
|
|
1102
|
-
props = input(
|
|
1103
|
-
|
|
1104
|
-
static
|
|
1154
|
+
props = input(/* @ts-ignore */
|
|
1155
|
+
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1156
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1157
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonicToggleFieldComponent, isStandalone: true, selector: "df-ion-toggle", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
1105
1158
|
@let f = ngf.field();
|
|
1106
1159
|
@let toggleId = ngf.key() + '-toggle';
|
|
1107
1160
|
|
|
@@ -1124,7 +1177,7 @@ class IonicToggleFieldComponent {
|
|
|
1124
1177
|
}
|
|
1125
1178
|
`, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: IonicToggleControlComponent, selector: "df-ion-toggle-control", inputs: ["checked", "touched", "disabled", "readonly", "invalid", "required", "labelPlacement", "justify", "color", "enableOnOffLabels", "tabIndex"], outputs: ["checkedChange", "touchedChange"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1126
1179
|
}
|
|
1127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonicToggleFieldComponent, decorators: [{
|
|
1128
1181
|
type: Component,
|
|
1129
1182
|
args: [{ selector: 'df-ion-toggle', imports: [IonicToggleControlComponent, IonNote, FormField, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeFieldHost], template: `
|
|
1130
1183
|
@let f = ngf.field();
|
|
@@ -1368,26 +1421,26 @@ function withIonicFields(config) {
|
|
|
1368
1421
|
}
|
|
1369
1422
|
return base;
|
|
1370
1423
|
}
|
|
1371
|
-
/* -- Ionic addon
|
|
1424
|
+
/* -- Ionic addon types ------------------------------------------------- */
|
|
1372
1425
|
const ION_ICON_KIND = {
|
|
1373
|
-
|
|
1426
|
+
type: 'ion-icon',
|
|
1374
1427
|
loadComponent: () => Promise.resolve().then(function () { return ionIconAddon_component; }).then((m) => m.IonIconAddonComponent),
|
|
1375
1428
|
validate: (addon, fieldKey) => {
|
|
1376
1429
|
if (typeof addon.icon !== 'string' || addon.icon.length === 0) {
|
|
1377
|
-
throw new DynamicFormError(`Addon
|
|
1430
|
+
throw new DynamicFormError(`Addon type 'ion-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);
|
|
1378
1431
|
}
|
|
1379
1432
|
},
|
|
1380
1433
|
};
|
|
1381
1434
|
const ION_BUTTON_KIND = {
|
|
1382
|
-
|
|
1435
|
+
type: 'ion-button',
|
|
1383
1436
|
loadComponent: () => Promise.resolve().then(function () { return ionButtonAddon_component; }).then((m) => m.IonButtonAddonComponent),
|
|
1384
1437
|
validate: (addon, fieldKey) => {
|
|
1385
1438
|
const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);
|
|
1386
1439
|
if (set.length > 1) {
|
|
1387
|
-
throw new DynamicFormError(`Addon
|
|
1440
|
+
throw new DynamicFormError(`Addon type 'ion-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`);
|
|
1388
1441
|
}
|
|
1389
1442
|
if (addon.icon && !addon.label && !addon.ariaLabel) {
|
|
1390
|
-
throw new DynamicFormError(`Addon
|
|
1443
|
+
throw new DynamicFormError(`Addon type 'ion-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);
|
|
1391
1444
|
}
|
|
1392
1445
|
},
|
|
1393
1446
|
};
|
|
@@ -1395,8 +1448,8 @@ function withIonicAddons() {
|
|
|
1395
1448
|
return {
|
|
1396
1449
|
ɵkind: 'addons',
|
|
1397
1450
|
ɵproviders: [
|
|
1398
|
-
{ provide:
|
|
1399
|
-
{ provide:
|
|
1451
|
+
{ provide: ADDON_TYPE_DEFINITIONS, useValue: ION_ICON_KIND, multi: true },
|
|
1452
|
+
{ provide: ADDON_TYPE_DEFINITIONS, useValue: ION_BUTTON_KIND, multi: true },
|
|
1400
1453
|
],
|
|
1401
1454
|
};
|
|
1402
1455
|
}
|
|
@@ -1404,14 +1457,20 @@ function withIonicAddons() {
|
|
|
1404
1457
|
class IonButtonAddonComponent {
|
|
1405
1458
|
action = injectNgForgeAddonAction();
|
|
1406
1459
|
addon = this.action.addon;
|
|
1407
|
-
label = computed(() => this.addon().label,
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1460
|
+
label = computed(() => this.addon().label, /* @ts-ignore */
|
|
1461
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1462
|
+
ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
|
|
1463
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1464
|
+
icon = computed(() => this.addon().icon, /* @ts-ignore */
|
|
1465
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1466
|
+
color = computed(() => this.addon().color, /* @ts-ignore */
|
|
1467
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1468
|
+
fill = computed(() => this.addon().fill ?? 'clear', /* @ts-ignore */
|
|
1469
|
+
...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
1470
|
+
iconOnly = computed(() => !!this.icon() && !this.label(), /* @ts-ignore */
|
|
1471
|
+
...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
1472
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: IonButtonAddonComponent, isStandalone: true, selector: "df-ion-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
|
|
1415
1474
|
<ion-button
|
|
1416
1475
|
[attr.color]="color() ?? null"
|
|
1417
1476
|
[fill]="fill()"
|
|
@@ -1434,7 +1493,7 @@ class IonButtonAddonComponent {
|
|
|
1434
1493
|
}
|
|
1435
1494
|
`, isInline: true, styles: [".df-ion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1436
1495
|
}
|
|
1437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonButtonAddonComponent, decorators: [{
|
|
1438
1497
|
type: Component,
|
|
1439
1498
|
args: [{ selector: 'df-ion-button-addon', imports: [IonButton, IonIcon, IonSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
|
|
1440
1499
|
<ion-button
|
|
@@ -1466,15 +1525,20 @@ var ionButtonAddon_component = /*#__PURE__*/Object.freeze({
|
|
|
1466
1525
|
});
|
|
1467
1526
|
|
|
1468
1527
|
class IonIconAddonComponent {
|
|
1469
|
-
addon = input.required(
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1528
|
+
addon = input.required(/* @ts-ignore */
|
|
1529
|
+
...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
|
|
1530
|
+
fieldInputs = input(/* @ts-ignore */
|
|
1531
|
+
...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
1532
|
+
iconName = computed(() => this.addon().icon, /* @ts-ignore */
|
|
1533
|
+
...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
1534
|
+
ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
|
|
1535
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1536
|
+
hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, /* @ts-ignore */
|
|
1537
|
+
...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1538
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: IonIconAddonComponent, isStandalone: true, selector: "df-ion-icon-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "hasAriaLabel() ? null : \"true\"" } }, ngImport: i0, template: `<ion-icon [name]="iconName()" [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"></ion-icon>`, isInline: true, dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1476
1540
|
}
|
|
1477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonIconAddonComponent, decorators: [{
|
|
1478
1542
|
type: Component,
|
|
1479
1543
|
args: [{
|
|
1480
1544
|
selector: 'df-ion-icon-addon',
|