@acorex/components 21.0.2-next.35 → 21.0.2-next.37

package/fesm2022/acorex-components-datetime-picker.mjs

@@ -8,7 +8,7 @@ import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
 import { AXTranslatorPipe } from '@acorex/core/translation';
 import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, signal, linkedSignal, effect, forwardRef, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { InjectionToken, inject, input, computed, signal, linkedSignal, effect, untracked, forwardRef, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
@@ -43,20 +43,20 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
     constructor() {
         super(...arguments);
         this.formatService = inject(AXFormatService);
-        this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : []));
-        this.weekdays = input([], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
+        this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : /* istanbul ignore next */ []));
+        this.weekdays = input([], ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
         /**
          * Day view navigation style of the embedded calendar.
          */
-        this.calendarLook = input('select', ...(ngDevMode ? [{ debugName: "calendarLook" }] : []));
-        this.buttonText = computed(() => (this._activePart() === 'date' ? 'dateTime.today' : 'dateTime.now'), ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+        this.calendarLook = input('select', ...(ngDevMode ? [{ debugName: "calendarLook" }] : /* istanbul ignore next */ []));
+        this.buttonText = computed(() => (this._activePart() === 'date' ? 'dateTime.today' : 'dateTime.now'), ...(ngDevMode ? [{ debugName: "buttonText" }] : /* istanbul ignore next */ []));
         this.defaultConfig = inject(AX_DATETIME_PICKER_CONFIG);
-        this.pickerHoursMinValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerHoursMinValue" }] : []));
-        this.pickerHoursMaxValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerHoursMaxValue" }] : []));
-        this.pickerMinuteMinValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerMinuteMinValue" }] : []));
-        this.pickerMinuteMaxValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerMinuteMaxValue" }] : []));
-        this.pickerSecondMinValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerSecondMinValue" }] : []));
-        this.pickerSecondMaxValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerSecondMaxValue" }] : []));
+        this.pickerHoursMinValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerHoursMinValue" }] : /* istanbul ignore next */ []));
+        this.pickerHoursMaxValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerHoursMaxValue" }] : /* istanbul ignore next */ []));
+        this.pickerMinuteMinValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerMinuteMinValue" }] : /* istanbul ignore next */ []));
+        this.pickerMinuteMaxValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerMinuteMaxValue" }] : /* istanbul ignore next */ []));
+        this.pickerSecondMinValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerSecondMinValue" }] : /* istanbul ignore next */ []));
+        this.pickerSecondMaxValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerSecondMaxValue" }] : /* istanbul ignore next */ []));
         /**
          *  @ignore
          */
@@ -93,7 +93,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
             day: {
                 key: 'day',
                 placeholder: 'dd',
-                placeholders: ['dd', 'd', 'E', 'dddd'],
+                placeholders: ['dd', 'DD', 'd', 'E', 'dddd'],
                 enabled: false,
                 default: 1,
                 realValue: () => this.formatService.format(this.editingDateObj(), 'datetime', this._parts.day.placeholder),
@@ -135,17 +135,17 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
         /**
          *  @ignore
          */
-        this._activePart = signal('date', ...(ngDevMode ? [{ debugName: "_activePart" }] : []));
+        this._activePart = signal('date', ...(ngDevMode ? [{ debugName: "_activePart" }] : /* istanbul ignore next */ []));
         // /**
         //  *  @ignore
         //  */
-        this.editingDateObj = linkedSignal(() => this.calendarService.now(this.calendar()), ...(ngDevMode ? [{ debugName: "editingDateObj" }] : []));
         /**
          * @description The calendar type to use for the datetime input.
          */
-        this.calendar = input(null, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
-        this._calendarSystem = linkedSignal(() => this.calendar() ?? this.type, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
-        this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : []));
+        this.calendar = input(null, ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+        this._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : /* istanbul ignore next */ []));
+        this.editingDateObj = linkedSignal(() => this.calendarService.now(this._calendarSystem()), ...(ngDevMode ? [{ debugName: "editingDateObj" }] : /* istanbul ignore next */ []));
+        this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
         this.#effectPicker = effect(() => {
             if (this.picker() === 'time') {
                 this.checkSelectedMinValue(this.editingDateObj());
@@ -155,27 +155,24 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
             else if (this.picker() === 'date') {
                 this._activePart.set('date');
             }
-        }, ...(ngDevMode ? [{ debugName: "#effectPicker" }] : []));
-        this._format = linkedSignal(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_format" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#effectPicker" }] : /* istanbul ignore next */ []));
+        this._resolvedFormat = computed(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : /* istanbul ignore next */ []));
         /**
          * @deprecated use locale & mode instead
          */
