@acorex/platform 19.1.13 → 19.1.14

package/fesm2022/acorex-platform-widgets.mjs

@@ -12,7 +12,7 @@ import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, InjectionToken, ViewChild, untracked, ChangeDetectorRef, ElementRef, viewChild, afterRender, afterNextRender, NgZone, model, input, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, InjectionToken, ViewChild, untracked, ChangeDetectorRef, ElementRef, viewChild, afterNextRender, afterRender, NgZone, model, input, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i3$1 from '@acorex/components/form';
@@ -5394,12 +5394,12 @@ var textBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPTextBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.multiple = computed(() => this.options()["multiple"]);
+        this.multiple = computed(() => this.options()['multiple']);
         this.hasClearButton = computed(() => this.options()['hasClearButton']);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.placeholder = computed(() => this.options()["placeholder"]);
-        this.validationRules = computed(() => this.options()["validationRules"] ?? []);
-        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.disabled = computed(() => this.options()['disabled']);
+        this.placeholder = computed(() => this.options()['placeholder']);
+        this.validationRules = computed(() => this.options()['validationRules'] ?? []);
+        this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
     }
     handleValueChange(e, i) {
         if (e.isUserInteraction) {
@@ -5430,11 +5430,21 @@ class AXPTextBoxWidgetEditComponent extends AXPWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTextBoxWidgetEditComponent, isStandalone: true, selector: "axp-text-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for (text of internalValue(); track $index) {
-      <ax-text-box class="ax-col-span-12" [ngModel]="text"  [type]="'text'" (onValueChanged)="handleValueChange($event, $index)" [disabled]="disabled()" [placeholder]="placeholder()">
+      <ax-text-box
+        class="ax-col-span-12"
+        [ngModel]="text"
+        [type]="'text'"
+        (onValueChanged)="handleValueChange($event, $index)"
+        [disabled]="disabled()"
+        [placeholder]="placeholder()"
+      >
         @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-        }
-        @if(hasClearButton()){
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
+        } @if(hasClearButton()){
         <ax-clear-button></ax-clear-button>
         } @if(multiple()){
         <ax-suffix>
@@ -5467,11 +5477,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for (text of internalValue(); track $index) {
-      <ax-text-box class="ax-col-span-12" [ngModel]="text"  [type]="'text'" (onValueChanged)="handleValueChange($event, $index)" [disabled]="disabled()" [placeholder]="placeholder()">
+      <ax-text-box
+        class="ax-col-span-12"
+        [ngModel]="text"
+        [type]="'text'"
+        (onValueChanged)="handleValueChange($event, $index)"
+        [disabled]="disabled()"
+        [placeholder]="placeholder()"
+      >
         @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-        }
-        @if(hasClearButton()){
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
+        } @if(hasClearButton()){
         <ax-clear-button></ax-clear-button>
         } @if(multiple()){
         <ax-suffix>
@@ -5497,8 +5517,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXTextBoxModule, FormsModule, AXFormModule, AXDecoratorModule, AXValidationModule, AXButtonModule],
-                    inputs: []
+                    imports: [
+                        CommonModule,
+                        AXTextBoxModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXDecoratorModule,
+                        AXValidationModule,
+                        AXButtonModule,
+                    ],
+                    inputs: [],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -7513,17 +7541,12 @@ const AXPSignatureWidget = {
 };
 
 class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
-    // protected items = computed()
     constructor() {
         super();
+        this.isRendered = signal(false);
         this.el = inject(ElementRef);
         this.designerService = inject(AXPDesignerService);
         this.container = viewChild(AXGridLayoutContainerComponent);
-        this.widgetOption = {
-            h: 1,
-            w: 1,
-            content: '',
-        };
         this.gridOptions = {
             column: 6,
             cellHeight: 100,
@@ -7538,31 +7561,11 @@ class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
         this.columns = computed(() => this.options()['advancedGridOptions']?.columns);
         this.justifyItems = computed(() => this.options()['advancedGridOptions']?.justifyItems);
         this.alignItems = computed(() => this.options()['advancedGridOptions']?.alignItems);
-        // protected handleDrawerSelect(e: { rows: number; cols: number }) {
-        //   this.designerService.update({
-        //     values: {
-        //       // options: e,
-        //       options: {
-        //         gridOptions: {
-        //           default: {
-        //             gridTemplateColumns: `repeat(${e.cols}, 1fr)`,
-        //             gridTemplateRows: `repeat(${e.rows}, 1fr)`,
-        //             gap: '10px',
-        //           },
-        //         },
-        //       },
-        //     },
-        //     mode: 'update',
-        //     widget: this.node,
-        //   });
-        //   const list = Array.from({ length: this.cells() }).map(() => ({
-        //     type: AXPWidgetsCatalog.gridItem,
-        //   }));
-        //   list.forEach((node) => {
-        //     this.designerService.addWidget(this.node, node);
-        //   });
-        // }
-        this.eff = effect(() => console.log(this.options()['advancedGridOptions']));
+        this.#eff = effect(() => console.log(this.options()['advancedGridOptions']));
+        this.#initValues = afterNextRender(() => {
+            this.initValues();
+            this.isRendered.set(true);
+        });
         this.#rowOrColumnChangeEffect = effect(() => {
             const deferent = this.itemsCount() - this.children().length;
             untracked(() => {
@@ -7574,6 +7577,27 @@ class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
                         .forEach((node) => {
                         this.designerService.addWidget(this.node, node);
                     });
+                    //debugger;
+                    const save = this.container()?.save();
+                    const layout = save?.children?.map((child) => {
+                        if (child && child.id) {
+                            return {
+                                ...child,
+                                data: this.children()[Number.parseInt(child.id)],
+                            };
+                        }
+                        return { ...child, data: undefined };
+                    });
+                    const value = {
+                        data: {
+                            alignItems: this.alignItems(),
+                            justifyItems: this.justifyItems(),
+                            columns: this.columns(),
+                            itemsCount: this.itemsCount(),
+                        },
+                        layout: { ...save, children: layout },
+                    };
+                    this.setValue(value);
                 }
                 else if (deferent < 0) {
                     this.children()
@@ -7587,6 +7611,7 @@ class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
             if (els.length) {
                 els.forEach((item) => {
                     if (item instanceof HTMLElement) {
+                        item.style.padding = '0.5rem';
                         item.style.removeProperty('justify-content');
                         item.style.justifyContent = this.justifyItems();
                         item.style.removeProperty('align-items');
@@ -7600,6 +7625,27 @@ class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
         });
         window.ag = this; //debug purpose
     }
+    calcWidgetOption(id) {
+        return {
+            h: 1,
+            w: 1,
+            id: id,
+        };
+    }
+    #eff;
+    #initValues;
+    initValues() {
+        //TODO update values from
+        const data = this.getValue();
+        if (data?.layout) {
+        }
+        else {
+            Array.from({ length: this.itemsCount() }).map(() => ({
+                type: AXPWidgetsCatalog.gridItem,
+            }));
+            const layout = this.container()?.save();
+        }
+    }
     #rowOrColumnChangeEffect;
     #setJustifyAndAlign;
     get __class() {
@@ -7618,7 +7664,7 @@ class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
         ], viewQueries: [{ propertyName: "container", first: true, predicate: AXGridLayoutContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-grid-layout-container [options]="gridOptions">
       @for (child of children(); track $index) {
-      <ax-grid-layout-widget [options]="widgetOption">
+      <ax-grid-layout-widget [options]="calcWidgetOption($index)">
         <ng-container
           axp-widget-designer-renderer
           [node]="child"
@@ -7649,7 +7695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `
     <ax-grid-layout-container [options]="gridOptions">
       @for (child of children(); track $index) {
-      <ax-grid-layout-widget [options]="widgetOption">
+      <ax-grid-layout-widget [options]="calcWidgetOption($index)">
         <ng-container
           axp-widget-designer-renderer
           [node]="child"
@@ -9180,7 +9226,6 @@ class AXPAdvancedGridOptionsWidgetEditComponent extends AXPWidgetComponent {
     #firstInitialize;
     #trackChange;
     initialValues() {
-        debugger;
         const value = this.getValue();
         const justify = value?.justifyItems ?? 'stretch';
         const align = value?.alignItems ?? 'stretch';
@@ -10370,6 +10415,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPWidgetComponent {
         this.value = computed(() => this.getValue()?.value);
         this.trulyText = computed(() => this.options()['trulyText']);
         this.falsyText = computed(() => this.options()['falsyText']);
+        this.translateService = inject(AXTranslationService);
         this.items = [];
         this.dataSource = new AXDataSource({
             load: () => {
@@ -10379,16 +10425,17 @@ class AXPBooleanFilterWidgetEditComponent extends AXPWidgetComponent {
                 });
             },
             byKey: (id) => {
-                const item = this.items.find((c) => c.value.toString() == id);
+                const item = this.items.find((c) => c.value?.toString() == id);
                 return Promise.resolve(item);
             },
             pageSize: 10,
             key: 'value',
         });
-        this.#effect = effect(() => {
+        this.#effect = effect(async () => {
             this.items = [
-                { text: this.trulyText() || 'Yes', value: true },
-                { text: this.falsyText() || 'No', value: false },
+                { text: await this.translateService.translateAsync('unknown'), value: 'unknown' },
+                { text: this.trulyText() || (await this.translateService.translateAsync('yes')), value: true },
+                { text: this.falsyText() || (await this.translateService.translateAsync('no')), value: false },
             ];
         });
     }
@@ -10411,9 +10458,11 @@ class AXPBooleanFilterWidgetEditComponent extends AXPWidgetComponent {
         [dataSource]="dataSource"
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
-      ></ax-select-box>
+      >
+        <ax-clear-button></ax-clear-button>
+      </ax-select-box>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -10427,7 +10476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         [dataSource]="dataSource"
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
-      ></ax-select-box>
+      >
+        <ax-clear-button></ax-clear-button>
+      </ax-select-box>
     </div>
   `,
                     standalone: true,
@@ -10620,10 +10671,18 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPWidgetComponent {
                     this.setValue({ operation, value: e.value?.toISOString() });
                     break;
                 case 'to':
-                    this.setValue({ operation, value: { to: e.value?.toISOString() } });
+                    const from = this.value().from || undefined;
+                    this.setValue({
+                        operation,
+                        value: { from: from?.toISOString(), to: e.value?.toISOString() },
+                    });
                     break;
                 case 'from':
-                    this.setValue({ operation, value: { from: e.value?.toISOString() } });
+                    const to = this.value().to || undefined;
+                    this.setValue({
+                        operation,
+                        value: { from: e.value?.toISOString(), to: to?.toISOString() },
+                    });
                     break;
                 default:
                     break;
@@ -10638,7 +10697,9 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPWidgetComponent {
         [placeholder]="('select' | translate | async) ?? ''"
         [ngModel]="filterTypeSelectedItem()"
         (onValueChanged)="handleFilterTypeSelectedItemChange($event)"
-      ></ax-select-box>
+      >
+        <ax-clear-button></ax-clear-button>
+      </ax-select-box>
       @if(filterTypeSelectedItem()==='Between'){
       <div class="ax-flex ax-gap-2 ax-mt-2">
         <ax-datetime-box
@@ -10678,7 +10739,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         [placeholder]="('select' | translate | async) ?? ''"
         [ngModel]="filterTypeSelectedItem()"
         (onValueChanged)="handleFilterTypeSelectedItemChange($event)"
-      ></ax-select-box>
+      >
+        <ax-clear-button></ax-clear-button>
+      </ax-select-box>
       @if(filterTypeSelectedItem()==='Between'){
       <div class="ax-flex ax-gap-2 ax-mt-2">
         <ax-datetime-box
@@ -11023,6 +11086,7 @@ class AXPStringWidgetFilterComponent extends AXPWidgetComponent {
         this.operation = computed(() => this.getValue()?.operation || 'equal');
         this.value = computed(() => this.getValue()?.value);
         this.placeholder = computed(() => this.options()['placeholder']);
+        this.hasClearButton = computed(() => this.options()['hasClearButton']);
     }
     handleValueChange(e) {
         if (e.isUserInteraction) {
@@ -11039,7 +11103,7 @@ class AXPStringWidgetFilterComponent extends AXPWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStringWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPStringWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPStringWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-items-center">
       <ax-text-box
         class="ax-flex-1"
@@ -11048,7 +11112,9 @@ class AXPStringWidgetFilterComponent extends AXPWidgetComponent {
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
       >
+        @if(hasClearButton()){
         <ax-clear-button></ax-clear-button>
+        }
       </ax-text-box>
       <axp-filter-operations
         [type]="'string'"
@@ -11070,7 +11136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
       >
+        @if(hasClearButton()){
         <ax-clear-button></ax-clear-button>
+        }
       </ax-text-box>
       <axp-filter-operations
         [type]="'string'"