@acorex/components 19.12.0-next.2 → 19.12.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/calendar/lib/calendar-range.component.d.ts +4 -1
- package/calendar/lib/calendar.class.d.ts +8 -0
- package/calendar/lib/calendar.component.d.ts +2 -0
- package/datetime-box/lib/datetime-box.component.d.ts +11 -13
- package/datetime-input/lib/datetime-input.component.d.ts +21 -84
- package/datetime-picker/lib/datetime-picker.component.d.ts +13 -31
- package/fesm2022/acorex-components-calendar.mjs +65 -37
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +28 -26
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +113 -181
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +79 -81
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-Bs1CnBt8.mjs → acorex-components-modal-acorex-components-modal-BzlZIwq8.mjs} +116 -26
- package/fesm2022/acorex-components-modal-acorex-components-modal-BzlZIwq8.mjs.map +1 -0
- package/fesm2022/acorex-components-modal-modal-content.component-zmFWBaiD.mjs +187 -0
- package/fesm2022/acorex-components-modal-modal-content.component-zmFWBaiD.mjs.map +1 -0
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-query-builder.mjs +1 -1
- package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +63 -30
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/modal/lib/modal-content/modal-content.component.d.ts +11 -8
- package/modal/lib/modal-state.service.d.ts +8 -7
- package/modal/lib/modal.component.d.ts +2 -0
- package/modal/lib/modal.service.d.ts +4 -2
- package/modal/lib/modal.types.d.ts +15 -1
- package/package.json +1 -1
- package/scheduler/lib/scheduler.component.d.ts +8 -4
- package/scheduler/lib/scheduler.service.d.ts +3 -2
- package/scheduler/lib/views/day/scheduler-day-view.component.d.ts +2 -1
- package/scheduler/lib/views/month/scheduler-month-view.component.d.ts +4 -2
- package/scheduler/lib/views/week/scheduler-week-view.component.d.ts +2 -1
- package/fesm2022/acorex-components-modal-acorex-components-modal-Bs1CnBt8.mjs.map +0 -1
- package/fesm2022/acorex-components-modal-modal-content.component-DhpujG4d.mjs +0 -181
- package/fesm2022/acorex-components-modal-modal-content.component-DhpujG4d.mjs.map +0 -1
|
@@ -4,17 +4,18 @@ import { MXValueComponent, AXComponent, AXFocusableComponent, AXValuableComponen
|
|
|
4
4
|
import { AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
|
5
5
|
import { AXPickerContainerComponent, AXPickerTitleComponent, AXPickerItemsComponent, AXPickerModule } from '@acorex/components/picker';
|
|
6
6
|
import { AXTabsComponent, AXTabItemComponent, AXTabsModule } from '@acorex/components/tabs';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
|
|
8
|
+
import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
|
|
9
9
|
import { AXHtmlUtil } from '@acorex/core/utils';
|
|
10
10
|
import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
|
|
11
11
|
import * as i0 from '@angular/core';
|
|
12
|
-
import { InjectionToken, inject, model, afterNextRender,
|
|
12
|
+
import { InjectionToken, inject, computed, model, afterNextRender, signal, linkedSignal, input, effect, forwardRef, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
13
13
|
import * as i1 from '@angular/forms';
|
|
14
14
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
15
15
|
import { classes } from 'polytype';
|
|
16
16
|
import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
|
|
17
17
|
import { set } from 'lodash-es';
|
|
18
|
+
import { AXDateTimeModule } from '@acorex/core/date-time';
|
|
18
19
|
|
|
19
20
|
const AX_DATETIME_PICKER_CONFIG = new InjectionToken('AX_DATETIME_PICKER_CONFIG', {
|
|
20
21
|
providedIn: 'root',
|
|
@@ -43,7 +44,8 @@ function dateTimePickerConfig(config = {}) {
|
|
|
43
44
|
class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValueComponent)) {
|
|
44
45
|
constructor() {
|
|
45
46
|
super(...arguments);
|
|
46
|
-
this.
|
|
47
|
+
this.formatService = inject(AXFormatService);
|
|
48
|
+
this.buttonText = computed(() => (this._activePart() === 'date' ? 'dateTime.today' : 'dateTime.now'));
|
|
47
49
|
this.defaultConfig = inject(AX_DATETIME_PICKER_CONFIG);
|
|
48
50
|
this.isRtl = model(false);
|
|
49
51
|
this.#init = afterNextRender(() => {
|
|
@@ -53,8 +55,6 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
53
55
|
* @ignore
|
|
54
56
|
*/
|
|
55
57
|
this._currentTimeButton = this.defaultConfig.currentTimeButton;
|
|
56
|
-
this._calendarService = inject(AXCalendarService);
|
|
57
|
-
this._tranlationService = inject(AXTranslationService);
|
|
58
58
|
/**
|
|
59
59
|
* @ignore
|
|
60
60
|
*/
|
|
@@ -74,7 +74,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
74
74
|
placeholders: ['YY', 'yy', 'YYYY', 'yyyy'],
|
|
75
75
|
enabled: false,
|
|
76
76
|
default: 2023,
|
|
77
|
-
realValue: () => this.
|
|
77
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.year.placeholder),
|
|
78
78
|
},
|
|
79
79
|
month: {
|
|
80
80
|
key: 'month',
|
|
@@ -82,15 +82,15 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
82
82
|
placeholders: ['MMM', 'MMMM', 'MM', 'M'],
|
|
83
83
|
enabled: false,
|
|
84
84
|
default: 1,
|
|
85
|
-
realValue: () => this.
|
|
85
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.month.placeholder),
|
|
86
86
|
},
|
|
87
87
|
day: {
|
|
88
88
|
key: 'day',
|
|
89
89
|
placeholder: 'dd',
|
|
90
|
-
placeholders: ['dd', 'd', '
|
|
90
|
+
placeholders: ['dd', 'd', 'E', 'dddd'],
|
|
91
91
|
enabled: false,
|
|
92
92
|
default: 1,
|
|
93
|
-
realValue: () => this.
|
|
93
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.day.placeholder),
|
|
94
94
|
},
|
|
95
95
|
hour: {
|
|
96
96
|
key: 'hour',
|
|
@@ -98,7 +98,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
98
98
|
placeholders: ['HH', 'H', 'hh', 'h'],
|
|
99
99
|
enabled: false,
|
|
100
100
|
default: 0,
|
|
101
|
-
realValue: () => this.
|
|
101
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.hour.placeholder),
|
|
102
102
|
},
|
|
103
103
|
minute: {
|
|
104
104
|
key: 'minute',
|
|
@@ -106,7 +106,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
106
106
|
placeholders: ['mm', 'm'],
|
|
107
107
|
enabled: false,
|
|
108
108
|
default: 0,
|
|
109
|
-
realValue: () => this.
|
|
109
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.minute.placeholder),
|
|
110
110
|
},
|
|
111
111
|
second: {
|
|
112
112
|
key: 'second',
|
|
@@ -114,27 +114,60 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
114
114
|
placeholders: ['ss', 's'],
|
|
115
115
|
enabled: false,
|
|
116
116
|
default: 0,
|
|
117
|
-
realValue: () => this.
|
|
117
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.second.placeholder),
|
|
118
|
+
},
|
|
119
|
+
AMPM: {
|
|
120
|
+
key: 'AMPM',
|
|
121
|
+
placeholder: 'a',
|
|
122
|
+
placeholders: ['a', 'A'],
|
|
123
|
+
enabled: false,
|
|
124
|
+
default: 0,
|
|
125
|
+
typedValue: null,
|
|
126
|
+
realValue: () => this.formatService.format(this._editingDateObj(), 'datetime', this._parts.AMPM.placeholder),
|
|
118
127
|
},
|
|
119
128
|
};
|
|
120
129
|
/**
|
|
121
130
|
* @ignore
|
|
122
131
|
*/
|
|
123
|
-
this._activePart = 'date';
|
|
124
|
-
/**
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
this._editingDateObj = this.
|
|
132
|
+
this._activePart = signal('date');
|
|
133
|
+
// /**
|
|
134
|
+
// * @ignore
|
|
135
|
+
// */
|
|
136
|
+
this._editingDateObj = linkedSignal(() => this.calendarService.now(this.calendar()));
|
|
128
137
|
/**
|
|
129
|
-
*
|
|
130
|
-
*
|
|
131
|
-
* @event
|
|
138
|
+
* @description The calendar type to use for the datetime input.
|
|
132
139
|
*/
|
|
133
|
-
this.
|
|
140
|
+
this.calendar = input(null);
|
|
141
|
+
this._calendarSystem = linkedSignal(() => this.calendar() ?? this.type);
|
|
142
|
+
this.picker = input('datetime');
|
|
143
|
+
this.#effectPicker = effect(() => {
|
|
144
|
+
if (this.picker() === 'time') {
|
|
145
|
+
this._activePart.set('time');
|
|
146
|
+
}
|
|
147
|
+
else if (this.picker() === 'date') {
|
|
148
|
+
this._activePart.set('date');
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
this._format = linkedSignal(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '');
|
|
134
152
|
/**
|
|
135
|
-
*
|
|
153
|
+
* @deprecated use locale & mode instead
|
|
136
154
|
*/
|
|
137
|
-
this.
|
|
155
|
+
this.format = input();
|
|
156
|
+
this.#effect = effect(() => {
|
|
157
|
+
const profile = this.localeService.activeProfile();
|
|
158
|
+
//
|
|
159
|
+
if (!this.format()) {
|
|
160
|
+
this._format.set(this.format() ?? profile.formats[this.picker()]?.short ?? '');
|
|
161
|
+
}
|
|
162
|
+
//
|
|
163
|
+
if (!this.calendar()) {
|
|
164
|
+
this._calendarSystem.set(profile.calendar.system);
|
|
165
|
+
}
|
|
166
|
+
//
|
|
167
|
+
this.type = this._calendarSystem();
|
|
168
|
+
//
|
|
169
|
+
this._detectParts();
|
|
170
|
+
});
|
|
138
171
|
}
|
|
139
172
|
#init;
|
|
140
173
|
/**
|
|
@@ -164,36 +197,14 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
164
197
|
get _hasTimePart() {
|
|
165
198
|
return ['hour', 'minute', 'second'].some((k) => this._parts[k].enabled);
|
|
166
199
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}
|
|
170
|
-
/**
|
|
171
|
-
* Gets or sets the format for the datetime input.
|
|
172
|
-
*/
|
|
173
|
-
get format() {
|
|
174
|
-
return this._format;
|
|
175
|
-
}
|
|
176
|
-
/**
|
|
177
|
-
* Sets the format for the datetime input and updates internal parts.
|
|
178
|
-
*
|
|
179
|
-
* @param v - The new format string to be set.
|
|
180
|
-
*/
|
|
181
|
-
set format(v) {
|
|
182
|
-
this.setOption({
|
|
183
|
-
name: 'format',
|
|
184
|
-
value: v,
|
|
185
|
-
afterCallback: (o, n) => {
|
|
186
|
-
this._detectParts();
|
|
187
|
-
},
|
|
188
|
-
});
|
|
189
|
-
}
|
|
200
|
+
#effectPicker;
|
|
201
|
+
#effect;
|
|
190
202
|
/**
|
|
191
203
|
* @ignore
|
|
192
204
|
*/
|
|
193
205
|
async ngOnInit() {
|
|
194
206
|
super.ngOnInit();
|
|
195
207
|
this._detectParts();
|
|
196
|
-
this.detectButtonText();
|
|
197
208
|
}
|
|
198
209
|
/**
|
|
199
210
|
* Handles changes to the internal value of the component.
|
|
@@ -201,37 +212,29 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
201
212
|
*/
|
|
202
213
|
internalValueChanged(value) {
|
|
203
214
|
try {
|
|
204
|
-
if (this.
|
|
205
|
-
this._editingDateObj
|
|
215
|
+
if (this.calendarService.isValidDate(value)) {
|
|
216
|
+
this._editingDateObj.set(this.calendarService.create(value, this.calendar()));
|
|
206
217
|
}
|
|
207
218
|
else {
|
|
208
219
|
throw new Error();
|
|
209
220
|
}
|
|
210
221
|
}
|
|
211
222
|
catch {
|
|
212
|
-
this._editingDateObj
|
|
223
|
+
this._editingDateObj.set(this.calendarService.now(this.calendar()));
|
|
213
224
|
}
|
|
214
225
|
}
|
|
215
|
-
/**
|
|
216
|
-
* @ignore
|
|
217
|
-
*/
|
|
218
|
-
detectButtonText() {
|
|
219
|
-
this.buttonText = this._activePart === 'date' ? 'dateTime.today' : 'dateTime.now';
|
|
220
|
-
}
|
|
221
226
|
/**
|
|
222
227
|
* @ignore
|
|
223
228
|
*/
|
|
224
229
|
_handleViewChanged(e) {
|
|
225
|
-
this._activePart
|
|
226
|
-
this.detectButtonText();
|
|
227
|
-
this.cdr.detectChanges();
|
|
230
|
+
this._activePart.set(e.tab.key);
|
|
228
231
|
}
|
|
229
232
|
/**
|
|
230
233
|
* @ignore
|
|
231
234
|
*/
|
|
232
235
|
_handlePickerOnValueChanged(e, part) {
|
|
233
236
|
if (e.isUserInteraction) {
|
|
234
|
-
this._editingDateObj
|
|
237
|
+
this._editingDateObj.set(this._editingDateObj().set(part, Number(e.value['id'])));
|
|
235
238
|
}
|
|
236
239
|
}
|
|
237
240
|
/**
|
|
@@ -245,24 +248,24 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
245
248
|
*/
|
|
246
249
|
_handleCalendarOnValueChanged(e) {
|
|
247
250
|
if (e.isUserInteraction) {
|
|
248
|
-
const selectedValue = this.calendarService.create(e.value, this.
|
|
251
|
+
const selectedValue = this.calendarService.create(e.value, this.calendar());
|
|
249
252
|
const currentValue = this.calendarService
|
|
250
|
-
.create(e.value, this.
|
|
253
|
+
.create(e.value, this.calendar())
|
|
251
254
|
.set('day', selectedValue.dayOfMonth)
|
|
252
255
|
.set('month', selectedValue.monthOfYear)
|
|
253
256
|
.set('year', selectedValue.year);
|
|
254
|
-
this._editingDateObj
|
|
257
|
+
this._editingDateObj.set(currentValue);
|
|
255
258
|
if (this._hasTimePart) {
|
|
256
|
-
this._activePart
|
|
259
|
+
this._activePart.set('time');
|
|
257
260
|
if (this.tabs && this._hasDatePart && this._hasTimePart) {
|
|
258
261
|
this.tabs.select(1);
|
|
259
262
|
}
|
|
260
263
|
else {
|
|
261
|
-
this.commitValue(this.
|
|
264
|
+
this.commitValue(this._editingDateObj().date, true);
|
|
262
265
|
}
|
|
263
266
|
}
|
|
264
267
|
else {
|
|
265
|
-
this.commitValue(this.
|
|
268
|
+
this.commitValue(this._editingDateObj().date, true);
|
|
266
269
|
}
|
|
267
270
|
}
|
|
268
271
|
}
|
|
@@ -273,7 +276,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
273
276
|
Object.values(this._parts).forEach((e) => {
|
|
274
277
|
e.enabled = false;
|
|
275
278
|
});
|
|
276
|
-
const formatParts = this.
|
|
279
|
+
const formatParts = this._format().split(/[^a-zA-Z]+/);
|
|
277
280
|
formatParts.forEach((f) => {
|
|
278
281
|
const found = Object.values(this._parts).find((c) => c.placeholders.some((d) => d == f));
|
|
279
282
|
if (found) {
|
|
@@ -281,21 +284,20 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
281
284
|
found.placeholder = f;
|
|
282
285
|
}
|
|
283
286
|
});
|
|
284
|
-
this.
|
|
285
|
-
this.cdr.markForCheck();
|
|
287
|
+
//this.cdr.markForCheck();
|
|
286
288
|
}
|
|
287
289
|
/**
|
|
288
290
|
* @ignore
|
|
289
291
|
*/
|
|
290
292
|
_handleSetClick() {
|
|
291
|
-
this.commitValue(this.
|
|
293
|
+
this.commitValue(this._editingDateObj().date, true);
|
|
292
294
|
}
|
|
293
295
|
/**
|
|
294
296
|
* @ignore
|
|
295
297
|
*/
|
|
296
298
|
_handleNowClick() {
|
|
297
|
-
this._editingDateObj
|
|
298
|
-
this.commitValue(this.
|
|
299
|
+
this._editingDateObj.set(this.calendarService.now(this.calendar()));
|
|
300
|
+
this.commitValue(this._editingDateObj().date, true);
|
|
299
301
|
}
|
|
300
302
|
/**
|
|
301
303
|
* @ignore
|
|
@@ -336,7 +338,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
336
338
|
});
|
|
337
339
|
}
|
|
338
340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXDateTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXDateTimePickerComponent, isStandalone: true, selector: "ax-datetime-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, isRtl: { classPropertyName: "isRtl", publicName: "isRtl", isSignal: true, isRequired: false, transformFunction: null }, currentTimeButton: { classPropertyName: "currentTimeButton", publicName: "currentTimeButton", isSignal: false, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal:
|
|
341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXDateTimePickerComponent, isStandalone: true, selector: "ax-datetime-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, isRtl: { classPropertyName: "isRtl", publicName: "isRtl", isSignal: true, isRequired: false, transformFunction: null }, currentTimeButton: { classPropertyName: "currentTimeButton", publicName: "currentTimeButton", isSignal: false, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", isRtl: "isRtlChange" }, providers: [
|
|
340
342
|
{ provide: AXComponent, useExisting: AXDateTimePickerComponent },
|
|
341
343
|
{ provide: AXFocusableComponent, useExisting: AXDateTimePickerComponent },
|
|
342
344
|
{ provide: AXValuableComponent, useExisting: AXDateTimePickerComponent },
|
|
@@ -345,7 +347,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
345
347
|
useExisting: forwardRef(() => AXDateTimePickerComponent),
|
|
346
348
|
multi: true,
|
|
347
349
|
},
|
|
348
|
-
], viewQueries: [{ propertyName: "tabs", first: true, predicate: AXTabsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item [text]=\"'dateTime.date' | translate | async\" [key]=\"'date'\" [disabled]=\"disabled\"></ax-tab-item>\n <ax-tab-item [text]=\"'dateTime.time' | translate | async\" [key]=\"'time'\" [disabled]=\"disabled\"></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [ngModel]=\"
|
|
350
|
+
], viewQueries: [{ propertyName: "tabs", first: true, predicate: AXTabsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item [text]=\"'dateTime.date' | translate | async\" [key]=\"'date'\" [disabled]=\"disabled\"></ax-tab-item>\n <ax-tab-item [text]=\"'dateTime.time' | translate | async\" [key]=\"'time'\" [disabled]=\"disabled\"></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart() === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [ngModel]=\"_editingDateObj().date\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [disabledDates]=\"disabledDates\"\n [holidayDates]=\"holidayDates\"\n [depth]=\"depth\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (onValueChanged)=\"_handleCalendarOnValueChanged($event)\"\n [type]=\"_calendarSystem()\"\n >\n </ax-calendar>\n </div>\n }\n\n @if (_activePart() === 'time') {\n <div class=\"ax-picker-part\">\n <div class=\"ax-header\">\n {{ _editingDateObj() | format: picker() : 'short' | async }}\n </div>\n <div class=\"ax-picker-time-container\">\n @if (isRtl()) {\n @if (_parts.second.enabled) {\n <ng-container [ngTemplateOutlet]=\"secondRef\"> </ng-container>\n }\n\n @if (_parts.minute.enabled) {\n <ng-container [ngTemplateOutlet]=\"minuteRef\"> </ng-container>\n }\n\n @if (_parts.hour.enabled) {\n <ng-container [ngTemplateOutlet]=\"hourRef\"> </ng-container>\n }\n } @else {\n @if (_parts.hour.enabled) {\n <ng-container [ngTemplateOutlet]=\"hourRef\"> </ng-container>\n }\n\n @if (_parts.minute.enabled) {\n <ng-container [ngTemplateOutlet]=\"minuteRef\"> </ng-container>\n }\n\n @if (_parts.second.enabled) {\n <ng-container [ngTemplateOutlet]=\"secondRef\"> </ng-container>\n }\n }\n </div>\n </div>\n }\n</div>\n@if (!disabled && !readonly && (currentTimeButton || _hasTimePart)) {\n <div class=\"ax-footer\">\n <div>\n @if (currentTimeButton) {\n <ax-button\n [text]=\"buttonText() | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleNowClick()\"\n [disabled]=\"isTodayDisabled()\"\n ></ax-button>\n }\n </div>\n <div>\n @if (_hasTimePart) {\n <ax-button\n color=\"primary\"\n [text]=\"'dateTime.set' | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleSetClick()\"\n ></ax-button>\n }\n </div>\n </div>\n}\n\n<ng-template #hourRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ 'dateTime.hour' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"hours\"\n [ngModel]=\"_editingDateObj().hour\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'hour')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #minuteRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ 'dateTime.minute' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"_editingDateObj().minute\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'minute')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #secondRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ 'dateTime.second' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"_editingDateObj().second\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'second')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n", styles: ["ax-datetime-picker{display:flex;flex-direction:column}ax-datetime-picker>.ax-header{display:flex;justify-content:center;padding-top:var(--ax-comp-datetime-picker-header-padding-t, .5rem);padding-left:var(--ax-comp-datetime-picker-header-padding-x, .5rem);padding-right:var(--ax-comp-datetime-picker-header-padding-x, .5rem)}ax-datetime-picker>.ax-content{width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 768px){ax-datetime-picker>.ax-content{width:var(--ax-comp-datetime-picker-md-width, 20rem)}}ax-datetime-picker>.ax-content .ax-picker-part{width:100%;display:flex;flex-direction:column;height:var(--ax-comp-datetime-picker-picker-part-height, 376px)}ax-datetime-picker>.ax-content .ax-picker-part .ax-picker-time-container{display:flex;height:100%}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{font-weight:500;text-align:center;padding:var(--ax-comp-datetime-picker-picker-part-header-padding, .75rem);font-size:var(--ax-comp-datetime-picker-picker-part-header-font-size, 1rem);border-bottom:solid;border-bottom-width:var(--ax-comp-datetime-picker-picker-part-header-border-width, 1px);border-bottom-color:rgba(var(--ax-comp-datetime-picker-picker-part-header-border-color, var(--ax-sys-color-border-surface)))}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1 1 0%}ax-datetime-picker>.ax-content .ax-calendar-part{padding-top:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem);padding-bottom:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem)}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{display:flex;justify-content:space-between;padding:var(--ax-comp-datetime-picker-footer-padding, .5rem);border-color:rgba(var(--ax-comp-datetime-picker-footer-border-color, var(--ax-sys-color-border-surface)));border-top-width:var(--ax-comp-datetime-picker-footer-border-top-width, 1px)}ax-datetime-picker>.ax-footer ax-button{min-width:100px}\n"], dependencies: [{ kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPickerContainerComponent, selector: "ax-picker-container", inputs: ["class"] }, { kind: "component", type: AXPickerTitleComponent, selector: "ax-picker-title" }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPickerItemsComponent, selector: "ax-picker-items", inputs: ["disabled", "readonly", "readonlyChange", "disabledChange", "items", "valueField", "textField", "slidesPerGroup", "loop"], outputs: ["onValueChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
349
351
|
}
|
|
350
352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXDateTimePickerComponent, decorators: [{
|
|
351
353
|
type: Component,
|
|
@@ -405,18 +407,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
405
407
|
AXDecoratorGenericComponent,
|
|
406
408
|
AXPickerItemsComponent,
|
|
407
409
|
AsyncPipe,
|
|
408
|
-
|
|
410
|
+
AXFormatPipe,
|
|
409
411
|
AXTranslatorPipe,
|
|
410
|
-
], template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item [text]=\"'dateTime.date' | translate | async\" [key]=\"'date'\" [disabled]=\"disabled\"></ax-tab-item>\n <ax-tab-item [text]=\"'dateTime.time' | translate | async\" [key]=\"'time'\" [disabled]=\"disabled\"></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [ngModel]=\"
|
|
412
|
+
], template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item [text]=\"'dateTime.date' | translate | async\" [key]=\"'date'\" [disabled]=\"disabled\"></ax-tab-item>\n <ax-tab-item [text]=\"'dateTime.time' | translate | async\" [key]=\"'time'\" [disabled]=\"disabled\"></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart() === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [ngModel]=\"_editingDateObj().date\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [disabledDates]=\"disabledDates\"\n [holidayDates]=\"holidayDates\"\n [depth]=\"depth\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (onValueChanged)=\"_handleCalendarOnValueChanged($event)\"\n [type]=\"_calendarSystem()\"\n >\n </ax-calendar>\n </div>\n }\n\n @if (_activePart() === 'time') {\n <div class=\"ax-picker-part\">\n <div class=\"ax-header\">\n {{ _editingDateObj() | format: picker() : 'short' | async }}\n </div>\n <div class=\"ax-picker-time-container\">\n @if (isRtl()) {\n @if (_parts.second.enabled) {\n <ng-container [ngTemplateOutlet]=\"secondRef\"> </ng-container>\n }\n\n @if (_parts.minute.enabled) {\n <ng-container [ngTemplateOutlet]=\"minuteRef\"> </ng-container>\n }\n\n @if (_parts.hour.enabled) {\n <ng-container [ngTemplateOutlet]=\"hourRef\"> </ng-container>\n }\n } @else {\n @if (_parts.hour.enabled) {\n <ng-container [ngTemplateOutlet]=\"hourRef\"> </ng-container>\n }\n\n @if (_parts.minute.enabled) {\n <ng-container [ngTemplateOutlet]=\"minuteRef\"> </ng-container>\n }\n\n @if (_parts.second.enabled) {\n <ng-container [ngTemplateOutlet]=\"secondRef\"> </ng-container>\n }\n }\n </div>\n </div>\n }\n</div>\n@if (!disabled && !readonly && (currentTimeButton || _hasTimePart)) {\n <div class=\"ax-footer\">\n <div>\n @if (currentTimeButton) {\n <ax-button\n [text]=\"buttonText() | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleNowClick()\"\n [disabled]=\"isTodayDisabled()\"\n ></ax-button>\n }\n </div>\n <div>\n @if (_hasTimePart) {\n <ax-button\n color=\"primary\"\n [text]=\"'dateTime.set' | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleSetClick()\"\n ></ax-button>\n }\n </div>\n </div>\n}\n\n<ng-template #hourRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ 'dateTime.hour' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"hours\"\n [ngModel]=\"_editingDateObj().hour\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'hour')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #minuteRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ 'dateTime.minute' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"_editingDateObj().minute\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'minute')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #secondRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ 'dateTime.second' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"_editingDateObj().second\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'second')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n", styles: ["ax-datetime-picker{display:flex;flex-direction:column}ax-datetime-picker>.ax-header{display:flex;justify-content:center;padding-top:var(--ax-comp-datetime-picker-header-padding-t, .5rem);padding-left:var(--ax-comp-datetime-picker-header-padding-x, .5rem);padding-right:var(--ax-comp-datetime-picker-header-padding-x, .5rem)}ax-datetime-picker>.ax-content{width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 768px){ax-datetime-picker>.ax-content{width:var(--ax-comp-datetime-picker-md-width, 20rem)}}ax-datetime-picker>.ax-content .ax-picker-part{width:100%;display:flex;flex-direction:column;height:var(--ax-comp-datetime-picker-picker-part-height, 376px)}ax-datetime-picker>.ax-content .ax-picker-part .ax-picker-time-container{display:flex;height:100%}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{font-weight:500;text-align:center;padding:var(--ax-comp-datetime-picker-picker-part-header-padding, .75rem);font-size:var(--ax-comp-datetime-picker-picker-part-header-font-size, 1rem);border-bottom:solid;border-bottom-width:var(--ax-comp-datetime-picker-picker-part-header-border-width, 1px);border-bottom-color:rgba(var(--ax-comp-datetime-picker-picker-part-header-border-color, var(--ax-sys-color-border-surface)))}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1 1 0%}ax-datetime-picker>.ax-content .ax-calendar-part{padding-top:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem);padding-bottom:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem)}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{display:flex;justify-content:space-between;padding:var(--ax-comp-datetime-picker-footer-padding, .5rem);border-color:rgba(var(--ax-comp-datetime-picker-footer-border-color, var(--ax-sys-color-border-surface)));border-top-width:var(--ax-comp-datetime-picker-footer-border-top-width, 1px)}ax-datetime-picker>.ax-footer ax-button{min-width:100px}\n"] }]
|
|
411
413
|
}], propDecorators: { currentTimeButton: [{
|
|
412
414
|
type: Input
|
|
413
415
|
}], tabs: [{
|
|
414
416
|
type: ViewChild,
|
|
415
417
|
args: [AXTabsComponent]
|
|
416
|
-
}], formatChange: [{
|
|
417
|
-
type: Output
|
|
418
|
-
}], format: [{
|
|
419
|
-
type: Input
|
|
420
418
|
}] } });
|
|
421
419
|
|
|
422
420
|
const COMPONENT = [AXDateTimePickerComponent];
|