@acorex/platform 20.0.13 → 20.0.21

package/fesm2022/acorex-platform-widgets.mjs

@@ -20,7 +20,7 @@ import { AXLabelModule } from '@acorex/components/label';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { AXPClipBoardService, AXPRegionalService, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
+import { AXPClipBoardService, AXPSettingService, AXPRegionalService, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i3 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
@@ -31,7 +31,7 @@ import { AXTranslationModule, AXTranslationService } from '@acorex/core/translat
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXBasePageComponent } from '@acorex/components/page';
-import { AXDateTimeFormatter, AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
+import { AXFormatService } from '@acorex/core/format';
 import * as i3$1 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import * as i5 from '@acorex/components/text-area';
@@ -39,7 +39,6 @@ import { AXTextAreaModule } from '@acorex/components/text-area';
 import { set, isNumber, castArray, cloneDeep, isEqual, sum, get } from 'lodash-es';
 import * as i4$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import { AXFormatService } from '@acorex/core/format';
 import * as i1$4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$2 from '@acorex/components/password-box';
@@ -90,6 +89,7 @@ import { AXColorUtil } from '@acorex/core/utils';
 import * as i6$3 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXDataTableModule } from '@acorex/components/data-table';
+import { AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i2$a from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
 import * as i1$c from '@acorex/components/collapse';
@@ -1834,9 +1834,10 @@ const AXPContactWidget = {
 class AXPDateTimeBoxWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.formatter = inject(AXDateTimeFormatter);
-        this.translationService = inject(AXTranslationService);
+        this.formatter = inject(AXFormatService);
+        this.settingService = inject(AXPSettingService);
         this.multiple = computed(() => this.options()['multiple']);
+        this.convertedValue = signal(null);
         this.format = computed(() => {
             const rawValue = this.options()['format'];
             if (typeof rawValue == 'string')
@@ -1846,28 +1847,47 @@ class AXPDateTimeBoxWidgetViewComponent extends AXPValueWidgetComponent {
             else
                 return 'date';
         });
-        this.internalValue = computed(() => Array.isArray(this.getValue())
-            ? this.getValue().map((v) => this.handleFormat(v))
-            : [this.handleFormat(this.getValue())]);
+        this.#effect = effect(() => {
+            this.updateValue();
+        });
+        this.updateValue = async () => {
+            const rawValue = this.getValue();
+            if (rawValue == null) {
+                this.convertedValue.set(null);
+            }
+            if (this.isArray(rawValue)) {
+                this.convertedValue.set(rawValue.map((item) => this.handleFormat(item)).join(', '));
+            }
+            else {
+                this.convertedValue.set(await this.handleFormat(rawValue));
+            }
+        };
     }
-    handleFormat(value) {
+    #effect;
+    async handleFormat(value) {
+        let mode = '';
+        if (this.format() == 'date') {
+            mode = await this.settingService.get('regional:short-date');
+        }
+        else if (this.format() == 'time') {
+            mode = await this.settingService.get('regional:short-time');
+        }
+        else if (this.format() == 'datetime') {
+            mode = `${await this.settingService.get('regional:short-date')} ${await this.settingService.get('regional:short-time')}`;
+        }
         return value
-            ? this.formatter.format(new Date(value), {
-                format: this.format(),
-                locale: this.translationService.getActiveLang() === 'fa' ? 'fa' : undefined,
+            ? this.formatter.format(new Date(value), this.format(), {
+                format: mode,
             })
             : '---';
     }
+    isArray(val) {
+        return Array.isArray(val);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDateTimeBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-text-muted">
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-        <span dir="ltr" >{{ item }}</span>
-      } 
-      } @else {
-        <span dir="ltr" >{{ internalValue()[0] }}</span>
-      }
+      <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1876,18 +1896,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     template: `
     <div class="ax-text-muted">
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-        <span dir="ltr" >{{ item }}</span>
-      } 
-      } @else {
-        <span dir="ltr" >{{ internalValue()[0] }}</span>
-      }
+      <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
-                    inputs: []
+                    inputs: [],
                 }]
         }] });
 
@@ -1900,6 +1914,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.validationService = inject(AXValidationService);
+        this.settingService = inject(AXPSettingService);
         this.multiple = computed(() => this.options()['multiple']);
         this.clearButton = computed(() => this.options()['clearButton']);
         this.format = computed(() => {
@@ -1914,13 +1929,19 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.disabled = computed(() => this.options()['disabled']);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
-        this.calendarFormat = computed(() => {
-            if (this.format() === 'date')
-                return 'DD/MM/YYYY';
-            else if (this.format() === 'time')
-                return 'HH:mm';
-            else
-                return 'DD/MM/YYYY HH:mm';
+        this.calendarFormat = signal('date');
+        this.#effect = effect(async () => {
+            let mode = '';
+            if (this.format() == 'date') {
+                mode = await this.settingService.get('regional:short-date');
+            }
+            else if (this.format() == 'time') {
+                mode = await this.settingService.get('regional:short-time');
+            }
+            else if (this.format() == 'datetime') {
+                mode = `${await this.settingService.get('regional:short-date')} ${await this.settingService.get('regional:short-time')}`;
+            }
+            this.calendarFormat.set(mode);
         });
     }
     handleValueChange(e, i) {
@@ -1932,6 +1953,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
                 this.setValue(newValues[0]);
         }
     }
+    #effect;
     addItem() {
         const newValues = [...this.internalValue(), ''];
         this.setValue(newValues);
@@ -2041,7 +2063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         AXDateTimeBoxModule,
                         AXButtonModule,
                         AXDecoratorModule,
-                        AXValidationModule
+                        AXValidationModule,
                     ],
                     inputs: [],
                 }]
@@ -2077,9 +2099,10 @@ var dateTimeBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.formatter = inject(AXDateTimeFormatter);
-        this.translationService = inject(AXTranslationService);
-        this.multiple = this.options['multiple'];
+        this.formatter = inject(AXFormatService);
+        this.settingService = inject(AXPSettingService);
+        this.convertedValue = signal(this.rawValue);
+        this.multiple = this.options['multiple'] || false;
         this.format = computed(() => {
             const rawValue = this.options['format'];
             if (typeof rawValue == 'string')
@@ -2089,28 +2112,53 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
             else
                 return 'date';
         });
-        this.internalValue = () => Array.isArray(this.rawValue)
-            ? this.rawValue.map((v) => this.handleFormat(v))
-            : [this.handleFormat(this.rawValue)];
+        this.#effect = effect(() => {
+            this.updateValue();
+        });
+        this.updateValue = async () => {
+            const rawValue = this.rawValue;
+            if (rawValue == null) {
+                this.convertedValue.set(null);
+            }
+            if (this.isArray(rawValue)) {
+                this.convertedValue.set(rawValue.map((item) => this.handleFormat(item)).join(', '));
+            }
+            else {
+                this.convertedValue.set(await this.handleFormat(rawValue));
+            }
+        };
     }
-    handleFormat(value) {
+    #effect;
+    async handleFormat(value) {
+        let mode = '';
+        if (this.format() == 'date') {
+            mode = await this.settingService.get('regional:short-date');
+        }
+        else if (this.format() == 'time') {
+            mode = await this.settingService.get('regional:short-time');
+        }
+        else if (this.format() == 'datetime') {
+            mode = `${await this.settingService.get('regional:short-date')} ${await this.settingService.get('regional:short-time')}`;
+        }
         return value
-            ? this.formatter.format(new Date(value), {
-                format: this.format(),
-                locale: this.translationService.getActiveLang() === 'fa' ? 'fa' : undefined,
+            ? this.formatter.format(new Date(value), this.format(), {
+                format: mode,
             })
             : '---';
     }
+    isArray(val) {
+        return Array.isArray(val);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex">
-    <span [dir]="'ltr'" [title]="internalValue()">{{ internalValue() }}</span>
+    <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div class="ax-flex">
-    <span [dir]="'ltr'" [title]="internalValue()">{{ internalValue() }}</span>
+    <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],