@acorex/platform 20.6.0-next.25 → 20.6.0-next.27

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -21297,10 +21297,35 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.calendarService = inject(AXCalendarService);
+        this.settingService = inject(AXPSettingService);
         this.selectBox = viewChild('selectBox', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
         this.value = computed(() => this.convertISODateToDate(this.getValue()?.value), ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.operation = computed(() => this.getValue()?.operation, ...(ngDevMode ? [{ debugName: "operation" }] : []));
         this.filterTypeSelectedItem = signal('', ...(ngDevMode ? [{ debugName: "filterTypeSelectedItem" }] : []));
+        this.dateMode = computed(() => this.options()['mode'] || 'short', ...(ngDevMode ? [{ debugName: "dateMode" }] : []));
+        this.format = computed(() => {
+            const rawValue = this.options()['format'];
+            if (typeof rawValue == 'string')
+                return rawValue;
+            else if (rawValue && typeof rawValue == 'object')
+                return rawValue['id'];
+            else
+                return 'date';
+        }, ...(ngDevMode ? [{ debugName: "format" }] : []));
+        this.calendarFormat = signal('date', ...(ngDevMode ? [{ debugName: "calendarFormat" }] : []));
+        this.#effect = effect(async () => {
+            let mode = '';
+            if (this.format() == 'date') {
+                mode = await this.settingService.get(`regional:${this.dateMode()}-date`);
+            }
+            else if (this.format() == 'time') {
+                mode = await this.settingService.get(`regional:${this.dateMode()}-time`);
+            }
+            else if (this.format() == 'datetime') {
+                mode = `${await this.settingService.get(`regional:${this.dateMode()}-date`)} ${await this.settingService.get(`regional:${this.dateMode()}-time`)}`;
+            }
+            this.calendarFormat.set(mode);
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
         this.filterTypeDataSource = [
             'Today',
             'This Week',
@@ -21325,6 +21350,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
         };
         this.formatCamelCaseToUpper = (input) => input?.replace(/([a-z])([A-Z])/g, '$1 $2')?.replace(/\b\w/g, (char) => char.toUpperCase());
     }
+    #effect;
     ngAfterViewInit() {
         const availableTypes = ['between', 'greaterThan', 'lessThan'];
         if (availableTypes.includes(this.operation())) {
@@ -21495,7 +21521,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
       @if (filterTypeSelectedItem() === 'Between') {
         <div class="ax-flex ax-gap-2 ax-mt-2">
           <ax-datetime-box
-            format="YYYY/MM/DD"
+            [format]="calendarFormat()"
             [placeholder]="'@general:terms.common.from' | translate | async"
             [ngModel]="value()?.from"
             (onValueChanged)="handleValueChange($event, 'from')"
@@ -21503,7 +21529,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
             <ax-clear-button></ax-clear-button>
           </ax-datetime-box>
           <ax-datetime-box
-            format="YYYY/MM/DD"
+            [format]="calendarFormat()"
             [placeholder]="'@general:terms.common.to' | translate | async"
             [ngModel]="value()?.to"
             (onValueChanged)="handleValueChange($event, 'to')"
@@ -21514,7 +21540,11 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
       }
       @if (filterTypeSelectedItem() === 'Greater Than' || filterTypeSelectedItem() === 'Less Than') {
         <div class="ax-w-full ax-mt-2">
-          <ax-datetime-box format="YYYY/MM/DD" [ngModel]="value()" (onValueChanged)="handleValueChange($event, 'self')">
+          <ax-datetime-box
+            [format]="calendarFormat()"
+            [ngModel]="value()"
+            (onValueChanged)="handleValueChange($event, 'self')"
+          >
             <ax-clear-button></ax-clear-button>
           </ax-datetime-box>
         </div>
@@ -21539,7 +21569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       @if (filterTypeSelectedItem() === 'Between') {
         <div class="ax-flex ax-gap-2 ax-mt-2">
           <ax-datetime-box
-            format="YYYY/MM/DD"
+            [format]="calendarFormat()"
             [placeholder]="'@general:terms.common.from' | translate | async"
             [ngModel]="value()?.from"
             (onValueChanged)="handleValueChange($event, 'from')"
@@ -21547,7 +21577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             <ax-clear-button></ax-clear-button>
           </ax-datetime-box>
           <ax-datetime-box
-            format="YYYY/MM/DD"
+            [format]="calendarFormat()"
             [placeholder]="'@general:terms.common.to' | translate | async"
             [ngModel]="value()?.to"
             (onValueChanged)="handleValueChange($event, 'to')"
@@ -21558,7 +21588,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       }
       @if (filterTypeSelectedItem() === 'Greater Than' || filterTypeSelectedItem() === 'Less Than') {
         <div class="ax-w-full ax-mt-2">
-          <ax-datetime-box format="YYYY/MM/DD" [ngModel]="value()" (onValueChanged)="handleValueChange($event, 'self')">
+          <ax-datetime-box
+            [format]="calendarFormat()"
+            [ngModel]="value()"
+            (onValueChanged)="handleValueChange($event, 'self')"
+          >
             <ax-clear-button></ax-clear-button>
           </ax-datetime-box>
         </div>
@@ -22015,22 +22049,26 @@ class AXPTimeDurationFilterComponent extends AXPValueWidgetComponent {
             path: this.editorPath,
         }, ...(ngDevMode ? [{ debugName: "timeDurationNode" }] : []));
         this.#efUpdateTimeDurationNode = effect(() => {
-            const node = {
-                type: 'time-duration',
-                path: this.editorPath,
-                options: {
-                    hasClearButton: this.hasClearButton(),
-                    from: { title: 'HOUR' },
-                    to: { title: 'MINUTE' },
-                },
-            };
-            this.timeDurationNode.set(node);
+            untracked(async () => {
+                const node = {
+                    type: 'time-duration',
+                    path: this.editorPath,
+                    defaultValue: this.value(),
+                    options: {
+                        from: { title: 'HOUR' },
+                        to: { title: 'MINUTE' },
+                    },
+                };
+                this.timeDurationNode.set(node);
+            });
         }, ...(ngDevMode ? [{ debugName: "#efUpdateTimeDurationNode" }] : []));
         this.displayText = async () => {
             return await this.timeDurationFormatter.millisecondsToMask(this.value(), 'HOUR', 'MINUTE', false, '00:00:00:00:00:00:00:000', true);
         };
         this.#efUpdateValue = effect(async () => {
             const newValue = this.contextService.getValue(this.editorPath);
+            if (!newValue)
+                return;
             untracked(async () => {
                 this.setValue({
                     value: newValue,