@acorex/components 19.12.0-next.1 → 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.
Files changed (54) hide show
  1. package/calendar/lib/calendar-range.component.d.ts +4 -1
  2. package/calendar/lib/calendar.class.d.ts +8 -0
  3. package/calendar/lib/calendar.component.d.ts +2 -0
  4. package/datetime-box/lib/datetime-box.component.d.ts +11 -13
  5. package/datetime-input/lib/datetime-input.component.d.ts +21 -84
  6. package/datetime-picker/lib/datetime-picker.component.d.ts +13 -31
  7. package/fesm2022/acorex-components-alert.mjs +2 -2
  8. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  9. package/fesm2022/acorex-components-calendar.mjs +65 -37
  10. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  11. package/fesm2022/acorex-components-conversation.mjs +2 -2
  12. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  13. package/fesm2022/acorex-components-datetime-box.mjs +28 -26
  14. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  15. package/fesm2022/acorex-components-datetime-input.mjs +113 -181
  16. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  17. package/fesm2022/acorex-components-datetime-picker.mjs +79 -81
  18. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  19. package/fesm2022/acorex-components-file-explorer.mjs +1 -1
  20. package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
  21. package/fesm2022/acorex-components-map.mjs +13 -3
  22. package/fesm2022/acorex-components-map.mjs.map +1 -1
  23. package/fesm2022/{acorex-components-modal-acorex-components-modal-Bs1CnBt8.mjs → acorex-components-modal-acorex-components-modal-BzlZIwq8.mjs} +116 -26
  24. package/fesm2022/acorex-components-modal-acorex-components-modal-BzlZIwq8.mjs.map +1 -0
  25. package/fesm2022/acorex-components-modal-modal-content.component-zmFWBaiD.mjs +187 -0
  26. package/fesm2022/acorex-components-modal-modal-content.component-zmFWBaiD.mjs.map +1 -0
  27. package/fesm2022/acorex-components-modal.mjs +1 -1
  28. package/fesm2022/acorex-components-query-builder.mjs +1 -1
  29. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  30. package/fesm2022/acorex-components-scheduler.mjs +1299 -103
  31. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  32. package/fesm2022/acorex-components-tree-view.mjs +16 -7
  33. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  34. package/map/lib/map.service.d.ts +1 -1
  35. package/modal/lib/modal-content/modal-content.component.d.ts +11 -8
  36. package/modal/lib/modal-state.service.d.ts +5 -4
  37. package/modal/lib/modal.component.d.ts +2 -0
  38. package/modal/lib/modal.service.d.ts +4 -2
  39. package/modal/lib/modal.types.d.ts +15 -1
  40. package/package.json +1 -1
  41. package/scheduler/index.d.ts +5 -2
  42. package/scheduler/lib/scheduler.class.d.ts +53 -0
  43. package/scheduler/lib/scheduler.component.d.ts +75 -22
  44. package/scheduler/lib/scheduler.module.d.ts +5 -9
  45. package/scheduler/lib/scheduler.service.d.ts +61 -0
  46. package/scheduler/lib/views/day/scheduler-day-view.component.d.ts +35 -0
  47. package/scheduler/lib/views/month/scheduler-month-view.component.d.ts +45 -0
  48. package/scheduler/lib/views/week/scheduler-week-view.component.d.ts +42 -0
  49. package/tree-view/lib/tree-view.component.d.ts +4 -2
  50. package/fesm2022/acorex-components-modal-acorex-components-modal-Bs1CnBt8.mjs.map +0 -1
  51. package/fesm2022/acorex-components-modal-modal-content.component-DhpujG4d.mjs +0 -181
  52. package/fesm2022/acorex-components-modal-modal-content.component-DhpujG4d.mjs.map +0 -1
  53. package/scheduler/lib/scheduler-month-view.component.d.ts +0 -41
  54. package/scheduler/lib/scheduler-week-view.component.d.ts +0 -10
