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

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';
@@ -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),
@@ -139,12 +139,12 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
         // /**
         //  *  @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._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
+        this.editingDateObj = linkedSignal(() => this.calendarService.now(this._calendarSystem()), ...(ngDevMode ? [{ debugName: "editingDateObj" }] : []));
         this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : []));
         this.#effectPicker = effect(() => {
             if (this.picker() === 'time') {
@@ -156,25 +156,22 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
                 this._activePart.set('date');
             }
         }, ...(ngDevMode ? [{ debugName: "#effectPicker" }] : []));
-        this._format = linkedSignal(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_format" }] : []));
+        this._resolvedFormat = computed(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : []));
         /**
          * @deprecated use locale & mode instead
          */
         this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
         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();
+            untracked(() => {
+                const current = this.editingDateObj();
+                if (current) {
+                    this.editingDateObj.set(this.calendarService.create(current.date, system));
+                }
+            });
         }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
     }
     /**
@@ -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;
         }