-        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
         this.#effect = effect(() => {
-            const profile = this.localeService.activeProfile();
-            //
-            if (!this.format()) {
-                this._format.set(this.format() ?? profile.formats[this.picker()]?.short ?? '');
-            }
-            //
-            if (!this.calendar()) {
-                this._calendarSystem.set(profile.calendar.system);
-            }
-            //
-            this.type = this._calendarSystem();
-            //
+            const system = this._calendarSystem();
+            this._resolvedFormat();
+            this.type = system;
             this._detectParts();
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+            untracked(() => {
+                const current = this.editingDateObj();
+                if (current) {
+                    this.editingDateObj.set(this.calendarService.create(current.date, system));
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     }
     /**
      * Determines whether a button for selecting the current time is displayed.
@@ -226,14 +223,14 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
     internalValueChanged(value) {
         try {
             if (this.calendarService.isValidDate(value)) {
-                this.editingDateObj.set(this.calendarService.create(value, this.calendar()));
+                this.editingDateObj.set(this.calendarService.create(value, this._calendarSystem()));
             }
             else {
                 throw new Error();
             }
         }
         catch {
-            this.editingDateObj.set(this.calendarService.now(this.calendar()));
+            this.editingDateObj.set(this.calendarService.now(this._calendarSystem()));
         }
     }
     /**
@@ -249,7 +246,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
         if (e.isUserInteraction) {
             this.editingDateObj.set(this.editingDateObj().set(part, Number(e.value['id'])));
             if (this.minValue) {
-                const minv = this.calendarService.convert(this.minValue, this.calendar());
+                const minv = this.calendarService.convert(this.minValue, this._calendarSystem());
                 // Only apply minute restrictions if we're on the same day and same hour
                 if (this.editingDateObj().isAfter(this.minValue, 'day') || this.editingDateObj().hour > minv.hour) {
                     this.pickerMinuteMinValue.set(null);
@@ -259,7 +256,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
                 }
             }
             if (this.maxValue) {
-                const maxv = this.calendarService.convert(this.maxValue, this.calendar());
+                const maxv = this.calendarService.convert(this.maxValue, this._calendarSystem());
                 // Only apply minute restrictions if we're on the same day and same hour
                 if (this.editingDateObj().isBefore(this.maxValue, 'day') || this.editingDateObj().hour < maxv.hour) {
                     this.pickerMinuteMaxValue.set(null);
@@ -281,9 +278,9 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
      */
     _handleCalendarOnValueChanged(e) {
         if (e.isUserInteraction) {
-            const selectedValue = this.calendarService.create(e.value, this.calendar());
+            const selectedValue = this.calendarService.create(e.value, this._calendarSystem());
             const currentValue = this.calendarService
-                .create(e.value, this.calendar())
+                .create(e.value, this._calendarSystem())
                 .set('day', selectedValue.dayOfMonth)
                 .set('month', selectedValue.monthOfYear)
                 .set('year', selectedValue.year);
@@ -315,7 +312,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
             this.pickerSecondMinValue.set(null);
         }
         else {
-            const minv = this.calendarService.convert(this.minValue, this.calendar());
+            const minv = this.calendarService.convert(this.minValue, this._calendarSystem());
             this.pickerHoursMinValue.set(minv.hour);
             this.pickerMinuteMinValue.set(minv.minute);
             this.pickerSecondMinValue.set(minv.second);
@@ -332,7 +329,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
             this.pickerSecondMaxValue.set(null);
         }
         else {
-            const maxv = this.calendarService.convert(this.maxValue, this.calendar());
+            const maxv = this.calendarService.convert(this.maxValue, this._calendarSystem());
             this.pickerHoursMaxValue.set(maxv.hour);
             this.pickerMinuteMaxValue.set(maxv.minute);
             this.pickerSecondMaxValue.set(maxv.second);
@@ -345,7 +342,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
         Object.values(this._parts).forEach((e) => {
             e.enabled = false;
         });
-        const formatParts = this._format().split(/[^a-zA-Z]+/);
+        const formatParts = this._resolvedFormat().split(/[^a-zA-Z]+/);
         formatParts.forEach((f) => {
             const found = Object.values(this._parts).find((c) => c.placeholders.some((d) => d == f));
             if (found) {
@@ -367,7 +364,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
      *  @ignore
      */
     _handleNowClick() {
-        this.editingDateObj.set(this.calendarService.now(this.calendar()));
+        this.editingDateObj.set(this.calendarService.now(this._calendarSystem()));
         this.commitValue(this.editingDateObj().date, true);
         this.checkSelectedMinValue(this.editingDateObj());
         this.checkSelectedMaxValue(this.editingDateObj());
@@ -391,9 +388,9 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
         if (!value || !this.calendarService.isValidDate(value)) {
             return null;
         }
-        const v = this.calendarService.convert(value, this.calendar());
-        this.checkSelectedMinValue(this.calendarService.convert(v, this.calendar()));
-        this.checkSelectedMaxValue(this.calendarService.convert(v, this.calendar()));
+        const v = this.calendarService.convert(value, this._calendarSystem());
+        this.checkSelectedMinValue(this.calendarService.convert(v, this._calendarSystem()));
+        this.checkSelectedMaxValue(this.calendarService.convert(v, this._calendarSystem()));
         if (this.isDisabled(v)) {
             return null;
         }
@@ -418,8 +415,8 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
             return today.getTime() === disabled.getTime();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, calendarLook: { classPropertyName: "calendarLook", publicName: "calendarLook", 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" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, calendarLook: { classPropertyName: "calendarLook", publicName: "calendarLook", 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" }, providers: [
             { provide: AXComponent, useExisting: AXDateTimePickerComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimePickerComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimePickerComponent },
@@ -428,9 +425,9 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
                 useExisting: forwardRef(() => AXDateTimePickerComponent),
                 multi: true,
             },
-        ], 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\n        [text]=\"'@acorex:dateTime.date' | translate | async\"\n        [key]=\"'date'\"\n        [disabled]=\"disabled\"\n      ></ax-tab-item>\n      <ax-tab-item\n        [text]=\"'@acorex:dateTime.time' | translate | async\"\n        [key]=\"'time'\"\n        [disabled]=\"disabled\"\n      ></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        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\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        [look]=\"calendarLook()\"\n      >\n      </ax-calendar>\n    </div>\n  }\n\n  @if (_activePart() === 'time') {\n    <div class=\"ax-picker-part\">\n      <div class=\"ax-header\">\n        @if (picker() === 'datetime') {\n          {{ editingDateObj() | format: 'time' : 'short' | async }}\n          {{ editingDateObj() | format: 'date' : 'short' | async }}\n        } @else {\n          {{ editingDateObj() | format: picker() : 'medium' | async }}\n        }\n      </div>\n      <div dir=\"ltr\" class=\"ax-picker-time-container\">\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      </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]=\"`@acorex:${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]=\"'@acorex: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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerHoursMinValue()\"\n      [maxValue]=\"pickerHoursMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerMinuteMinValue()\"\n      [maxValue]=\"pickerMinuteMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerSecondMinValue()\"\n      [maxValue]=\"pickerSecondMaxValue()\"\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{width:100%;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", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look"], 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", "minValue", "maxValue"], 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 }); }
+        ], 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\n        [text]=\"'@acorex:dateTime.date' | translate | async\"\n        [key]=\"'date'\"\n        [disabled]=\"disabled\"\n      ></ax-tab-item>\n      <ax-tab-item\n        [text]=\"'@acorex:dateTime.time' | translate | async\"\n        [key]=\"'time'\"\n        [disabled]=\"disabled\"\n      ></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        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\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        [look]=\"calendarLook()\"\n      >\n      </ax-calendar>\n    </div>\n  }\n\n  @if (_activePart() === 'time') {\n    <div class=\"ax-picker-part\">\n      <div class=\"ax-header\">\n        @if (picker() === 'datetime') {\n          {{ editingDateObj() | format: 'time' : 'short' | async }}\n          {{ editingDateObj() | format: 'date' : 'short' | async }}\n        } @else {\n          {{ editingDateObj() | format: picker() : 'medium' | async }}\n        }\n      </div>\n      <div dir=\"ltr\" class=\"ax-picker-time-container\">\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      </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]=\"`@acorex:${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]=\"'@acorex: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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerHoursMinValue()\"\n      [maxValue]=\"pickerHoursMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerMinuteMinValue()\"\n      [maxValue]=\"pickerMinuteMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerSecondMinValue()\"\n      [maxValue]=\"pickerSecondMaxValue()\"\n    ></ax-picker-items>\n  </ax-picker-container>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-datetime-picker{flex-direction:column;display:flex}ax-datetime-picker>.ax-header{padding-top:calc(var(--spacing,.25rem) * 2);padding-right:calc(var(--spacing,.25rem) * 2);padding-left:calc(var(--spacing,.25rem) * 2);justify-content:center;display:flex}ax-datetime-picker>.ax-content{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}@media(min-width:768px){ax-datetime-picker>.ax-content{width:calc(var(--spacing,.25rem) * 80)}}ax-datetime-picker>.ax-content .ax-picker-part{flex-direction:column;width:100%;height:376px;display:flex}ax-datetime-picker>.ax-content .ax-picker-part .ax-picker-time-container{height:100%;display:flex}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{border-bottom-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-bottom-width:1px;border-bottom-color:rgba(var(--ax-sys-color-border-surface));padding:calc(var(--spacing,.25rem) * 3);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1}ax-datetime-picker>.ax-content .ax-calendar-part{width:100%;padding-top:var(--spacing,.25rem);padding-bottom:var(--spacing,.25rem)}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));padding:calc(var(--spacing,.25rem) * 2);justify-content:space-between;display:flex}ax-datetime-picker>.ax-footer ax-button{min-width:100%}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\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", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look"], 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", "minValue", "maxValue"], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [
                         'disabled',
@@ -490,20 +487,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AsyncPipe,
                         AXFormatPipe,
                         AXTranslatorPipe,
-                    ], 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\n        [text]=\"'@acorex:dateTime.date' | translate | async\"\n        [key]=\"'date'\"\n        [disabled]=\"disabled\"\n      ></ax-tab-item>\n      <ax-tab-item\n        [text]=\"'@acorex:dateTime.time' | translate | async\"\n        [key]=\"'time'\"\n        [disabled]=\"disabled\"\n      ></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        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\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        [look]=\"calendarLook()\"\n      >\n      </ax-calendar>\n    </div>\n  }\n\n  @if (_activePart() === 'time') {\n    <div class=\"ax-picker-part\">\n      <div class=\"ax-header\">\n        @if (picker() === 'datetime') {\n          {{ editingDateObj() | format: 'time' : 'short' | async }}\n          {{ editingDateObj() | format: 'date' : 'short' | async }}\n        } @else {\n          {{ editingDateObj() | format: picker() : 'medium' | async }}\n        }\n      </div>\n      <div dir=\"ltr\" class=\"ax-picker-time-container\">\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      </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]=\"`@acorex:${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]=\"'@acorex: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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerHoursMinValue()\"\n      [maxValue]=\"pickerHoursMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerMinuteMinValue()\"\n      [maxValue]=\"pickerMinuteMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerSecondMinValue()\"\n      [maxValue]=\"pickerSecondMaxValue()\"\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{width:100%;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"] }]
-        }], propDecorators: { currentTimeButton: [{
+                    ], 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\n        [text]=\"'@acorex:dateTime.date' | translate | async\"\n        [key]=\"'date'\"\n        [disabled]=\"disabled\"\n      ></ax-tab-item>\n      <ax-tab-item\n        [text]=\"'@acorex:dateTime.time' | translate | async\"\n        [key]=\"'time'\"\n        [disabled]=\"disabled\"\n      ></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        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\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        [look]=\"calendarLook()\"\n      >\n      </ax-calendar>\n    </div>\n  }\n\n  @if (_activePart() === 'time') {\n    <div class=\"ax-picker-part\">\n      <div class=\"ax-header\">\n        @if (picker() === 'datetime') {\n          {{ editingDateObj() | format: 'time' : 'short' | async }}\n          {{ editingDateObj() | format: 'date' : 'short' | async }}\n        } @else {\n          {{ editingDateObj() | format: picker() : 'medium' | async }}\n        }\n      </div>\n      <div dir=\"ltr\" class=\"ax-picker-time-container\">\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      </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]=\"`@acorex:${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]=\"'@acorex: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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerHoursMinValue()\"\n      [maxValue]=\"pickerHoursMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerMinuteMinValue()\"\n      [maxValue]=\"pickerMinuteMaxValue()\"\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>{{ '@acorex:dateTime.units.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      [minValue]=\"pickerSecondMinValue()\"\n      [maxValue]=\"pickerSecondMaxValue()\"\n    ></ax-picker-items>\n  </ax-picker-container>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-datetime-picker{flex-direction:column;display:flex}ax-datetime-picker>.ax-header{padding-top:calc(var(--spacing,.25rem) * 2);padding-right:calc(var(--spacing,.25rem) * 2);padding-left:calc(var(--spacing,.25rem) * 2);justify-content:center;display:flex}ax-datetime-picker>.ax-content{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}@media(min-width:768px){ax-datetime-picker>.ax-content{width:calc(var(--spacing,.25rem) * 80)}}ax-datetime-picker>.ax-content .ax-picker-part{flex-direction:column;width:100%;height:376px;display:flex}ax-datetime-picker>.ax-content .ax-picker-part .ax-picker-time-container{height:100%;display:flex}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{border-bottom-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-bottom-width:1px;border-bottom-color:rgba(var(--ax-sys-color-border-surface));padding:calc(var(--spacing,.25rem) * 3);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1}ax-datetime-picker>.ax-content .ax-calendar-part{width:100%;padding-top:var(--spacing,.25rem);padding-bottom:var(--spacing,.25rem)}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));padding:calc(var(--spacing,.25rem) * 2);justify-content:space-between;display:flex}ax-datetime-picker>.ax-footer ax-button{min-width:100%}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }], calendarLook: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLook", required: false }] }], currentTimeButton: [{
                 type: Input
             }], tabs: [{
                 type: ViewChild,
                 args: [AXTabsComponent]
-            }] } });
+            }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], picker: [{ type: i0.Input, args: [{ isSignal: true, alias: "picker", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
 
 class AXDateTimePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimePickerModule, imports: [AXDateTimePickerComponent], exports: [AXDateTimePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimePickerModule, imports: [AXDateTimePickerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimePickerModule, imports: [AXDateTimePickerComponent], exports: [AXDateTimePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimePickerModule, imports: [AXDateTimePickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXDateTimePickerComponent],