@acorex/platform 19.3.4 → 19.3.6

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,6 +1,6 @@
 import * as i1$3 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXPLayoutWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_CATEGORY, AXPValueWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY, AXPColumnWidgetComponent, AXPLayoutBuilderModule, createNumberProperty, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY } from '@acorex/platform/layout/builder';
-import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource } from '@acorex/components/common';
+import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource } from '@acorex/cdk/common';
 import * as i1$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5 from '@acorex/components/button';
@@ -1012,14 +1012,15 @@ class AXPButtonWidgetViewComponent extends AXPLayoutWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPButtonWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPButtonWidgetViewComponent, isStandalone: true, selector: "axp-button-widget", usesInheritance: true, ngImport: i0, template: `
     <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
-      @if(icon() && text()){
-      <ax-prefix
-        ><ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon
-      ></ax-prefix>
-      } @else if(icon() && !text()) {
-      <ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon>
-      } @if(loading()){
-      <ax-loading> </ax-loading>
+      @if (icon() && text()) {
+        <ax-prefix
+          ><ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon
+        ></ax-prefix>
+      } @else if (icon() && !text()) {
+        <ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon>
+      }
+      @if (loading()) {
+        <ax-loading> </ax-loading>
       }
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1030,19 +1031,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     selector: 'axp-button-widget',
                     template: `
     <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
-      @if(icon() && text()){
-      <ax-prefix
-        ><ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon
-      ></ax-prefix>
-      } @else if(icon() && !text()) {
-      <ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon>
-      } @if(loading()){
-      <ax-loading> </ax-loading>
+      @if (icon() && text()) {
+        <ax-prefix
+          ><ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon
+        ></ax-prefix>
+      } @else if (icon() && !text()) {
+        <ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon>
+      }
+      @if (loading()) {
+        <ax-loading> </ax-loading>
       }
     </ax-button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXLoadingModule, AXDecoratorModule, AXBadgeModule]
+                    imports: [CommonModule, AXButtonModule, AXLoadingModule, AXDecoratorModule, AXBadgeModule],
                 }]
         }] });
 
@@ -1070,7 +1072,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-CLna7DRq.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-i8FcuktZ.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -1445,61 +1447,64 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPContactWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPContactWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max	">
-    @for(item of internalValue();track $index) {
-    <ax-text-box
-      [ngModel]="item.value"
-      (onValueChanged)="handleValueChange($event, $index)"
-      type="text"
-      name="value"
-      [placeholder]="placeholder()"
-      [ngClass]="generateClasses('value')"
-      [disabled]="disabled()"
-    >
-      @for (validation of validationRules(); track $index) {
-      <ax-validation-rule
-        [rule]="validation.rule"
-        [message]="validation.options?.message"
-        [options]="validation.options"
-      ></ax-validation-rule>
-      } @if(type()==='email'){
-      <ax-validation-rule rule="email"></ax-validation-rule>
+    @for (item of internalValue(); track $index) {
+      <ax-text-box
+        [ngModel]="item.value"
+        (onValueChanged)="handleValueChange($event, $index)"
+        type="text"
+        name="value"
+        [placeholder]="placeholder()"
+        [ngClass]="generateClasses('value')"
+        [disabled]="disabled()"
+      >
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
+        }
+        @if (type() === 'email') {
+          <ax-validation-rule rule="email"></ax-validation-rule>
+        }
+        <ax-validation-rule rule="required"></ax-validation-rule>
+      </ax-text-box>
+      @if (hasLabel()) {
+        <ax-select-box
+          [dataSource]="dataSource"
+          [ngModel]="item.label"
+          [disabled]="disabled()"
+          (onValueChanged)="handleValueChange($event, $index)"
+          placeholder="{{ 'selectbox.popover.title' | translate | async }}"
+          name="label"
+          [ngClass]="generateClasses('label')"
+        >
+        </ax-select-box>
       }
-      <ax-validation-rule rule="required"></ax-validation-rule>
-    </ax-text-box>
-    @if(hasLabel()){
-    <ax-select-box
-      [dataSource]="dataSource"
-      [ngModel]="item.label"
-      [disabled]="disabled()"
-      (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="{{ 'selectbox.popover.title' | translate | async }}"
-      name="label"
-      [ngClass]="generateClasses('label')"
-    >
-    </ax-select-box>
-    } @if(multiple()){
-    <ax-button
-      [disabled]="disabled()"
-      look="twotone"
-      color="danger"
-      (onClick)="deleteItem($index)"
-      class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
-    >
-      <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-    </ax-button>
-    } } @if(multiple()){
-
-    <ax-button
-      [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-      [disabled]="disabled()"
-      look="twotone"
-      (onClick)="addItem()"
-      class="ax-col-start-8 ax-col-end-13 sm:ax-col-start-10 md:ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-10 "
-    >
-      <ax-prefix>
-        <ax-icon class="fa-solid fa-add"></ax-icon>
-      </ax-prefix>
-    </ax-button>
+      @if (multiple()) {
+        <ax-button
+          [disabled]="disabled()"
+          look="twotone"
+          color="danger"
+          (onClick)="deleteItem($index)"
+          class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        >
+          <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+        </ax-button>
+      }
+    }
+    @if (multiple()) {
+      <ax-button
+        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+        [disabled]="disabled()"
+        look="twotone"
+        (onClick)="addItem()"
+        class="ax-col-start-8 ax-col-end-13 sm:ax-col-start-10 md:ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-10 "
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
     }
   </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1507,61 +1512,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             type: Component,
             args: [{
                     template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max	">
-    @for(item of internalValue();track $index) {
-    <ax-text-box
-      [ngModel]="item.value"
-      (onValueChanged)="handleValueChange($event, $index)"
-      type="text"
-      name="value"
-      [placeholder]="placeholder()"
-      [ngClass]="generateClasses('value')"
-      [disabled]="disabled()"
-    >
-      @for (validation of validationRules(); track $index) {
-      <ax-validation-rule
-        [rule]="validation.rule"
-        [message]="validation.options?.message"
-        [options]="validation.options"
-      ></ax-validation-rule>
-      } @if(type()==='email'){
-      <ax-validation-rule rule="email"></ax-validation-rule>
+    @for (item of internalValue(); track $index) {
+      <ax-text-box
+        [ngModel]="item.value"
+        (onValueChanged)="handleValueChange($event, $index)"
+        type="text"
+        name="value"
+        [placeholder]="placeholder()"
+        [ngClass]="generateClasses('value')"
+        [disabled]="disabled()"
+      >
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
+        }
+        @if (type() === 'email') {
+          <ax-validation-rule rule="email"></ax-validation-rule>
+        }
+        <ax-validation-rule rule="required"></ax-validation-rule>
+      </ax-text-box>
+      @if (hasLabel()) {
+        <ax-select-box
+          [dataSource]="dataSource"
+          [ngModel]="item.label"
+          [disabled]="disabled()"
+          (onValueChanged)="handleValueChange($event, $index)"
+          placeholder="{{ 'selectbox.popover.title' | translate | async }}"
+          name="label"
+          [ngClass]="generateClasses('label')"
+        >
+        </ax-select-box>
       }
-      <ax-validation-rule rule="required"></ax-validation-rule>
-    </ax-text-box>
-    @if(hasLabel()){
-    <ax-select-box
-      [dataSource]="dataSource"
-      [ngModel]="item.label"
-      [disabled]="disabled()"
-      (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="{{ 'selectbox.popover.title' | translate | async }}"
-      name="label"
-      [ngClass]="generateClasses('label')"
-    >
-    </ax-select-box>
-    } @if(multiple()){
-    <ax-button
-      [disabled]="disabled()"
-      look="twotone"
-      color="danger"
-      (onClick)="deleteItem($index)"
-      class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
-    >
-      <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-    </ax-button>
-    } } @if(multiple()){
-
-    <ax-button
-      [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-      [disabled]="disabled()"
-      look="twotone"
-      (onClick)="addItem()"
-      class="ax-col-start-8 ax-col-end-13 sm:ax-col-start-10 md:ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-10 "
-    >
-      <ax-prefix>
-        <ax-icon class="fa-solid fa-add"></ax-icon>
-      </ax-prefix>
-    </ax-button>
+      @if (multiple()) {
+        <ax-button
+          [disabled]="disabled()"
+          look="twotone"
+          color="danger"
+          (onClick)="deleteItem($index)"
+          class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        >
+          <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+        </ax-button>
+      }
+    }
+    @if (multiple()) {
+      <ax-button
+        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+        [disabled]="disabled()"
+        look="twotone"
+        (onClick)="addItem()"
+        class="ax-col-start-8 ax-col-end-13 sm:ax-col-start-10 md:ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-10 "
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
     }
   </div> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1864,11 +1872,11 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
         this.calendarFormat = computed(() => {
             if (this.format() === 'date')
-                return 'dd/MM/yyyy';
+                return 'DD/MM/YYYY';
             else if (this.format() === 'time')
                 return 'HH:mm';
             else
-                return 'dd/MM/yyyy HH:mm';
+                return 'DD/MM/YYYY HH:mm';
         });
     }
     handleValueChange(e, i) {
@@ -1898,38 +1906,41 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for (datetime of internalValue(); track $index) {
-      <ax-datetime-box
-        class="ax-col-span-12"
-        [ngModel]="datetime"
-        (onValueChanged)="handleValueChange($event, $index)"
-        [disabled]="disabled()"
-        [format]="calendarFormat()"
-        [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(clearButton()){
-        <ax-clear-button></ax-clear-button>
-        } @if(multiple()) {
-        <ax-suffix>
-          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-            <ax-icon class="far fa-trash"> </ax-icon>
-          </ax-button>
-        </ax-suffix>
-        }
-      </ax-datetime-box>
-      } @if(multiple()){
-      <ax-button
-        class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
-        [text]="!internalValue().length ? 'Add New' : 'Add Another'"
-        look="twotone"
-        (onClick)="addItem()"
-        [disabled]="disabled()"
-      ></ax-button>
+        <ax-datetime-box
+          class="ax-col-span-12"
+          [ngModel]="datetime"
+          (onValueChanged)="handleValueChange($event, $index)"
+          [disabled]="disabled()"
+          [format]="calendarFormat()"
+          [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 (clearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
+          @if (multiple()) {
+            <ax-suffix>
+              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                <ax-icon class="far fa-trash"> </ax-icon>
+              </ax-button>
+            </ax-suffix>
+          }
+        </ax-datetime-box>
+      }
+      @if (multiple()) {
+        <ax-button
+          class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
+          [text]="!internalValue().length ? 'Add New' : 'Add Another'"
+          look="twotone"
+          (onClick)="addItem()"
+          [disabled]="disabled()"
+        ></ax-button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1940,38 +1951,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for (datetime of internalValue(); track $index) {
-      <ax-datetime-box
-        class="ax-col-span-12"
-        [ngModel]="datetime"
-        (onValueChanged)="handleValueChange($event, $index)"
-        [disabled]="disabled()"
-        [format]="calendarFormat()"
-        [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(clearButton()){
-        <ax-clear-button></ax-clear-button>
-        } @if(multiple()) {
-        <ax-suffix>
-          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-            <ax-icon class="far fa-trash"> </ax-icon>
-          </ax-button>
-        </ax-suffix>
-        }
-      </ax-datetime-box>
-      } @if(multiple()){
-      <ax-button
-        class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
-        [text]="!internalValue().length ? 'Add New' : 'Add Another'"
-        look="twotone"
-        (onClick)="addItem()"
-        [disabled]="disabled()"
-      ></ax-button>
+        <ax-datetime-box
+          class="ax-col-span-12"
+          [ngModel]="datetime"
+          (onValueChanged)="handleValueChange($event, $index)"
+          [disabled]="disabled()"
+          [format]="calendarFormat()"
+          [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 (clearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
+          @if (multiple()) {
+            <ax-suffix>
+              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                <ax-icon class="far fa-trash"> </ax-icon>
+              </ax-button>
+            </ax-suffix>
+          }
+        </ax-datetime-box>
+      }
+      @if (multiple()) {
+        <ax-button
+          class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
+          [text]="!internalValue().length ? 'Add New' : 'Add Another'"
+          look="twotone"
+          (onClick)="addItem()"
+          [disabled]="disabled()"
+        ></ax-button>
       }
     </div>
   `,
@@ -1986,7 +2000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXDecoratorModule,
                         AXValidationModule,
                     ],
-                    inputs: []
+                    inputs: [],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -2258,12 +2272,12 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.validationService = inject(AXValidationService);
-        this.multiple = computed(() => this.options()["multiple"]);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.clearButton = computed(() => this.options()["clearButton"] ?? true);
-        this.placeholder = computed(() => this.options()["placeholder"]);
-        this.hasLabel = computed(() => this.options()["hasLabel"] ?? true);
-        this.lables = computed(() => this.options()["lables"] ?? ['Primary', 'Secondary']);
+        this.multiple = computed(() => this.options()['multiple']);
+        this.disabled = computed(() => this.options()['disabled']);
+        this.clearButton = computed(() => this.options()['clearButton'] ?? true);
+        this.placeholder = computed(() => this.options()['placeholder']);
+        this.hasLabel = computed(() => this.options()['hasLabel'] ?? true);
+        this.lables = computed(() => this.options()['lables'] ?? ['Primary', 'Secondary']);
         this.internalValue = computed(() => this.getValueAsArrayOfObjects());
         this.convertItem = (item, e) => {
             if (typeof item === 'object') {
@@ -2283,7 +2297,7 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     handleValueChange(e, selectedIndex) {
         if (e.isUserInteraction) {
-            const newValues = this.internalValue().map((item, index) => (selectedIndex === index ? this.convertItem(item, e) : item));
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? this.convertItem(item, e) : item);
             if (this.multiple()) {
                 this.setValue(newValues);
             }
@@ -2294,7 +2308,7 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     handleLabelChange(e, selectedIndex) {
         if (e.isUserInteraction) {
-            const newValues = this.internalValue().map((item, index) => (selectedIndex === index ? { ...item, label: e.value } : item));
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, label: e.value } : item);
             if (this.multiple()) {
                 this.setValue(newValues);
             }
@@ -2320,10 +2334,8 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPEmailBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPEmailBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      @if(multiple())
-      {
-        @for(item of internalValue();track $index) 
-        {
+      @if (multiple()) {
+        @for (item of internalValue(); track $index) {
           <ax-text-box
             [ngModel]="item.value"
             (onValueChanged)="handleValueChange($event, $index)"
@@ -2333,12 +2345,15 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
             [class.lg:!ax-col-end-12]="!hasLabel()"
           >
             @for (validation of validationRules(); track $index) {
-              <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
             }
             <ax-validation-rule [rule]="'email'"></ax-validation-rule>
           </ax-text-box>
-          @if(hasLabel())
-          {
+          @if (hasLabel()) {
             <ax-select-box
               [dataSource]="lables()"
               [ngModel]="item.label"
@@ -2353,7 +2368,8 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
             color="danger"
             [disabled]="disabled()"
             (onClick)="deleteItem($index)"
-            class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end">
+            class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
+          >
             <ax-icon icon="fa-regular fa-xmark"></ax-icon>
           </ax-button>
         }
@@ -2362,14 +2378,13 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
           [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
           look="twotone"
           (onClick)="addItem()"
-          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13">
+          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+        >
           <ax-prefix>
             <ax-icon class="fa-solid fa-add"></ax-icon>
           </ax-prefix>
         </ax-button>
-      }
-      @else 
-      {
+      } @else {
         <ax-text-box
           [ngModel]="internalValue()[0].value"
           (onValueChanged)="handleValueChange($event, 0)"
@@ -2377,12 +2392,17 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
           [disabled]="disabled()"
           type="text"
           class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
-          [class.lg:!ax-col-end-13]="!hasLabel()">
+          [class.lg:!ax-col-end-13]="!hasLabel()"
+        >
           @for (validation of validationRules(); track $index) {
-            <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
           }
         </ax-text-box>
-        @if(hasLabel()){
+        @if (hasLabel()) {
           <ax-select-box
             [dataSource]="lables()"
             [disabled]="disabled()"
@@ -2401,10 +2421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      @if(multiple())
-      {
-        @for(item of internalValue();track $index) 
-        {
+      @if (multiple()) {
+        @for (item of internalValue(); track $index) {
           <ax-text-box
             [ngModel]="item.value"
             (onValueChanged)="handleValueChange($event, $index)"
@@ -2414,12 +2432,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             [class.lg:!ax-col-end-12]="!hasLabel()"
           >
             @for (validation of validationRules(); track $index) {
-              <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
             }
             <ax-validation-rule [rule]="'email'"></ax-validation-rule>
           </ax-text-box>
-          @if(hasLabel())
-          {
+          @if (hasLabel()) {
             <ax-select-box
               [dataSource]="lables()"
               [ngModel]="item.label"
@@ -2434,7 +2455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             color="danger"
             [disabled]="disabled()"
             (onClick)="deleteItem($index)"
-            class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end">
+            class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
+          >
             <ax-icon icon="fa-regular fa-xmark"></ax-icon>
           </ax-button>
         }
@@ -2443,14 +2465,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
           look="twotone"
           (onClick)="addItem()"
-          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13">
+          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+        >
           <ax-prefix>
             <ax-icon class="fa-solid fa-add"></ax-icon>
           </ax-prefix>
         </ax-button>
-      }
-      @else 
-      {
+      } @else {
         <ax-text-box
           [ngModel]="internalValue()[0].value"
           (onValueChanged)="handleValueChange($event, 0)"
@@ -2458,12 +2479,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           [disabled]="disabled()"
           type="text"
           class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
-          [class.lg:!ax-col-end-13]="!hasLabel()">
+          [class.lg:!ax-col-end-13]="!hasLabel()"
+        >
           @for (validation of validationRules(); track $index) {
-            <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
           }
         </ax-text-box>
-        @if(hasLabel()){
+        @if (hasLabel()) {
           <ax-select-box
             [dataSource]="lables()"
             [disabled]="disabled()"
@@ -2477,8 +2503,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXFormModule, AXButtonModule, AXDecoratorModule, AXSelectBoxModule, AXTextBoxModule, AXValidationModule],
-                    inputs: []
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSelectBoxModule,
+                        AXTextBoxModule,
+                        AXValidationModule,
+                    ],
+                    inputs: [],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -2786,28 +2821,29 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         (onValueChanged)="handleValueChange($event)"
         [placeholder]="placeholder()"
       >
-        @if(clearButton()){
-        <ax-clear-button></ax-clear-button>
-        }@for (validation of validationRules(); track $index) {
-        <ax-validation-rule
-          [rule]="validation.rule"
-          [message]="validation.options?.message"
-          [options]="validation.options"
-        ></ax-validation-rule>
+        @if (clearButton()) {
+          <ax-clear-button></ax-clear-button>
+        }
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
         }
       </ax-text-area>
-      @if(multiLanguage()){
-      <ax-button
-        [text]="'multi-language' | translate | async"
-        look="twotone"
-        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
-        (onClick)="openMultiLanguagePopup()"
-        [disabled]="disabled()"
-      >
-        <ax-suffix>
-          <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
-        </ax-suffix>
-      </ax-button>
+      @if (multiLanguage()) {
+        <ax-button
+          [text]="'multi-language' | translate | async"
+          look="twotone"
+          class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
+          (onClick)="openMultiLanguagePopup()"
+          [disabled]="disabled()"
+        >
+          <ax-suffix>
+            <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
+          </ax-suffix>
+        </ax-button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i5$2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2825,28 +2861,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         (onValueChanged)="handleValueChange($event)"
         [placeholder]="placeholder()"
       >
-        @if(clearButton()){
-        <ax-clear-button></ax-clear-button>
-        }@for (validation of validationRules(); track $index) {
-        <ax-validation-rule
-          [rule]="validation.rule"
-          [message]="validation.options?.message"
-          [options]="validation.options"
-        ></ax-validation-rule>
+        @if (clearButton()) {
+          <ax-clear-button></ax-clear-button>
+        }
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
         }
       </ax-text-area>
-      @if(multiLanguage()){
-      <ax-button
-        [text]="'multi-language' | translate | async"
-        look="twotone"
-        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
-        (onClick)="openMultiLanguagePopup()"
-        [disabled]="disabled()"
-      >
-        <ax-suffix>
-          <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
-        </ax-suffix>
-      </ax-button>
+      @if (multiLanguage()) {
+        <ax-button
+          [text]="'multi-language' | translate | async"
+          look="twotone"
+          class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
+          (onClick)="openMultiLanguagePopup()"
+          [disabled]="disabled()"
+        >
+          <ax-suffix>
+            <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
+          </ax-suffix>
+        </ax-button>
       }
     </div>
   `,
@@ -3157,7 +3194,11 @@ class AXPLinkWidgetEditComponent extends AXPValueWidgetComponent {
     handleValueChange(e, selectedIndex) {
         const { name, value, isUserInteraction } = e;
         if (isUserInteraction) {
-            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? (name === 'value' ? this.convertItem(item, e) : { ...item, [name]: value }) : item);
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index
+                ? name === 'value'
+                    ? this.convertItem(item, e)
+                    : { ...item, [name]: value }
+                : item);
             console.log(newValues);
             if (this.multiple())
                 this.setValue(newValues);
@@ -3257,188 +3298,216 @@ class AXPLinkWidgetEditComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLinkWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPLinkWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4">
-    @if(multiple()){ @for(item of internalValue();track $index) { @if(item){
-    <!-- TODO need to fix multiple -->
-    <ax-text-box
-      [ngModel]="item.value"
-      (onValueChanged)="handleValueChange($event, $index)"
-      type="text"
-      placeholder="Enter Link"
-      class="ax-col-start-1 ax-col-end-13"
-      [ngClass]="generateClasses('url', 'multiple')"
-    >
-      @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+    @if (multiple()) {
+      @for (item of internalValue(); track $index) {
+        @if (item) {
+          <!-- TODO need to fix multiple -->
+          <ax-text-box
+            [ngModel]="item.value"
+            (onValueChanged)="handleValueChange($event, $index)"
+            type="text"
+            placeholder="Enter Link"
+            class="ax-col-start-1 ax-col-end-13"
+            [ngClass]="generateClasses('url', 'multiple')"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+          </ax-text-box>
+          @if (hasTitle()) {
+            <ax-text-box
+              [ngModel]="item.title"
+              (onValueChanged)="handleValueChange($event, $index)"
+              placeholder="Choose Title..."
+              name="title"
+              [ngClass]="generateClasses('title', 'multiple')"
+            >
+            </ax-text-box>
+          }
+          @if (hasLabel()) {
+            <ax-select-box
+              [dataSource]="labelTypes()"
+              [ngModel]="item.label"
+              (onValueChanged)="handleValueChange($event, $index)"
+              placeholder="Choose Label..."
+              name="label"
+              [ngClass]="generateClasses('label', 'multiple')"
+            >
+            </ax-select-box>
+          }
+        }
+        <ax-button
+          look="twotone"
+          color="danger"
+          (onClick)="deleteItem($index)"
+          class="ax-col-start-12 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end !ax-h-full"
+        >
+          <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+        </ax-button>
       }
-    </ax-text-box>
-    @if(hasTitle()){
-    <ax-text-box
-      [ngModel]="item.title"
-      (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="Choose Title..."
-      name="title"
-      [ngClass]="generateClasses('title', 'multiple')"
-    >
-    </ax-text-box>
-    } @if(hasLabel()){
-    <ax-select-box
-      [dataSource]="labelTypes()"
-      [ngModel]="item.label"
-      (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="Choose Label..."
-      name="label"
-      [ngClass]="generateClasses('label', 'multiple')"
-    >
-    </ax-select-box>
-    }}
-    <ax-button
-      look="twotone"
-      color="danger"
-      (onClick)="deleteItem($index)"
-      class="ax-col-start-12 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end !ax-h-full"
-    >
-      <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-    </ax-button>
-    }
-    <ax-button
-      [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-      look="twotone"
-      (onClick)="addItem()"
-      class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
-    >
-      <ax-prefix>
-        <ax-icon class="fa-solid fa-add"></ax-icon>
-      </ax-prefix>
-    </ax-button>
-    } @else{
-    <ax-text-box
-      [ngClass]="generateClasses('url', 'single')"
-      [ngModel]="internalValue()[0].value"
-      (onValueChanged)="handleValueChange($event, 0)"
-      type="text"
-      name="value"
-      placeholder="Link"
-      class="ax-col-start-1 ax-col-end-13"
-    >
-      @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-button
+        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+        look="twotone"
+        (onClick)="addItem()"
+        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    } @else {
+      <ax-text-box
+        [ngClass]="generateClasses('url', 'single')"
+        [ngModel]="internalValue()[0].value"
+        (onValueChanged)="handleValueChange($event, 0)"
+        type="text"
+        name="value"
+        placeholder="Link"
+        class="ax-col-start-1 ax-col-end-13"
+      >
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
+        }
+      </ax-text-box>
+      @if (hasTitle()) {
+        <ax-text-box
+          [ngClass]="generateClasses('title', 'single')"
+          [ngModel]="internalValue()[0].title"
+          (onValueChanged)="handleValueChange($event, 0)"
+          type="text"
+          name="title"
+          placeholder="Title"
+        >
+        </ax-text-box>
       }
-    </ax-text-box>
-    @if(hasTitle()){
-    <ax-text-box
-      [ngClass]="generateClasses('title', 'single')"
-      [ngModel]="internalValue()[0].title"
-      (onValueChanged)="handleValueChange($event, 0)"
-      type="text"
-      name="title"
-      placeholder="Title"
-    >
-    </ax-text-box>
-    } @if(hasLabel()){
-    <ax-select-box
-      [ngClass]="generateClasses('label', 'single')"
-      [dataSource]="labelTypes()"
-      [ngModel]="internalValue()[0].label"
-      (onValueChanged)="handleValueChange($event, 0)"
-      name="label"
-      placeholder="Label"
-    >
-    </ax-select-box>
-    } }
+      @if (hasLabel()) {
+        <ax-select-box
+          [ngClass]="generateClasses('label', 'single')"
+          [dataSource]="labelTypes()"
+          [ngModel]="internalValue()[0].label"
+          (onValueChanged)="handleValueChange($event, 0)"
+          name="label"
+          placeholder="Label"
+        >
+        </ax-select-box>
+      }
+    }
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLinkWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4">
-    @if(multiple()){ @for(item of internalValue();track $index) { @if(item){
-    <!-- TODO need to fix multiple -->
-    <ax-text-box
-      [ngModel]="item.value"
-      (onValueChanged)="handleValueChange($event, $index)"
-      type="text"
-      placeholder="Enter Link"
-      class="ax-col-start-1 ax-col-end-13"
-      [ngClass]="generateClasses('url', 'multiple')"
-    >
-      @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+    @if (multiple()) {
+      @for (item of internalValue(); track $index) {
+        @if (item) {
+          <!-- TODO need to fix multiple -->
+          <ax-text-box
+            [ngModel]="item.value"
+            (onValueChanged)="handleValueChange($event, $index)"
+            type="text"
+            placeholder="Enter Link"
+            class="ax-col-start-1 ax-col-end-13"
+            [ngClass]="generateClasses('url', 'multiple')"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+          </ax-text-box>
+          @if (hasTitle()) {
+            <ax-text-box
+              [ngModel]="item.title"
+              (onValueChanged)="handleValueChange($event, $index)"
+              placeholder="Choose Title..."
+              name="title"
+              [ngClass]="generateClasses('title', 'multiple')"
+            >
+            </ax-text-box>
+          }
+          @if (hasLabel()) {
+            <ax-select-box
+              [dataSource]="labelTypes()"
+              [ngModel]="item.label"
+              (onValueChanged)="handleValueChange($event, $index)"
+              placeholder="Choose Label..."
+              name="label"
+              [ngClass]="generateClasses('label', 'multiple')"
+            >
+            </ax-select-box>
+          }
+        }
+        <ax-button
+          look="twotone"
+          color="danger"
+          (onClick)="deleteItem($index)"
+          class="ax-col-start-12 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end !ax-h-full"
+        >
+          <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+        </ax-button>
       }
-    </ax-text-box>
-    @if(hasTitle()){
-    <ax-text-box
-      [ngModel]="item.title"
-      (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="Choose Title..."
-      name="title"
-      [ngClass]="generateClasses('title', 'multiple')"
-    >
-    </ax-text-box>
-    } @if(hasLabel()){
-    <ax-select-box
-      [dataSource]="labelTypes()"
-      [ngModel]="item.label"
-      (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="Choose Label..."
-      name="label"
-      [ngClass]="generateClasses('label', 'multiple')"
-    >
-    </ax-select-box>
-    }}
-    <ax-button
-      look="twotone"
-      color="danger"
-      (onClick)="deleteItem($index)"
-      class="ax-col-start-12 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end !ax-h-full"
-    >
-      <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-    </ax-button>
-    }
-    <ax-button
-      [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-      look="twotone"
-      (onClick)="addItem()"
-      class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
-    >
-      <ax-prefix>
-        <ax-icon class="fa-solid fa-add"></ax-icon>
-      </ax-prefix>
-    </ax-button>
-    } @else{
-    <ax-text-box
-      [ngClass]="generateClasses('url', 'single')"
-      [ngModel]="internalValue()[0].value"
-      (onValueChanged)="handleValueChange($event, 0)"
-      type="text"
-      name="value"
-      placeholder="Link"
-      class="ax-col-start-1 ax-col-end-13"
-    >
-      @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-button
+        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+        look="twotone"
+        (onClick)="addItem()"
+        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    } @else {
+      <ax-text-box
+        [ngClass]="generateClasses('url', 'single')"
+        [ngModel]="internalValue()[0].value"
+        (onValueChanged)="handleValueChange($event, 0)"
+        type="text"
+        name="value"
+        placeholder="Link"
+        class="ax-col-start-1 ax-col-end-13"
+      >
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
+        }
+      </ax-text-box>
+      @if (hasTitle()) {
+        <ax-text-box
+          [ngClass]="generateClasses('title', 'single')"
+          [ngModel]="internalValue()[0].title"
+          (onValueChanged)="handleValueChange($event, 0)"
+          type="text"
+          name="title"
+          placeholder="Title"
+        >
+        </ax-text-box>
       }
-    </ax-text-box>
-    @if(hasTitle()){
-    <ax-text-box
-      [ngClass]="generateClasses('title', 'single')"
-      [ngModel]="internalValue()[0].title"
-      (onValueChanged)="handleValueChange($event, 0)"
-      type="text"
-      name="title"
-      placeholder="Title"
-    >
-    </ax-text-box>
-    } @if(hasLabel()){
-    <ax-select-box
-      [ngClass]="generateClasses('label', 'single')"
-      [dataSource]="labelTypes()"
-      [ngModel]="internalValue()[0].label"
-      (onValueChanged)="handleValueChange($event, 0)"
-      name="label"
-      placeholder="Label"
-    >
-    </ax-select-box>
-    } }
+      @if (hasLabel()) {
+        <ax-select-box
+          [ngClass]="generateClasses('label', 'single')"
+          [dataSource]="labelTypes()"
+          [ngModel]="internalValue()[0].label"
+          (onValueChanged)="handleValueChange($event, 0)"
+          name="label"
+          placeholder="Label"
+        >
+        </ax-select-box>
+      }
+    }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
@@ -3451,7 +3520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXSelectBoxModule,
                         AXTextBoxModule,
                         AXValidationModule,
-                    ]
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -3638,43 +3707,49 @@ class AXPNumberBoxWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPNumberBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      @for(number of internalValue(); track $index){
-      <ax-number-box
-        class="ax-col-span-12"
-        [minValue]="minValue()"
-        [maxValue]="maxValue()"
-        [decimals]="decimals()"
-        [thousandsSeparator]="seprator()"
-        [placeholder]="placeholder()"
-        [ngModel]="number"
-        (onValueChanged)="handleValueChange($event, $index)"
-        [disabled]="disabled()"
-      >
-      @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-        }
-        @if(clearButton()) {
-        <ax-clear-button></ax-clear-button>
-        } @if(multiple()){
-        <ax-suffix>
-          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-            <ax-icon class="far fa-trash"> </ax-icon>
-          </ax-button>
-        </ax-suffix>
-        }
-      </ax-number-box>
-      } @if(multiple()) {
-      <ax-button
-        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-        [disabled]="disabled()"
-        look="twotone"
-        (onClick)="addItem()"
-        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
-      >
-        <ax-prefix>
-          <ax-icon class="fa-solid fa-add"></ax-icon>
-        </ax-prefix>
-      </ax-button>
+      @for (number of internalValue(); track $index) {
+        <ax-number-box
+          class="ax-col-span-12"
+          [minValue]="minValue()"
+          [maxValue]="maxValue()"
+          [decimals]="decimals()"
+          [thousandsSeparator]="seprator()"
+          [placeholder]="placeholder()"
+          [ngModel]="number"
+          (onValueChanged)="handleValueChange($event, $index)"
+          [disabled]="disabled()"
+        >
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (clearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
+          @if (multiple()) {
+            <ax-suffix>
+              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                <ax-icon class="far fa-trash"> </ax-icon>
+              </ax-button>
+            </ax-suffix>
+          }
+        </ax-number-box>
+      }
+      @if (multiple()) {
+        <ax-button
+          [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+          [disabled]="disabled()"
+          look="twotone"
+          (onClick)="addItem()"
+          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+        >
+          <ax-prefix>
+            <ax-icon class="fa-solid fa-add"></ax-icon>
+          </ax-prefix>
+        </ax-button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3684,48 +3759,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      @for(number of internalValue(); track $index){
-      <ax-number-box
-        class="ax-col-span-12"
-        [minValue]="minValue()"
-        [maxValue]="maxValue()"
-        [decimals]="decimals()"
-        [thousandsSeparator]="seprator()"
-        [placeholder]="placeholder()"
-        [ngModel]="number"
-        (onValueChanged)="handleValueChange($event, $index)"
-        [disabled]="disabled()"
-      >
-      @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-        }
-        @if(clearButton()) {
-        <ax-clear-button></ax-clear-button>
-        } @if(multiple()){
-        <ax-suffix>
-          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-            <ax-icon class="far fa-trash"> </ax-icon>
-          </ax-button>
-        </ax-suffix>
-        }
-      </ax-number-box>
-      } @if(multiple()) {
-      <ax-button
-        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-        [disabled]="disabled()"
-        look="twotone"
-        (onClick)="addItem()"
-        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
-      >
-        <ax-prefix>
-          <ax-icon class="fa-solid fa-add"></ax-icon>
-        </ax-prefix>
-      </ax-button>
+      @for (number of internalValue(); track $index) {
+        <ax-number-box
+          class="ax-col-span-12"
+          [minValue]="minValue()"
+          [maxValue]="maxValue()"
+          [decimals]="decimals()"
+          [thousandsSeparator]="seprator()"
+          [placeholder]="placeholder()"
+          [ngModel]="number"
+          (onValueChanged)="handleValueChange($event, $index)"
+          [disabled]="disabled()"
+        >
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (clearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
+          @if (multiple()) {
+            <ax-suffix>
+              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                <ax-icon class="far fa-trash"> </ax-icon>
+              </ax-button>
+            </ax-suffix>
+          }
+        </ax-number-box>
+      }
+      @if (multiple()) {
+        <ax-button
+          [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+          [disabled]="disabled()"
+          look="twotone"
+          (onClick)="addItem()"
+          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+        >
+          <ax-prefix>
+            <ax-icon class="fa-solid fa-add"></ax-icon>
+          </ax-prefix>
+        </ax-button>
       }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXNumberBoxModule, FormsModule, AXDecoratorModule, AXFormModule, AXButtonModule]
+                    imports: [CommonModule, AXNumberBoxModule, FormsModule, AXDecoratorModule, AXFormModule, AXButtonModule],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -4267,7 +4348,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     handleValueChange(e, selectedIndex) {
         if (e.isUserInteraction) {
-            const newValues = this.internalValue().map((item, index) => (selectedIndex === index ? { ...item, value: e.value } : item));
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, value: e.value } : item);
             if (this.multiple())
                 this.setValue(newValues);
             else if (this.hasLabel())
@@ -4278,7 +4359,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     handleLabelChange(e, selectedIndex) {
         if (e.isUserInteraction) {
-            const newValues = this.internalValue().map((item, index) => (selectedIndex === index ? { ...item, label: e.value } : item));
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, label: e.value } : item);
             if (this.multiple())
                 this.setValue(newValues);
             else
@@ -4303,35 +4384,39 @@ class AXPPhoneBoxWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPPhoneBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       <ng-container *ngIf="multiple()">
-        @for(item of internalValue();track $index) {
-        <ax-text-box
-          [ngModel]="item.value"
-          (onValueChanged)="handleValueChange($event, $index)"
-          type="text"
-          class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
-          [class.lg:!ax-col-end-12]="!hasLabel()"
-        >
-          @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+        @for (item of internalValue(); track $index) {
+          <ax-text-box
+            [ngModel]="item.value"
+            (onValueChanged)="handleValueChange($event, $index)"
+            type="text"
+            class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
+            [class.lg:!ax-col-end-12]="!hasLabel()"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+          </ax-text-box>
+          @if (hasLabel()) {
+            <ax-select-box
+              [dataSource]="phoneLabels()"
+              [ngModel]="item.label"
+              (onValueChanged)="handleLabelChange($event, $index)"
+              class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
+            >
+            </ax-select-box>
           }
-        </ax-text-box>
-        @if(hasLabel()){
-        <ax-select-box
-          [dataSource]="phoneLabels()"
-          [ngModel]="item.label"
-          (onValueChanged)="handleLabelChange($event, $index)"
-          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
-        >
-        </ax-select-box>
-        }
-        <ax-button
-          look="twotone"
-          color="danger"
-          (onClick)="deleteItem($index)"
-          class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
-        >
-          <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-        </ax-button>
+          <ax-button
+            look="twotone"
+            color="danger"
+            (onClick)="deleteItem($index)"
+            class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
+          >
+            <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+          </ax-button>
         }
       </ng-container>
       <ng-container *ngIf="!multiple()">
@@ -4343,17 +4428,21 @@ class AXPPhoneBoxWidgetEditComponent extends AXPValueWidgetComponent {
           [class.lg:!ax-col-end-13]="!hasLabel"
         >
           @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
           }
         </ax-text-box>
-        @if(hasLabel()){
-        <ax-select-box
-          [dataSource]="phoneLabels()"
-          [ngModel]="internalValue()[0].label"
-          (onValueChanged)="handleLabelChange($event, 0)"
-          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
-        >
-        </ax-select-box>
+        @if (hasLabel()) {
+          <ax-select-box
+            [dataSource]="phoneLabels()"
+            [ngModel]="internalValue()[0].label"
+            (onValueChanged)="handleLabelChange($event, 0)"
+            class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
+          >
+          </ax-select-box>
         }
       </ng-container>
       <ax-button
@@ -4376,35 +4465,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       <ng-container *ngIf="multiple()">
-        @for(item of internalValue();track $index) {
-        <ax-text-box
-          [ngModel]="item.value"
-          (onValueChanged)="handleValueChange($event, $index)"
-          type="text"
-          class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
-          [class.lg:!ax-col-end-12]="!hasLabel()"
-        >
-          @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+        @for (item of internalValue(); track $index) {
+          <ax-text-box
+            [ngModel]="item.value"
+            (onValueChanged)="handleValueChange($event, $index)"
+            type="text"
+            class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
+            [class.lg:!ax-col-end-12]="!hasLabel()"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+          </ax-text-box>
+          @if (hasLabel()) {
+            <ax-select-box
+              [dataSource]="phoneLabels()"
+              [ngModel]="item.label"
+              (onValueChanged)="handleLabelChange($event, $index)"
+              class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
+            >
+            </ax-select-box>
           }
-        </ax-text-box>
-        @if(hasLabel()){
-        <ax-select-box
-          [dataSource]="phoneLabels()"
-          [ngModel]="item.label"
-          (onValueChanged)="handleLabelChange($event, $index)"
-          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
-        >
-        </ax-select-box>
-        }
-        <ax-button
-          look="twotone"
-          color="danger"
-          (onClick)="deleteItem($index)"
-          class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
-        >
-          <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-        </ax-button>
+          <ax-button
+            look="twotone"
+            color="danger"
+            (onClick)="deleteItem($index)"
+            class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
+          >
+            <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+          </ax-button>
         }
       </ng-container>
       <ng-container *ngIf="!multiple()">
@@ -4416,17 +4509,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           [class.lg:!ax-col-end-13]="!hasLabel"
         >
           @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
           }
         </ax-text-box>
-        @if(hasLabel()){
-        <ax-select-box
-          [dataSource]="phoneLabels()"
-          [ngModel]="internalValue()[0].label"
-          (onValueChanged)="handleLabelChange($event, 0)"
-          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
-        >
-        </ax-select-box>
+        @if (hasLabel()) {
+          <ax-select-box
+            [dataSource]="phoneLabels()"
+            [ngModel]="internalValue()[0].label"
+            (onValueChanged)="handleLabelChange($event, 0)"
+            class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
+          >
+          </ax-select-box>
         }
       </ng-container>
       <ax-button
@@ -4443,8 +4540,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXFormModule, AXButtonModule, AXDecoratorModule, AXSelectBoxModule, AXTextBoxModule, AXValidationModule],
-                    inputs: []
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSelectBoxModule,
+                        AXTextBoxModule,
+                        AXValidationModule,
+                    ],
+                    inputs: [],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -4726,22 +4832,22 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-wysiwyg-list></ax-wysiwyg-list>
         <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
       </ax-prefix>
-      @if(multiLanguage()){
-      <ax-suffix>
-        <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
-          <ax-prefix>
-            <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
-          </ax-prefix>
-        </ax-button>
-      </ax-suffix>
+      @if (multiLanguage()) {
+        <ax-suffix>
+          <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
+            <ax-prefix>
+              <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
+            </ax-prefix>
+          </ax-button>
+        </ax-suffix>
       }
     </ax-toolbar>
     @for (validation of validationRules(); track $index) {
-    <ax-validation-rule
-      [rule]="validation.rule"
-      [message]="validation.options?.message"
-      [options]="validation.options"
-    ></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
     }
   </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$3.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i2$3.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$3.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$3.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$3.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$3.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$3.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -4770,22 +4876,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         <ax-wysiwyg-list></ax-wysiwyg-list>
         <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
       </ax-prefix>
-      @if(multiLanguage()){
-      <ax-suffix>
-        <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
-          <ax-prefix>
-            <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
-          </ax-prefix>
-        </ax-button>
-      </ax-suffix>
+      @if (multiLanguage()) {
+        <ax-suffix>
+          <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
+            <ax-prefix>
+              <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
+            </ax-prefix>
+          </ax-button>
+        </ax-suffix>
       }
     </ax-toolbar>
     @for (validation of validationRules(); track $index) {
-    <ax-validation-rule
-      [rule]="validation.rule"
-      [message]="validation.options?.message"
-      [options]="validation.options"
-    ></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
     }
   </ax-wysiwyg-container>`,
                     encapsulation: ViewEncapsulation.None,
@@ -5062,17 +5168,19 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
       [multiple]="multiple()"
       (onValueChanged)="handleValueChange($event)"
     >
-      @if(allowSearch()) {
-      <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
-      } @if(hasClearButton()) {
-      <ax-clear-button></ax-clear-button>
-      } @for (validation of validationRules(); track $index) {
+      @if (allowSearch()) {
+        <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
+      }
+      @if (hasClearButton()) {
+        <ax-clear-button></ax-clear-button>
+      }
+      @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
           [message]="validation.options?.message"
           [options]="validation.options"
         ></ax-validation-rule>
-      } 
+      }
     </ax-select-box>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$3.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5092,17 +5200,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
       [multiple]="multiple()"
       (onValueChanged)="handleValueChange($event)"
     >
-      @if(allowSearch()) {
-      <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
-      } @if(hasClearButton()) {
-      <ax-clear-button></ax-clear-button>
-      } @for (validation of validationRules(); track $index) {
+      @if (allowSearch()) {
+        <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
+      }
+      @if (hasClearButton()) {
+        <ax-clear-button></ax-clear-button>
+      }
+      @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
           [message]="validation.options?.message"
           [options]="validation.options"
         ></ax-validation-rule>
-      } 
+      }
     </ax-select-box>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5381,7 +5491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXSelectionListModule, AXFormModule],
-                    inputs: []
+                    inputs: [],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -5436,11 +5546,11 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
       [direction]="direction()"
     >
       @for (validation of validationRules(); track $index) {
-      <ax-validation-rule
-        [rule]="validation.rule"
-        [message]="validation.options?.message"
-        [options]="validation.options"
-      ></ax-validation-rule>
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
       }
     </ax-selection-list>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5463,16 +5573,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
       [direction]="direction()"
     >
       @for (validation of validationRules(); track $index) {
-      <ax-validation-rule
-        [rule]="validation.rule"
-        [message]="validation.options?.message"
-        [options]="validation.options"
-      ></ax-validation-rule>
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
       }
     </ax-selection-list>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXSelectionListModule, AXFormModule]
+                    imports: [CommonModule, FormsModule, AXSelectionListModule, AXFormModule],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -6399,69 +6509,73 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         })
             .then((res) => {
             if (res.data) {
-                this.translatedValues = res.data;
-                this.internalValue()[0] = this.translatedValues[this.currentLanguage];
-            }
-            console.log(res.data);
-        });
-    }
-    getCurrentLanguage() {
-        this.currentLanguage = this.translationService.getActiveLang();
-    }
-    get __class() {
-        const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-flex-1`] = true;
-        return cls;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTextBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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()"
-      >
-        @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-clear-button></ax-clear-button>
-        } @if(multiLanguage()){
-        <ax-suffix>
-          <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
-            <ax-prefix>
-              <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
-            </ax-prefix>
-          </ax-button>
-        </ax-suffix>
-        }@if(multiple()){
-        <ax-suffix>
-          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-            <ax-icon class="far fa-trash"> </ax-icon>
-          </ax-button>
-        </ax-suffix>
-        }
-      </ax-text-box>
-      }@if(multiple()){
-      <ax-button
-        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-        look="twotone"
-        [disabled]="disabled()"
-        (onClick)="addItem()"
-        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
-      >
-        <ax-prefix>
-          <ax-icon class="fa-solid fa-add"></ax-icon>
-        </ax-prefix>
-      </ax-button>
+                this.translatedValues = res.data;
+                this.internalValue()[0] = this.translatedValues[this.currentLanguage];
+            }
+            console.log(res.data);
+        });
+    }
+    getCurrentLanguage() {
+        this.currentLanguage = this.translationService.getActiveLang();
+    }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTextBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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()"
+        >
+          @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-clear-button></ax-clear-button>
+          }
+          @if (multiLanguage()) {
+            <ax-suffix>
+              <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
+                <ax-prefix>
+                  <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
+                </ax-prefix>
+              </ax-button>
+            </ax-suffix>
+          }
+          @if (multiple()) {
+            <ax-suffix>
+              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                <ax-icon class="far fa-trash"> </ax-icon>
+              </ax-button>
+            </ax-suffix>
+          }
+        </ax-text-box>
+      }
+      @if (multiple()) {
+        <ax-button
+          [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+          look="twotone"
+          [disabled]="disabled()"
+          (onClick)="addItem()"
+          class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
+        >
+          <ax-prefix>
+            <ax-icon class="fa-solid fa-add"></ax-icon>
+          </ax-prefix>
+        </ax-button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.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: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -6473,50 +6587,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     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()"
-      >
-        @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-clear-button></ax-clear-button>
-        } @if(multiLanguage()){
-        <ax-suffix>
-          <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
-            <ax-prefix>
-              <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
-            </ax-prefix>
-          </ax-button>
-        </ax-suffix>
-        }@if(multiple()){
-        <ax-suffix>
-          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-            <ax-icon class="far fa-trash"> </ax-icon>
-          </ax-button>
-        </ax-suffix>
-        }
-      </ax-text-box>
-      }@if(multiple()){
-      <ax-button
-        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-        look="twotone"
-        [disabled]="disabled()"
-        (onClick)="addItem()"
-        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
-      >
-        <ax-prefix>
-          <ax-icon class="fa-solid fa-add"></ax-icon>
-        </ax-prefix>
-      </ax-button>
+        <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-clear-button></ax-clear-button>
+          }
+          @if (multiLanguage()) {
+            <ax-suffix>
+              <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()">
+                <ax-prefix>
+                  <ax-icon class="fa-solid fa-earth-americas"></ax-icon>
+                </ax-prefix>
+              </ax-button>
+            </ax-suffix>
+          }
+          @if (multiple()) {
+            <ax-suffix>
+              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                <ax-icon class="far fa-trash"> </ax-icon>
+              </ax-button>
+            </ax-suffix>
+          }
+        </ax-text-box>
+      }
+      @if (multiple()) {
+        <ax-button
+          [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+          look="twotone"
+          [disabled]="disabled()"
+          (onClick)="addItem()"
+          class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
+        >
+          <ax-prefix>
+            <ax-icon class="fa-solid fa-add"></ax-icon>
+          </ax-prefix>
+        </ax-button>
       }
     </div>
   `,
@@ -6719,8 +6837,8 @@ class AXPToggleWidgetEditComponent extends AXPValueWidgetComponent {
         (onValueChanged)="handleValueChanged($event)"
       >
       </ax-switch>
-      @if(label()) {
-      <ax-label [textContent]="label()"></ax-label>
+      @if (label()) {
+        <ax-label [textContent]="label()"></ax-label>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$5.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -6739,8 +6857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         (onValueChanged)="handleValueChanged($event)"
       >
       </ax-switch>
-      @if(label()) {
-      <ax-label [textContent]="label()"></ax-label>
+      @if (label()) {
+        <ax-label [textContent]="label()"></ax-label>
       }
     </div>
   `,
@@ -13206,27 +13324,29 @@ class AXPNumberUnitBoxWidgetEditComponent extends AXPValueWidgetComponent {
           [disabled]="disabled()"
         >
           @for (validation of validationRules(); track $index) {
-          <ax-validation-rule
-            [rule]="validation.rule"
-            [message]="validation.options?.message"
-            [options]="validation.options"
-          ></ax-validation-rule>
-          } @if (clearButton()) {
-          <ax-clear-button></ax-clear-button>
-          } @if(selectedUnit()) {
-          <ax-suffix>
-            <ax-dropdown-button [text]="selectedUnit()?.title" [look]="'blank'" [mode]="'dropdown'">
-              <ax-button-item-list>
-                @for (item of unit().items; track $index) {
-                <ax-button-item
-                  [text]="item.title"
-                  [selected]="item.name === selectedUnit()?.name"
-                  (onClick)="handleUnitClick(item)"
-                ></ax-button-item>
-                }
-              </ax-button-item-list>
-            </ax-dropdown-button>
-          </ax-suffix>
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (clearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
+          @if (selectedUnit()) {
+            <ax-suffix>
+              <ax-dropdown-button [text]="selectedUnit()?.title" [look]="'blank'" [mode]="'dropdown'">
+                <ax-button-item-list>
+                  @for (item of unit().items; track $index) {
+                    <ax-button-item
+                      [text]="item.title"
+                      [selected]="item.name === selectedUnit()?.name"
+                      (onClick)="handleUnitClick(item)"
+                    ></ax-button-item>
+                  }
+                </ax-button-item-list>
+              </ax-dropdown-button>
+            </ax-suffix>
           }
         </ax-number-box>
       </div>
@@ -13251,27 +13371,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           [disabled]="disabled()"
         >
           @for (validation of validationRules(); track $index) {
-          <ax-validation-rule
-            [rule]="validation.rule"
-            [message]="validation.options?.message"
-            [options]="validation.options"
-          ></ax-validation-rule>
-          } @if (clearButton()) {
-          <ax-clear-button></ax-clear-button>
-          } @if(selectedUnit()) {
-          <ax-suffix>
-            <ax-dropdown-button [text]="selectedUnit()?.title" [look]="'blank'" [mode]="'dropdown'">
-              <ax-button-item-list>
-                @for (item of unit().items; track $index) {
-                <ax-button-item
-                  [text]="item.title"
-                  [selected]="item.name === selectedUnit()?.name"
-                  (onClick)="handleUnitClick(item)"
-                ></ax-button-item>
-                }
-              </ax-button-item-list>
-            </ax-dropdown-button>
-          </ax-suffix>
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (clearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
+          @if (selectedUnit()) {
+            <ax-suffix>
+              <ax-dropdown-button [text]="selectedUnit()?.title" [look]="'blank'" [mode]="'dropdown'">
+                <ax-button-item-list>
+                  @for (item of unit().items; track $index) {
+                    <ax-button-item
+                      [text]="item.title"
+                      [selected]="item.name === selectedUnit()?.name"
+                      (onClick)="handleUnitClick(item)"
+                    ></ax-button-item>
+                  }
+                </ax-button-item-list>
+              </ax-dropdown-button>
+            </ax-suffix>
           }
         </ax-number-box>
       </div>
@@ -13467,7 +13589,7 @@ class AXPTabularDataWidgetEditComponent extends AXPValueWidgetComponent {
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-16K2wwtu.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-DZD9AEmz.mjs');
         const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : this.columns().length > 3 ? 'lg' : 'md',
             header: true,
@@ -13558,7 +13680,7 @@ class AXPTabularDataEditorWidgetViewComponent extends AXPValueWidgetComponent {
         this.columns = this.options()['columns'];
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-view-popup.component-DJtxN1VV.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-view-popup.component-CQT2kgt3.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -13640,9 +13762,7 @@ class AXPTimeDurationWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.internalValue = signal('');
     }
     async ngAfterViewInit() {
-        console.log(this.internalValue(), 'before');
         this.internalValue.set(await this.timeDurationFormatter.millisecondsToMask(this.rawValue, this.from, this.to));
-        console.log(this.internalValue(), 'after');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTimeDurationWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPTimeDurationWidgetColumnComponent, isStandalone: true, selector: "axp-time-duration-widget-column", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{ internalValue() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -14151,31 +14271,32 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
       >
         <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
-          format="yyyy/MM/dd"
-          [placeholder]="'from' | translate | async"
-          [ngModel]="value()?.from"
-          (onValueChanged)="handleValueChange($event, 'from')"
-        >
-          <ax-clear-button></ax-clear-button>
-        </ax-datetime-box>
-        <ax-datetime-box
-          format="yyyy/MM/dd"
-          [placeholder]="'to' | translate | async"
-          [ngModel]="value()?.to"
-          (onValueChanged)="handleValueChange($event, 'to')"
-        >
-          <ax-clear-button></ax-clear-button>
-        </ax-datetime-box>
-      </div>
-      } @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-clear-button></ax-clear-button>
-        </ax-datetime-box>
-      </div>
+      @if (filterTypeSelectedItem() === 'Between') {
+        <div class="ax-flex ax-gap-2 ax-mt-2">
+          <ax-datetime-box
+            format="YYYY/MM/DD"
+            [placeholder]="'from' | translate | async"
+            [ngModel]="value()?.from"
+            (onValueChanged)="handleValueChange($event, 'from')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-datetime-box>
+          <ax-datetime-box
+            format="YYYY/MM/DD"
+            [placeholder]="'to' | translate | async"
+            [ngModel]="value()?.to"
+            (onValueChanged)="handleValueChange($event, 'to')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-datetime-box>
+        </div>
+      }
+      @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-clear-button></ax-clear-button>
+          </ax-datetime-box>
+        </div>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -14193,31 +14314,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
       >
         <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
-          format="yyyy/MM/dd"
-          [placeholder]="'from' | translate | async"
-          [ngModel]="value()?.from"
-          (onValueChanged)="handleValueChange($event, 'from')"
-        >
-          <ax-clear-button></ax-clear-button>
-        </ax-datetime-box>
-        <ax-datetime-box
-          format="yyyy/MM/dd"
-          [placeholder]="'to' | translate | async"
-          [ngModel]="value()?.to"
-          (onValueChanged)="handleValueChange($event, 'to')"
-        >
-          <ax-clear-button></ax-clear-button>
-        </ax-datetime-box>
-      </div>
-      } @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-clear-button></ax-clear-button>
-        </ax-datetime-box>
-      </div>
+      @if (filterTypeSelectedItem() === 'Between') {
+        <div class="ax-flex ax-gap-2 ax-mt-2">
+          <ax-datetime-box
+            format="YYYY/MM/DD"
+            [placeholder]="'from' | translate | async"
+            [ngModel]="value()?.from"
+            (onValueChanged)="handleValueChange($event, 'from')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-datetime-box>
+          <ax-datetime-box
+            format="YYYY/MM/DD"
+            [placeholder]="'to' | translate | async"
+            [ngModel]="value()?.to"
+            (onValueChanged)="handleValueChange($event, 'to')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-datetime-box>
+        </div>
+      }
+      @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-clear-button></ax-clear-button>
+          </ax-datetime-box>
+        </div>
       }
     </div>
   `,
@@ -14320,41 +14442,41 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPNumberFilterWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPNumberFilterWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-items-center">
-      @if(this.operation()=== 'between'){
-      <div class="ax-flex-1 ax-flex ax-gap-4">
-        <ax-number-box
-          class="ax-w-full"
-          [placeholder]="('from' | translate | async) ?? 'From'"
-          [showSpinButtons]="false"
-          [thousandsSeparator]="seprator()"
-          [ngModel]="value()?.from"
-          (onValueChanged)="handleValueChange($event, 'from')"
-        >
-          <ax-clear-button></ax-clear-button>
-        </ax-number-box>
+      @if (this.operation() === 'between') {
+        <div class="ax-flex-1 ax-flex ax-gap-4">
+          <ax-number-box
+            class="ax-w-full"
+            [placeholder]="('from' | translate | async) ?? 'From'"
+            [showSpinButtons]="false"
+            [thousandsSeparator]="seprator()"
+            [ngModel]="value()?.from"
+            (onValueChanged)="handleValueChange($event, 'from')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-number-box>
+          <ax-number-box
+            class="ax-w-full"
+            [placeholder]="('to' | translate | async) ?? 'To'"
+            [showSpinButtons]="false"
+            [ngModel]="value()?.to"
+            [thousandsSeparator]="seprator()"
+            (onValueChanged)="handleValueChange($event, 'to')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-number-box>
+        </div>
+      } @else {
         <ax-number-box
-          class="ax-w-full"
-          [placeholder]="('to' | translate | async) ?? 'To'"
+          class="ax-flex-1"
+          [placeholder]="(placeholder() | translate | async) ?? ''"
+          [disabled]="this.operation() === 'isEmpty' || this.operation() === 'isNotEmpty'"
           [showSpinButtons]="false"
-          [ngModel]="value()?.to"
           [thousandsSeparator]="seprator()"
-          (onValueChanged)="handleValueChange($event, 'to')"
+          [ngModel]="value()"
+          (onValueChanged)="handleValueChange($event, 'self')"
         >
           <ax-clear-button></ax-clear-button>
         </ax-number-box>
-      </div>
-      }@else{
-      <ax-number-box
-        class="ax-flex-1"
-        [placeholder]="(placeholder() | translate | async) ?? ''"
-        [disabled]="this.operation() === 'isEmpty' || this.operation() === 'isNotEmpty'"
-        [showSpinButtons]="false"
-        [thousandsSeparator]="seprator()"
-        [ngModel]="value()"
-        (onValueChanged)="handleValueChange($event, 'self')"
-      >
-        <ax-clear-button></ax-clear-button>
-      </ax-number-box>
       }
       <axp-filter-operations
         type="number"
@@ -14369,41 +14491,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     template: `
     <div class="ax-flex ax-items-center">
-      @if(this.operation()=== 'between'){
-      <div class="ax-flex-1 ax-flex ax-gap-4">
-        <ax-number-box
-          class="ax-w-full"
-          [placeholder]="('from' | translate | async) ?? 'From'"
-          [showSpinButtons]="false"
-          [thousandsSeparator]="seprator()"
-          [ngModel]="value()?.from"
-          (onValueChanged)="handleValueChange($event, 'from')"
-        >
-          <ax-clear-button></ax-clear-button>
-        </ax-number-box>
+      @if (this.operation() === 'between') {
+        <div class="ax-flex-1 ax-flex ax-gap-4">
+          <ax-number-box
+            class="ax-w-full"
+            [placeholder]="('from' | translate | async) ?? 'From'"
+            [showSpinButtons]="false"
+            [thousandsSeparator]="seprator()"
+            [ngModel]="value()?.from"
+            (onValueChanged)="handleValueChange($event, 'from')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-number-box>
+          <ax-number-box
+            class="ax-w-full"
+            [placeholder]="('to' | translate | async) ?? 'To'"
+            [showSpinButtons]="false"
+            [ngModel]="value()?.to"
+            [thousandsSeparator]="seprator()"
+            (onValueChanged)="handleValueChange($event, 'to')"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-number-box>
+        </div>
+      } @else {
         <ax-number-box
-          class="ax-w-full"
-          [placeholder]="('to' | translate | async) ?? 'To'"
+          class="ax-flex-1"
+          [placeholder]="(placeholder() | translate | async) ?? ''"
+          [disabled]="this.operation() === 'isEmpty' || this.operation() === 'isNotEmpty'"
           [showSpinButtons]="false"
-          [ngModel]="value()?.to"
           [thousandsSeparator]="seprator()"
-          (onValueChanged)="handleValueChange($event, 'to')"
+          [ngModel]="value()"
+          (onValueChanged)="handleValueChange($event, 'self')"
         >
           <ax-clear-button></ax-clear-button>
         </ax-number-box>
-      </div>
-      }@else{
-      <ax-number-box
-        class="ax-flex-1"
-        [placeholder]="(placeholder() | translate | async) ?? ''"
-        [disabled]="this.operation() === 'isEmpty' || this.operation() === 'isNotEmpty'"
-        [showSpinButtons]="false"
-        [thousandsSeparator]="seprator()"
-        [ngModel]="value()"
-        (onValueChanged)="handleValueChange($event, 'self')"
-      >
-        <ax-clear-button></ax-clear-button>
-      </ax-number-box>
       }
       <axp-filter-operations
         type="number"
@@ -14481,8 +14603,8 @@ class AXPSelectFilterWidgetEditComponent extends AXPDataListWidgetComponent {
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
       >
-        @if(allowSearch()){
-        <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
+        @if (allowSearch()) {
+          <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
         }
         <ax-clear-button></ax-clear-button>
       </ax-select-box>
@@ -14503,8 +14625,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
       >
-        @if(allowSearch()){
-        <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
+        @if (allowSearch()) {
+          <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
         }
         <ax-clear-button></ax-clear-button>
       </ax-select-box>
@@ -14568,8 +14690,8 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
       >
-        @if(hasClearButton()){
-        <ax-clear-button></ax-clear-button>
+        @if (hasClearButton()) {
+          <ax-clear-button></ax-clear-button>
         }
       </ax-text-box>
       <axp-filter-operations
@@ -14593,8 +14715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         [ngModel]="value()"
         (onValueChanged)="handleValueChange($event)"
       >
-        @if(hasClearButton()){
-        <ax-clear-button></ax-clear-button>
+        @if (hasClearButton()) {
+          <ax-clear-button></ax-clear-button>
         }
       </ax-text-box>
       <axp-filter-operations
@@ -15453,28 +15575,28 @@ class AXPPanelWidgetDesignerComponent extends AXPLayoutWidgetComponent {
                 useExisting: AXPPanelWidgetDesignerComponent,
             },
         ], usesInheritance: true, ngImport: i0, template: `
-  <ax-collapse-group [look]="look()">
-    <ax-collapse
-      [caption]="caption()"
-      [icon]="icon()"
-      [showHeader]="showHeader()"
-      [isCollapsed]="collapsed()"
-      (isCollapsedChange)="handleCollapsedChange($event)"
-    >
-      @for (node of children(); track $index) {
-        <ng-container
-          axp-widget-designer-renderer
-          [node]="node"
-          [parentNode]="this"
-          [mode]="this.mode"
-          [locked]="this.locked"
-        ></ng-container>
+    <ax-collapse-group [look]="look()">
+      <ax-collapse
+        [caption]="caption()"
+        [icon]="icon()"
+        [showHeader]="showHeader()"
+        [isCollapsed]="collapsed()"
+        (isCollapsedChange)="handleCollapsedChange($event)"
+      >
+        @for (node of children(); track $index) {
+          <ng-container
+            axp-widget-designer-renderer
+            [node]="node"
+            [parentNode]="this"
+            [mode]="this.mode"
+            [locked]="this.locked"
+          ></ng-container>
         } @empty {
-        <axp-designer-add-widget-mini-button
-          class="ax-flex-1 ax-self-center ax-place-self-end"
-        ></axp-designer-add-widget-mini-button>
-      }
-    </ax-collapse>
+          <axp-designer-add-widget-mini-button
+            class="ax-flex-1 ax-self-center ax-place-self-end"
+          ></axp-designer-add-widget-mini-button>
+        }
+      </ax-collapse>
     </ax-collapse-group>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$b.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$b.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -15483,28 +15605,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     selector: 'axp-panel-widget',
                     template: `
-  <ax-collapse-group [look]="look()">
-    <ax-collapse
-      [caption]="caption()"
-      [icon]="icon()"
-      [showHeader]="showHeader()"
-      [isCollapsed]="collapsed()"
-      (isCollapsedChange)="handleCollapsedChange($event)"
-    >
-      @for (node of children(); track $index) {
-        <ng-container
-          axp-widget-designer-renderer
-          [node]="node"
-          [parentNode]="this"
-          [mode]="this.mode"
-          [locked]="this.locked"
-        ></ng-container>
+    <ax-collapse-group [look]="look()">
+      <ax-collapse
+        [caption]="caption()"
+        [icon]="icon()"
+        [showHeader]="showHeader()"
+        [isCollapsed]="collapsed()"
+        (isCollapsedChange)="handleCollapsedChange($event)"
+      >
+        @for (node of children(); track $index) {
+          <ng-container
+            axp-widget-designer-renderer
+            [node]="node"
+            [parentNode]="this"
+            [mode]="this.mode"
+            [locked]="this.locked"
+          ></ng-container>
         } @empty {
-        <axp-designer-add-widget-mini-button
-          class="ax-flex-1 ax-self-center ax-place-self-end"
-        ></axp-designer-add-widget-mini-button>
-      }
-    </ax-collapse>
+          <axp-designer-add-widget-mini-button
+            class="ax-flex-1 ax-self-center ax-place-self-end"
+          ></axp-designer-add-widget-mini-button>
+        }
+      </ax-collapse>
     </ax-collapse-group>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -15558,25 +15680,25 @@ class AXPPanelWidgetViewComponent extends AXPLayoutWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPPanelWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPPanelWidgetViewComponent, isStandalone: true, selector: "axp-panel-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-  <ax-collapse-group [look]="look()">
-    <ax-collapse
-      [caption]="caption()"
-      [icon]="icon()"
-      [showHeader]="showHeader()"
-      [isCollapsed]="collapsed()"
-      (isCollapsedChange)="handleCollapsedChange($event)"
-    >
-      @for (node of children(); track $index) {
-      <ng-container
-        axp-widget-renderer
-        [node]="node"
-        [index]="index"
-        [parentNode]="this"
-        [mode]="this.mode"
-      ></ng-container>
-      }
-    </ax-collapse>
-  </ax-collapse-group>
+    <ax-collapse-group [look]="look()">
+      <ax-collapse
+        [caption]="caption()"
+        [icon]="icon()"
+        [showHeader]="showHeader()"
+        [isCollapsed]="collapsed()"
+        (isCollapsedChange)="handleCollapsedChange($event)"
+      >
+        @for (node of children(); track $index) {
+          <ng-container
+            axp-widget-renderer
+            [node]="node"
+            [index]="index"
+            [parentNode]="this"
+            [mode]="this.mode"
+          ></ng-container>
+        }
+      </ax-collapse>
+    </ax-collapse-group>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$b.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$b.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPPanelWidgetViewComponent, decorators: [{
@@ -15584,25 +15706,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     selector: 'axp-panel-widget',
                     template: `
-  <ax-collapse-group [look]="look()">
-    <ax-collapse
-      [caption]="caption()"
-      [icon]="icon()"
-      [showHeader]="showHeader()"
-      [isCollapsed]="collapsed()"
-      (isCollapsedChange)="handleCollapsedChange($event)"
-    >
-      @for (node of children(); track $index) {
-      <ng-container
-        axp-widget-renderer
-        [node]="node"
-        [index]="index"
-        [parentNode]="this"
-        [mode]="this.mode"
-      ></ng-container>
-      }
-    </ax-collapse>
-  </ax-collapse-group>
+    <ax-collapse-group [look]="look()">
+      <ax-collapse
+        [caption]="caption()"
+        [icon]="icon()"
+        [showHeader]="showHeader()"
+        [isCollapsed]="collapsed()"
+        (isCollapsedChange)="handleCollapsedChange($event)"
+      >
+        @for (node of children(); track $index) {
+          <ng-container
+            axp-widget-renderer
+            [node]="node"
+            [index]="index"
+            [parentNode]="this"
+            [mode]="this.mode"
+          ></ng-container>
+        }
+      </ax-collapse>
+    </ax-collapse-group>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXPLayoutBuilderModule, AXCollapseModule],