@@ -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 { AXCalendarService, AXDateTimePipe, AXDateTimeModule } from '@acorex/core/date-time';
8
- import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
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, EventEmitter, forwardRef, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
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.buttonText = '';
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.editingDateObj.format(this._parts.year.placeholder),
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.editingDateObj.format(this._parts.month.placeholder),
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', 'dddd', 'DDDD'],
90
+ placeholders: ['dd', 'd', 'E', 'dddd'],
91
91
  enabled: false,
92
92
  default: 1,
93
- realValue: () => this.editingDateObj.format(this._parts.day.placeholder),
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.editingDateObj.format(this._parts.hour.placeholder),
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.editingDateObj.format(this._parts.minute.placeholder),
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.editingDateObj.format(this._parts.second.placeholder),
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
- * @ignore
126
- */
127
- this._editingDateObj = this._calendarService.now(this.type);
132
+ this._activePart = signal('date');
133
+ // /**
134
+ // * @ignore
135
+ // */
136
+ this._editingDateObj = linkedSignal(() => this.calendarService.now(this.calendar()));
128
137
  /**
129
- * Emits an event when the format changes.
130
- *
131
- * @event
138
+ * @description The calendar type to use for the datetime input.
132
139
  */
133
- this.formatChange = new EventEmitter();
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
- * @ignore
153
+ * @deprecated use locale & mode instead
136
154
  */
137
- this._format = this.calendarService.calendar.formats.dateTimeDisplay;
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
- get editingDateObj() {
168
- return this._editingDateObj;
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._calendarService.isDate(value)) {
205
- this._editingDateObj = this._calendarService.create(value);
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 = this._calendarService.now(this.type);
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 = e.tab.key;
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 = this._editingDateObj.set(part, Number(e.value['id']));
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.type);
251
+ const selectedValue = this.calendarService.create(e.value, this.calendar());
249
252
  const currentValue = this.calendarService
250
- .create(e.value, this.type)
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 = currentValue;
257
+ this._editingDateObj.set(currentValue);
255
258
  if (this._hasTimePart) {
256
- this._activePart = 'time';
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.editingDateObj.date, true);
264
+ this.commitValue(this._editingDateObj().date, true);
262
265
  }
263
266
  }
264
267
  else {
265
- this.commitValue(this.editingDateObj.date, true);
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.format.split(/[^a-zA-Z]+/);
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._activePart = this._hasDatePart ? 'date' : 'time';
285
- this.cdr.markForCheck();
287
+ //this.cdr.markForCheck();
286
288
  }
287
289
  /**
288
290
  * @ignore
289
291
  */
290
292
  _handleSetClick() {
291
- this.commitValue(this.editingDateObj.date, true);
293
+ this.commitValue(this._editingDateObj().date, true);
292
294
  }
293
295
  /**
294
296
  * @ignore
295
297
  */
296
298
  _handleNowClick() {
297
- this._editingDateObj = this._calendarService.now(this.type);
298
- this.commitValue(this.editingDateObj.date, true);
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: false, 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", formatChange: "formatChange" }, providers: [
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]=\"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]=\"type\"\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 | axDate: format : type }}\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 [text]=\"buttonText | translate | async\" class=\"ax-sm\" (onClick)=\"_handleNowClick()\" [disabled]=\"isTodayDisabled()\"></ax-button>\n }\n </div>\n <div>\n @if (_hasTimePart) {\n <ax-button color=\"primary\" [text]=\"'dateTime.set' | translate | async\" class=\"ax-sm\" (onClick)=\"_handleSetClick()\"></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}@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: AXDateTimePipe, name: "axDate" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
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
- AXDateTimePipe,
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]=\"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]=\"type\"\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 | axDate: format : type }}\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 [text]=\"buttonText | translate | async\" class=\"ax-sm\" (onClick)=\"_handleNowClick()\" [disabled]=\"isTodayDisabled()\"></ax-button>\n }\n </div>\n <div>\n @if (_hasTimePart) {\n <ax-button color=\"primary\" [text]=\"'dateTime.set' | translate | async\" class=\"ax-sm\" (onClick)=\"_handleSetClick()\"></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}@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"] }]
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];