@ng-forge/dynamic-forms-ionic 1.3.0-next.2 → 1.3.0-next.3
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.
- package/README.md +0 -2
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-bXoq9uY6.mjs +64 -0
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-bXoq9uY6.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs +129 -34
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs +118 -35
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-button.mjs +113 -33
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-button.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs +124 -24
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs +374 -90
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs +262 -126
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs +191 -64
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs +178 -27
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs +163 -27
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-slider.mjs +144 -27
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-slider.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-textarea.mjs +157 -45
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-textarea.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-toggle.mjs +386 -75
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-toggle.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-shared.mjs +139 -62
- package/fesm2022/ng-forge-dynamic-forms-ionic-shared.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic.mjs +238 -251
- package/fesm2022/ng-forge-dynamic-forms-ionic.mjs.map +1 -1
- package/package.json +2 -3
- package/types/ng-forge-dynamic-forms-ionic-lazy-addon-button.d.ts +28 -28
- package/types/ng-forge-dynamic-forms-ionic-lazy-addon-icon.d.ts +24 -17
- package/types/ng-forge-dynamic-forms-ionic-lazy-button.d.ts +92 -86
- package/types/ng-forge-dynamic-forms-ionic-lazy-checkbox.d.ts +24 -18
- package/types/ng-forge-dynamic-forms-ionic-lazy-datepicker.d.ts +59 -34
- package/types/ng-forge-dynamic-forms-ionic-lazy-input.d.ts +69 -57
- package/types/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.d.ts +34 -23
- package/types/ng-forge-dynamic-forms-ionic-lazy-radio.d.ts +31 -20
- package/types/ng-forge-dynamic-forms-ionic-lazy-select.d.ts +37 -26
- package/types/ng-forge-dynamic-forms-ionic-lazy-slider.d.ts +53 -38
- package/types/ng-forge-dynamic-forms-ionic-lazy-textarea.d.ts +29 -23
- package/types/ng-forge-dynamic-forms-ionic-lazy-toggle.d.ts +119 -55
- package/types/ng-forge-dynamic-forms-ionic-shared.d.ts +78 -83
- package/types/ng-forge-dynamic-forms-ionic.d.ts +243 -266
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-CN0CagvT.mjs +0 -26
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-CN0CagvT.mjs.map +0 -1
|
@@ -1,69 +1,124 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import * as i1 from
|
|
5
|
-
import {
|
|
6
|
-
import { AsyncPipe } from
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, input, signal } from "@angular/core";
|
|
3
|
+
import { IonButton, IonButtons, IonContent, IonDatetime, IonHeader, IonInput, IonModal, IonNote, IonTitle, IonToolbar } from "@ionic/angular/standalone";
|
|
4
|
+
import * as i1 from "@ng-forge/dynamic-forms/integration";
|
|
5
|
+
import { DynamicTextPipe, NgForgeControl, NgForgeFieldHost, injectNgForgeField } from "@ng-forge/dynamic-forms/integration";
|
|
6
|
+
import { AsyncPipe } from "@angular/common";
|
|
7
|
+
const TIME = {
|
|
8
|
+
hour: "numeric",
|
|
9
|
+
minute: "2-digit"
|
|
10
|
+
};
|
|
11
|
+
const DATE = {
|
|
12
|
+
month: "short",
|
|
13
|
+
day: "numeric",
|
|
14
|
+
year: "numeric"
|
|
15
|
+
};
|
|
16
|
+
const DISPLAY_FORMATS = {
|
|
17
|
+
date: DATE,
|
|
18
|
+
"date-time": {
|
|
19
|
+
...DATE,
|
|
20
|
+
...TIME
|
|
21
|
+
},
|
|
22
|
+
"time-date": {
|
|
23
|
+
...DATE,
|
|
24
|
+
...TIME
|
|
25
|
+
},
|
|
26
|
+
time: TIME,
|
|
27
|
+
month: {
|
|
28
|
+
month: "long",
|
|
29
|
+
year: "numeric"
|
|
30
|
+
},
|
|
31
|
+
"month-year": {
|
|
32
|
+
month: "short",
|
|
33
|
+
year: "numeric"
|
|
34
|
+
},
|
|
35
|
+
year: { year: "numeric" }
|
|
36
|
+
};
|
|
37
|
+
var IonicDatepickerFieldComponent = class IonicDatepickerFieldComponent {
|
|
38
|
+
ngf = injectNgForgeField();
|
|
39
|
+
minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
|
|
40
|
+
maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
|
|
41
|
+
startAt = input(null, ...ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []);
|
|
42
|
+
props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
|
|
43
|
+
isModalOpen = signal(false, ...ngDevMode ? [{ debugName: "isModalOpen" }] : /* istanbul ignore next */ []);
|
|
44
|
+
locale = computed(() => {
|
|
45
|
+
const locale = this.props()?.locale;
|
|
46
|
+
try {
|
|
47
|
+
return locale ? Intl.getCanonicalLocales(locale)[0] : void 0;
|
|
48
|
+
} catch {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
}, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
|
|
52
|
+
openModal() {
|
|
53
|
+
this.isModalOpen.set(true);
|
|
54
|
+
}
|
|
55
|
+
closeModal() {
|
|
56
|
+
this.isModalOpen.set(false);
|
|
57
|
+
}
|
|
58
|
+
onDateChange(event) {
|
|
59
|
+
const value = event.detail.value;
|
|
60
|
+
if (value && typeof value === "string" && value.length > 0) {
|
|
61
|
+
const date = new Date(value);
|
|
62
|
+
this.ngf.field()().value.set(date);
|
|
63
|
+
} else this.ngf.field()().value.set(null);
|
|
64
|
+
this.closeModal();
|
|
65
|
+
}
|
|
66
|
+
dateToIsoString(date) {
|
|
67
|
+
if (!date) return void 0;
|
|
68
|
+
return date.toISOString();
|
|
69
|
+
}
|
|
70
|
+
formatDisplayDate(date) {
|
|
71
|
+
if (!date) return "";
|
|
72
|
+
const options = DISPLAY_FORMATS[this.props()?.presentation ?? "date"];
|
|
73
|
+
return new Intl.DateTimeFormat(this.locale(), options).format(date);
|
|
74
|
+
}
|
|
75
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
76
|
+
minVersion: "12.0.0",
|
|
77
|
+
version: "22.2.5",
|
|
78
|
+
ngImport: i0,
|
|
79
|
+
type: IonicDatepickerFieldComponent,
|
|
80
|
+
deps: [],
|
|
81
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
82
|
+
});
|
|
83
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
84
|
+
minVersion: "17.0.0",
|
|
85
|
+
version: "22.2.5",
|
|
86
|
+
type: IonicDatepickerFieldComponent,
|
|
87
|
+
isStandalone: true,
|
|
88
|
+
selector: "df-ion-datepicker",
|
|
89
|
+
inputs: {
|
|
90
|
+
minDate: {
|
|
91
|
+
classPropertyName: "minDate",
|
|
92
|
+
publicName: "minDate",
|
|
93
|
+
isSignal: true,
|
|
94
|
+
isRequired: false,
|
|
95
|
+
transformFunction: null
|
|
96
|
+
},
|
|
97
|
+
maxDate: {
|
|
98
|
+
classPropertyName: "maxDate",
|
|
99
|
+
publicName: "maxDate",
|
|
100
|
+
isSignal: true,
|
|
101
|
+
isRequired: false,
|
|
102
|
+
transformFunction: null
|
|
103
|
+
},
|
|
104
|
+
startAt: {
|
|
105
|
+
classPropertyName: "startAt",
|
|
106
|
+
publicName: "startAt",
|
|
107
|
+
isSignal: true,
|
|
108
|
+
isRequired: false,
|
|
109
|
+
transformFunction: null
|
|
110
|
+
},
|
|
111
|
+
props: {
|
|
112
|
+
classPropertyName: "props",
|
|
113
|
+
publicName: "props",
|
|
114
|
+
isSignal: true,
|
|
115
|
+
isRequired: false,
|
|
116
|
+
transformFunction: null
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
hostDirectives: [{ directive: i1.NgForgeFieldHost }],
|
|
120
|
+
ngImport: i0,
|
|
121
|
+
template: `
|
|
67
122
|
@let f = ngf.field();
|
|
68
123
|
@let dateValue = f().value();
|
|
69
124
|
@let inputId = ngf.key() + '-input';
|
|
@@ -108,6 +163,7 @@ class IonicDatepickerFieldComponent {
|
|
|
108
163
|
[showDefaultTimeLabel]="props()?.showDefaultTimeLabel ?? true"
|
|
109
164
|
[showClearButton]="props()?.showClearButton ?? false"
|
|
110
165
|
[color]="props()?.color"
|
|
166
|
+
[locale]="locale() ?? 'default'"
|
|
111
167
|
[min]="dateToIsoString(minDate())"
|
|
112
168
|
[max]="dateToIsoString(maxDate())"
|
|
113
169
|
(ionChange)="onDateChange($event)"
|
|
@@ -116,25 +172,215 @@ class IonicDatepickerFieldComponent {
|
|
|
116
172
|
</ion-content>
|
|
117
173
|
</ng-template>
|
|
118
174
|
</ion-modal>
|
|
119
|
-
`,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
175
|
+
`,
|
|
176
|
+
isInline: true,
|
|
177
|
+
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"],
|
|
178
|
+
dependencies: [
|
|
179
|
+
{
|
|
180
|
+
kind: "component",
|
|
181
|
+
type: IonInput,
|
|
182
|
+
selector: "ion-input",
|
|
183
|
+
inputs: [
|
|
184
|
+
"accept",
|
|
185
|
+
"autocapitalize",
|
|
186
|
+
"autocomplete",
|
|
187
|
+
"autocorrect",
|
|
188
|
+
"autofocus",
|
|
189
|
+
"clearInput",
|
|
190
|
+
"clearOnEdit",
|
|
191
|
+
"color",
|
|
192
|
+
"counter",
|
|
193
|
+
"counterFormatter",
|
|
194
|
+
"debounce",
|
|
195
|
+
"disabled",
|
|
196
|
+
"enterkeyhint",
|
|
197
|
+
"errorText",
|
|
198
|
+
"fill",
|
|
199
|
+
"helperText",
|
|
200
|
+
"inputmode",
|
|
201
|
+
"label",
|
|
202
|
+
"labelPlacement",
|
|
203
|
+
"max",
|
|
204
|
+
"maxlength",
|
|
205
|
+
"min",
|
|
206
|
+
"minlength",
|
|
207
|
+
"mode",
|
|
208
|
+
"multiple",
|
|
209
|
+
"name",
|
|
210
|
+
"pattern",
|
|
211
|
+
"placeholder",
|
|
212
|
+
"readonly",
|
|
213
|
+
"required",
|
|
214
|
+
"shape",
|
|
215
|
+
"size",
|
|
216
|
+
"spellcheck",
|
|
217
|
+
"step",
|
|
218
|
+
"type",
|
|
219
|
+
"value"
|
|
220
|
+
]
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
kind: "component",
|
|
224
|
+
type: IonModal,
|
|
225
|
+
selector: "ion-modal"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
kind: "component",
|
|
229
|
+
type: IonDatetime,
|
|
230
|
+
selector: "ion-datetime",
|
|
231
|
+
inputs: [
|
|
232
|
+
"cancelText",
|
|
233
|
+
"clearText",
|
|
234
|
+
"color",
|
|
235
|
+
"dayValues",
|
|
236
|
+
"disabled",
|
|
237
|
+
"doneText",
|
|
238
|
+
"firstDayOfWeek",
|
|
239
|
+
"formatOptions",
|
|
240
|
+
"highlightedDates",
|
|
241
|
+
"hourCycle",
|
|
242
|
+
"hourValues",
|
|
243
|
+
"isDateEnabled",
|
|
244
|
+
"locale",
|
|
245
|
+
"max",
|
|
246
|
+
"min",
|
|
247
|
+
"minuteValues",
|
|
248
|
+
"mode",
|
|
249
|
+
"monthValues",
|
|
250
|
+
"multiple",
|
|
251
|
+
"name",
|
|
252
|
+
"preferWheel",
|
|
253
|
+
"presentation",
|
|
254
|
+
"readonly",
|
|
255
|
+
"showAdjacentDays",
|
|
256
|
+
"showClearButton",
|
|
257
|
+
"showDefaultButtons",
|
|
258
|
+
"showDefaultTimeLabel",
|
|
259
|
+
"showDefaultTitle",
|
|
260
|
+
"size",
|
|
261
|
+
"titleSelectedDatesFormatter",
|
|
262
|
+
"value",
|
|
263
|
+
"yearValues"
|
|
264
|
+
]
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
kind: "component",
|
|
268
|
+
type: IonNote,
|
|
269
|
+
selector: "ion-note",
|
|
270
|
+
inputs: ["color", "mode"]
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
kind: "component",
|
|
274
|
+
type: IonButtons,
|
|
275
|
+
selector: "ion-buttons",
|
|
276
|
+
inputs: ["collapse"]
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
kind: "component",
|
|
280
|
+
type: IonHeader,
|
|
281
|
+
selector: "ion-header",
|
|
282
|
+
inputs: [
|
|
283
|
+
"collapse",
|
|
284
|
+
"mode",
|
|
285
|
+
"translucent"
|
|
286
|
+
]
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
kind: "component",
|
|
290
|
+
type: IonContent,
|
|
291
|
+
selector: "ion-content",
|
|
292
|
+
inputs: [
|
|
293
|
+
"color",
|
|
294
|
+
"fixedSlotPlacement",
|
|
295
|
+
"forceOverscroll",
|
|
296
|
+
"fullscreen",
|
|
297
|
+
"scrollEvents",
|
|
298
|
+
"scrollX",
|
|
299
|
+
"scrollY"
|
|
300
|
+
]
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
kind: "component",
|
|
304
|
+
type: IonToolbar,
|
|
305
|
+
selector: "ion-toolbar",
|
|
306
|
+
inputs: ["color", "mode"]
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
kind: "component",
|
|
310
|
+
type: IonTitle,
|
|
311
|
+
selector: "ion-title",
|
|
312
|
+
inputs: ["color", "size"]
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
kind: "component",
|
|
316
|
+
type: IonButton,
|
|
317
|
+
selector: "ion-button",
|
|
318
|
+
inputs: [
|
|
319
|
+
"buttonType",
|
|
320
|
+
"color",
|
|
321
|
+
"disabled",
|
|
322
|
+
"download",
|
|
323
|
+
"expand",
|
|
324
|
+
"fill",
|
|
325
|
+
"form",
|
|
326
|
+
"href",
|
|
327
|
+
"mode",
|
|
328
|
+
"rel",
|
|
329
|
+
"routerAnimation",
|
|
330
|
+
"routerDirection",
|
|
331
|
+
"shape",
|
|
332
|
+
"size",
|
|
333
|
+
"strong",
|
|
334
|
+
"target",
|
|
335
|
+
"type"
|
|
336
|
+
]
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
kind: "directive",
|
|
340
|
+
type: NgForgeControl,
|
|
341
|
+
selector: "[ngForgeControl]",
|
|
342
|
+
inputs: ["ngForgeControl"]
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
kind: "pipe",
|
|
346
|
+
type: DynamicTextPipe,
|
|
347
|
+
name: "dynamicText"
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
kind: "pipe",
|
|
351
|
+
type: AsyncPipe,
|
|
352
|
+
name: "async"
|
|
353
|
+
}
|
|
354
|
+
],
|
|
355
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
356
|
+
});
|
|
357
|
+
};
|
|
358
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
359
|
+
minVersion: "12.0.0",
|
|
360
|
+
version: "22.2.5",
|
|
361
|
+
ngImport: i0,
|
|
362
|
+
type: IonicDatepickerFieldComponent,
|
|
363
|
+
decorators: [{
|
|
364
|
+
type: Component,
|
|
365
|
+
args: [{
|
|
366
|
+
selector: "df-ion-datepicker",
|
|
367
|
+
imports: [
|
|
368
|
+
IonInput,
|
|
369
|
+
IonModal,
|
|
370
|
+
IonDatetime,
|
|
371
|
+
IonNote,
|
|
372
|
+
IonButtons,
|
|
373
|
+
IonHeader,
|
|
374
|
+
IonContent,
|
|
375
|
+
IonToolbar,
|
|
376
|
+
IonTitle,
|
|
377
|
+
IonButton,
|
|
378
|
+
DynamicTextPipe,
|
|
379
|
+
AsyncPipe,
|
|
380
|
+
NgForgeControl
|
|
381
|
+
],
|
|
382
|
+
hostDirectives: [NgForgeFieldHost],
|
|
383
|
+
template: `
|
|
138
384
|
@let f = ngf.field();
|
|
139
385
|
@let dateValue = f().value();
|
|
140
386
|
@let inputId = ngf.key() + '-input';
|
|
@@ -179,6 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
179
425
|
[showDefaultTimeLabel]="props()?.showDefaultTimeLabel ?? true"
|
|
180
426
|
[showClearButton]="props()?.showClearButton ?? false"
|
|
181
427
|
[color]="props()?.color"
|
|
428
|
+
[locale]="locale() ?? 'default'"
|
|
182
429
|
[min]="dateToIsoString(minDate())"
|
|
183
430
|
[max]="dateToIsoString(maxDate())"
|
|
184
431
|
(ionChange)="onDateChange($event)"
|
|
@@ -187,9 +434,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
187
434
|
</ion-content>
|
|
188
435
|
</ng-template>
|
|
189
436
|
</ion-modal>
|
|
190
|
-
`,
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
437
|
+
`,
|
|
438
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
439
|
+
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"]
|
|
440
|
+
}]
|
|
441
|
+
}],
|
|
442
|
+
propDecorators: {
|
|
443
|
+
minDate: [{
|
|
444
|
+
type: i0.Input,
|
|
445
|
+
args: [{
|
|
446
|
+
isSignal: true,
|
|
447
|
+
alias: "minDate",
|
|
448
|
+
required: false
|
|
449
|
+
}]
|
|
450
|
+
}],
|
|
451
|
+
maxDate: [{
|
|
452
|
+
type: i0.Input,
|
|
453
|
+
args: [{
|
|
454
|
+
isSignal: true,
|
|
455
|
+
alias: "maxDate",
|
|
456
|
+
required: false
|
|
457
|
+
}]
|
|
458
|
+
}],
|
|
459
|
+
startAt: [{
|
|
460
|
+
type: i0.Input,
|
|
461
|
+
args: [{
|
|
462
|
+
isSignal: true,
|
|
463
|
+
alias: "startAt",
|
|
464
|
+
required: false
|
|
465
|
+
}]
|
|
466
|
+
}],
|
|
467
|
+
props: [{
|
|
468
|
+
type: i0.Input,
|
|
469
|
+
args: [{
|
|
470
|
+
isSignal: true,
|
|
471
|
+
alias: "props",
|
|
472
|
+
required: false
|
|
473
|
+
}]
|
|
474
|
+
}]
|
|
475
|
+
}
|
|
476
|
+
});
|
|
194
477
|
export { IonicDatepickerFieldComponent };
|
|
195
|
-
|
|
478
|
+
|
|
479
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs","
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs","names":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/datepicker/ionic-datepicker.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';\nimport {\n IonButton,\n IonButtons,\n IonContent,\n IonDatetime,\n IonHeader,\n IonInput,\n IonModal,\n IonNote,\n IonTitle,\n IonToolbar,\n} from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicDatepickerProps } from './ionic-datepicker.type';\nimport { AsyncPipe } from '@angular/common';\n\nconst TIME = { hour: 'numeric', minute: '2-digit' } as const;\nconst DATE = { month: 'short', day: 'numeric', year: 'numeric' } as const;\n\nconst DISPLAY_FORMATS = {\n date: DATE,\n 'date-time': { ...DATE, ...TIME },\n 'time-date': { ...DATE, ...TIME },\n time: TIME,\n month: { month: 'long', year: 'numeric' },\n 'month-year': { month: 'short', year: 'numeric' },\n year: { year: 'numeric' },\n} as const satisfies Record<NonNullable<IonicDatepickerProps['presentation']>, Intl.DateTimeFormatOptions>;\n\n@Component({\n selector: 'df-ion-datepicker',\n imports: [\n IonInput,\n IonModal,\n IonDatetime,\n IonNote,\n IonButtons,\n IonHeader,\n IonContent,\n IonToolbar,\n IonTitle,\n IonButton,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n ],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let dateValue = f().value();\n @let inputId = ngf.key() + '-input';\n\n <ion-input\n ngForgeControl\n [id]=\"inputId\"\n [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n [labelPlacement]=\"'stacked'\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [disabled]=\"f().disabled()\"\n [value]=\"formatDisplayDate(dateValue)\"\n [readonly]=\"true\"\n [fill]=\"'outline'\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n (click)=\"!f().disabled() && openModal()\"\n />\n @if (ngf.errorsToDisplay()[0]; as error) {\n <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n } @else if (props()?.hint; as hint) {\n <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n }\n\n <ion-modal [isOpen]=\"isModalOpen()\" (didDismiss)=\"closeModal()\">\n <ng-template>\n <ion-header>\n <ion-toolbar>\n <ion-title>{{ ngf.label() | dynamicText | async }}</ion-title>\n <ion-buttons slot=\"end\">\n <ion-button (click)=\"closeModal()\">Close</ion-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n <ion-content>\n <ion-datetime\n [presentation]=\"props()?.presentation ?? 'date'\"\n [value]=\"dateToIsoString(dateValue)\"\n [multiple]=\"props()?.multiple ?? false\"\n [preferWheel]=\"props()?.preferWheel ?? false\"\n [showDefaultButtons]=\"props()?.showDefaultButtons ?? false\"\n [showDefaultTitle]=\"props()?.showDefaultTitle ?? false\"\n [showDefaultTimeLabel]=\"props()?.showDefaultTimeLabel ?? true\"\n [showClearButton]=\"props()?.showClearButton ?? false\"\n [color]=\"props()?.color\"\n [locale]=\"locale() ?? 'default'\"\n [min]=\"dateToIsoString(minDate())\"\n [max]=\"dateToIsoString(maxDate())\"\n (ionChange)=\"onDateChange($event)\"\n >\n </ion-datetime>\n </ion-content>\n </ng-template>\n </ion-modal>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n ion-input {\n cursor: pointer;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicDatepickerFieldComponent {\n protected readonly ngf = injectNgForgeField<Date | null>();\n\n readonly minDate = input<Date | null>(null);\n readonly maxDate = input<Date | null>(null);\n readonly startAt = input<Date | null>(null);\n readonly props = input<IonicDatepickerProps>();\n\n readonly isModalOpen = signal(false);\n\n /** Canonical locale tag, or undefined (browser locale) when unset or malformed. */\n protected readonly locale = computed(() => {\n const locale = this.props()?.locale;\n try {\n return locale ? Intl.getCanonicalLocales(locale)[0] : undefined;\n } catch {\n return undefined;\n }\n });\n\n openModal() {\n this.isModalOpen.set(true);\n }\n\n closeModal() {\n this.isModalOpen.set(false);\n }\n\n onDateChange(event: CustomEvent) {\n const value = event.detail.value;\n // ion-datetime emits ISO 8601 strings internally; convert to Date | null\n // to match the field tree's value type.\n if (value && typeof value === 'string' && value.length > 0) {\n const date = new Date(value);\n this.ngf.field()().value.set(date);\n } else {\n this.ngf.field()().value.set(null);\n }\n this.closeModal();\n }\n\n dateToIsoString(date: Date | null | undefined): string | undefined {\n if (!date) return undefined;\n return date.toISOString();\n }\n\n formatDisplayDate(date: Date | null | undefined): string {\n if (!date) return '';\n const options = DISPLAY_FORMATS[this.props()?.presentation ?? 'date'];\n return new Intl.DateTimeFormat(this.locale(), options).format(date);\n }\n}\n"],"mappings":"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"}
|