@acorex/platform 18.1.3 → 18.1.5

package/fesm2022/acorex-platform-widgets.mjs

@@ -11,7 +11,7 @@ import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBool
 import * as i1$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, signal, inject, HostBinding, effect, ViewEncapsulation, ViewChild, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, ViewChild, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
@@ -19,10 +19,10 @@ import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i4$1 from '@acorex/components/form';
+import * as i3$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXPopupService } from '@acorex/components/popup';
-import * as i3$1 from '@acorex/components/select-box';
+import * as i3$2 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
 import * as i7 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
@@ -32,15 +32,15 @@ import { AXValidationModule, AXValidationService } from '@acorex/core/validation
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXPClipBoardService } from '@acorex/platform/common';
 import { AXDateTimeFormatter } from '@acorex/core/date-time';
-import * as i3$2 from '@acorex/components/datetime-box';
+import * as i3$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
-import * as i4$2 from '@acorex/components/text-area';
+import * as i4$1 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormatService } from '@acorex/core/format';
 import { isNumber, sum, get } from 'lodash-es';
 import * as i1$4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
-import * as i3$3 from '@acorex/components/password-box';
+import * as i3$4 from '@acorex/components/password-box';
 import { AXPasswordBoxModule } from '@acorex/components/password-box';
 import { AXPlatform } from '@acorex/core/platform';
 import { AXPHtmlUtils } from '@acorex/platform/core';
@@ -58,7 +58,7 @@ import * as i2$4 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
-import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
+import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent, AXPDesignerAddWidgetButtonComponent } from '@acorex/platform/layout/designer';
 import * as i1$8 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXColorUtil } from '@acorex/core/utils';
@@ -120,7 +120,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXButtonModule, AXLoadingModule, AXDecoratorModule, AXBadgeModule],
-                    inputs: [],
                 }]
         }] });
 
@@ -837,6 +836,7 @@ const AXPButtonWidget = {
     group: AXP_WIDGETS_ACTION_GROUP,
     type: 'action',
     properties: [
+        AXP_NAME_PROPERTY,
         AXP_DISABLED_PROPERTY,
         cloneProperty(AXP_TEXT_PROPERTY, { schema: { defaultValue: 'Click Here' } }),
         AXP_STYLE_COLOR_PROPERTY,
@@ -846,7 +846,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-B9bfVuC4.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-M_JuDPbt.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -921,7 +921,7 @@ const AXPCheckBoxWidget = {
             component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-DzGg-uFi.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
         },
         view: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-tPk6Gylo.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-CDA7Jwov.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
         },
         edit: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -1005,7 +1005,7 @@ class popupComponent extends AXBasePageComponent {
         <ax-button [text]="'apply' | translate | async" color="primary" (onClick)="handleClose(form)"></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { 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: AXDecoratorModule }, { 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i4$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { 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: AXDecoratorModule }, { 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i3$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: popupComponent, decorators: [{
             type: Component,
@@ -1046,7 +1046,15 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         this.hasIcon = computed(() => this.options()['hasIcon']);
         this.disabled = computed(() => this.options()['disabled']);
         this.placeholder = computed(() => this.options()['placeholder'] ?? `Enter ${this.type()} ...`);
-        this.format = signal(undefined);
+        this.format = computed(() => {
+            if (this.hasIcon() || this.hasLabel()) {
+                return 'object';
+            }
+            else {
+                return 'string';
+            }
+        });
+        this.internalValue = computed(() => this.valueToArray());
         this.popup = inject(AXPopupService);
         this.dataSource = new AXDataSource({
             pageSize: this.labelList().length,
@@ -1060,7 +1068,6 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
                 return Promise.resolve(this.labelList().find((i) => i === key));
             },
         });
-        this.internalValue = computed(() => this.valueToArray());
         this.validationService = inject(AXValidationService);
         this._validationRules = [];
         this.itemToArray = (item) => {
@@ -1129,50 +1136,36 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         }
     }
     generateClasses(element) {
+        const isValue = element === 'value';
         if (this.multiple()) {
             if (this.hasLabel()) {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7';
-                }
-                else {
-                    return 'ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-12 ';
-                }
+                return isValue
+                    ? 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7'
+                    : 'ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-12';
             }
             else {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-12';
-                }
+                return isValue ? 'ax-col-start-1 ax-col-end-11 sm:ax-col-end-12 md:ax-col-end-12' : '';
             }
         }
         else {
             if (this.hasLabel()) {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7';
-                }
-                else {
-                    return 'ax-col-start-1 ax-col-end-13 lg:ax-col-start-7 lg:ax-col-end-13';
-                }
+                return isValue
+                    ? 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7'
+                    : 'ax-col-start-1 ax-col-end-13 lg:ax-col-start-7 lg:ax-col-end-13';
             }
             else {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-13';
-                }
+                return isValue ? 'ax-col-start-1 ax-col-end-13' : '';
             }
         }
     }
     get validationRules() {
+        console.log(this._validationRules);
         return this._validationRules;
     }
     set validationRules(v) {
         this._validationRules = v;
     }
     valueToArray() {
-        if (this.hasIcon() || this.hasLabel()) {
-            this.format.set('object');
-        }
-        else {
-            this.format.set('string');
-        }
         const value = this.getValue();
         if (Array.isArray(value)) {
             return value.map((item) => this.itemToArray(item));
@@ -1201,7 +1194,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPContactWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<div class="lg:ax-grid lg:ax-grid-cols-12 lg:ax-gap-4">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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"
@@ -1218,7 +1211,11 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         [message]="validation.options?.message"
         [options]="validation.options"
       ></ax-validation-rule>
+      } @if(type()==='email'){
+      <ax-validation-rule [rule]="'email'"></ax-validation-rule>
       }
+      <ax-validation-rule message="{{ 'validation.messages.required' | translate | async }}" rule="required">
+      </ax-validation-rule>
     </ax-text-box>
     @if(hasLabel()){
     <ax-select-box
@@ -1248,19 +1245,19 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
+      class="ax-col-start-9 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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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: i1$2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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: i1$2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<div class="lg:ax-grid lg:ax-grid-cols-12 lg:ax-gap-4">
+                    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"
@@ -1277,7 +1274,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [message]="validation.options?.message"
         [options]="validation.options"
       ></ax-validation-rule>
+      } @if(type()==='email'){
+      <ax-validation-rule [rule]="'email'"></ax-validation-rule>
       }
+      <ax-validation-rule message="{{ 'validation.messages.required' | translate | async }}" rule="required">
+      </ax-validation-rule>
     </ax-text-box>
     @if(hasLabel()){
     <ax-select-box
@@ -1307,7 +1308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
+      class="ax-col-start-9 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>
@@ -1486,6 +1487,8 @@ const AXPContactWidget = {
     icon: 'fa-solid fa-address-book',
     type: 'editor',
     properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
         {
             name: 'type',
             title: 'Contact Type',
@@ -1494,7 +1497,7 @@ const AXPContactWidget = {
                 dataType: 'string',
                 nullable: false,
                 interface: {
-                    defaultValue: { id: 'link', title: 'Link' },
+                    defaultValue: 'link',
                     name: 'type',
                     path: 'options.type',
                     type: AXPWidgetsCatalog.select,
@@ -1509,27 +1512,6 @@ const AXPContactWidget = {
             },
             visible: true,
         },
-        {
-            name: 'labelList',
-            title: 'Label List',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                nullable: false,
-                interface: {
-                    name: 'labelList',
-                    path: 'options.labelList',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { id: 'primary', title: 'Primary' },
-                            { id: 'secondary', title: 'Secondary' },
-                        ],
-                    },
-                },
-            },
-            visible: false,
-        },
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
@@ -1693,7 +1675,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
       ></ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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", "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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -1826,12 +1808,12 @@ var dateTimeBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPDateTimeBoxWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{rawValue()}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{getValue()}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{rawValue()}}`,
+                    template: `{{getValue()}}`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -2144,7 +2126,7 @@ class AXPEmailBoxWidgetEditComponent extends AXPWidgetComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }, { 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", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: 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: "18.2.0", ngImport: i0, type: AXPEmailBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -2422,17 +2404,11 @@ var largeTextWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPLargeTextWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        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._validationRules = [];
-    }
-    get validationRules() {
-        return this._validationRules;
-    }
-    set validationRules(v) {
-        this._validationRules = v;
+        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.validationRules = computed(() => this.options()['validationRules'] ?? []);
     }
     get __class() {
         const cls = {};
@@ -2442,27 +2418,43 @@ class AXPLargeTextWidgetEditComponent extends AXPWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLargeTextWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLargeTextWidgetEditComponent, isStandalone: true, selector: "axp-large-text-box-widget", inputs: { disabled: "disabled", clearButton: "clearButton" }, host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    <ax-text-area [disabled]="disabled()" [ngModel]="getValue()" (ngModelChange)="setValue($event)" [placeholder]="placeholder()">
+    <ax-text-area
+      [disabled]="disabled()"
+      [ngModel]="getValue()"
+      (ngModelChange)="setValue($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>
+      <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>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLargeTextWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-large-text-box-widget',
                     template: `
-    <ax-text-area [disabled]="disabled()" [ngModel]="getValue()" (ngModelChange)="setValue($event)" [placeholder]="placeholder()">
+    <ax-text-area
+      [disabled]="disabled()"
+      [ngModel]="getValue()"
+      (ngModelChange)="setValue($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>
+      <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>
   `,
@@ -2962,7 +2954,7 @@ class AXPLinkWidgetEditComponent extends AXPWidgetComponent {
     >
     </ax-select-box>
     } }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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 }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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: "18.2.0", ngImport: i0, type: AXPLinkWidgetEditComponent, decorators: [{
             type: Component,
@@ -3176,15 +3168,15 @@ const AXPLinkWidget = {
 class AXPNumberBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.internalValue = computed(() => (Array.isArray(this.formattedValue()) ? this.formattedValue() : [this.formattedValue()]));
         this.multiple = computed(() => this.options()['multiple']);
         this.format = computed(() => this.options()['format']);
         this.formatService = inject(AXFormatService);
     }
-    getValue() {
-        if (!isNumber(super.getValue()))
+    formattedValue() {
+        if (!isNumber(this.getValue()))
             return '---';
-        const value = Number(super.getValue());
+        const value = Number(this.getValue());
         return this.formatService.format(value, 'number', this.format());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPNumberBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -3231,6 +3223,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         this.decimals = computed(() => this.options()['decimals'] ?? 0);
         this.minValue = computed(() => this.options()['minValue']);
         this.maxValue = computed(() => this.options()['maxValue']);
+        this.seprator = computed(() => this.options()['seprator'] ?? null);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.validationService = inject(AXValidationService);
         this.validationRules = [];
@@ -3280,7 +3273,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         [minValue]="minValue()"
         [maxValue]="maxValue()"
         [decimals]="decimals()"
-        [thousandsSeparator]="','"
+        [thousandsSeparator]="seprator()"
         [placeholder]="placeholder()"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
@@ -3311,7 +3304,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
       </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", "hasWheel", "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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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", "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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3324,7 +3317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [minValue]="minValue()"
         [maxValue]="maxValue()"
         [decimals]="decimals()"
-        [thousandsSeparator]="','"
+        [thousandsSeparator]="seprator()"
         [placeholder]="placeholder()"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
@@ -3588,7 +3581,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPWidgetComponent {
       <ax-clear-button></ax-clear-button>
       }
     </ax-password-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$3.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$4.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3990,7 +3983,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }, { 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", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: 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: "18.2.0", ngImport: i0, type: AXPPhoneBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -4306,7 +4299,7 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
       [options]="validation.options"
     ></ax-validation-rule>
     }
-  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -4544,6 +4537,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.multiple = computed(() => this.options()['multiple']);
+        this.validationRules = computed(() => this.options()['validationRules'] ?? []);
         this.dataSource = computed(() => {
             const rawValue = this.options()['dataSource'];
             if (rawValue instanceof AXDataSource) {
@@ -4593,12 +4587,17 @@ class AXPSelectBoxWidgetEditComponent extends AXPWidgetComponent {
       [multiple]="multiple()"
       (onValueChanged)="handleValueChange($event)"
     >
-      @if(hasClearButton())
-      {
-        <ax-clear-button></ax-clear-button>
+      @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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -4616,16 +4615,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [multiple]="multiple()"
       (onValueChanged)="handleValueChange($event)"
     >
-      @if(hasClearButton())
-      {
-        <ax-clear-button></ax-clear-button>
+      @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>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDecoratorModule],
-                    inputs: [],
+                    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXFormModule, AXDecoratorModule],
                 }]
         }], propDecorators: { selectbox: [{
                 type: ViewChild,
@@ -4920,7 +4923,7 @@ class AXPSelectionListWidgetEditComponent extends AXPWidgetComponent {
       <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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -5208,7 +5211,7 @@ class AXPTextBoxWidgetEditComponent extends AXPWidgetComponent {
       </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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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-sub-title, 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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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-sub-title, 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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTextBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5370,40 +5373,80 @@ class AXPToggleWidgetViewComponent extends AXPWidgetComponent {
         this.trulyText = computed(() => this.options()['trulyText']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` @if(getValue()){ @if(trulyText()){
-    <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText()){
-    <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "axp-switch-widget", usesInheritance: true, ngImport: i0, template: `
+    @if(getValue()){ 
+      @if(trulyText())
+      {
+      <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
+      }
+      @else { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+        }
+        @else 
+        {
+        <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
+        } 
+      } 
+    }@else 
+    { 
+      @if(falsyText())
+      {
+      <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
+      }
+      @else 
+      { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+        }@else 
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
+        } 
+      } 
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ` @if(getValue()){ @if(trulyText()){
-    <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText()){
-    <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`,
+                    selector: 'axp-switch-widget',
+                    template: `
+    @if(getValue()){ 
+      @if(trulyText())
+      {
+      <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
+      }
+      @else { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+        }
+        @else 
+        {
+        <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
+        } 
+      } 
+    }@else 
+    { 
+      @if(falsyText())
+      {
+      <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
+      }
+      @else 
+      { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+        }@else 
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
+        } 
+      } 
+    }`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXDecoratorModule, AXBadgeModule],
-                    inputs: [],
                 }]
         }] });
 
@@ -5428,12 +5471,12 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-swith-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-switch-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-swith-widget',
+                    selector: 'axp-switch-widget',
                     template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5522,11 +5565,12 @@ var toggleWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPToggleWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetPrintComponent, isStandalone: true, selector: "axp-swith-widget", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-swith-widget',
                     template: ``,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6970,8 +7014,7 @@ class AXPBlockWidgetDesignerComponent extends AXPContainerWidgetComponent {
         const cls = {};
         //
         cls[`ax-w-full`] = true;
-        cls[`ax-border`] = true;
-        cls[`ax-border-dashed`] = true;
+        cls[`ax-widget-outline`] = true;
         //
         cls[`ax-flex`] = true;
         cls[`ax-gap-${this.gap()}`] = true;
@@ -7004,8 +7047,8 @@ class AXPBlockWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @for (node of children(); track $index) {
     <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-    <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    <axp-designer-add-widget-mini-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-mini-button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7015,11 +7058,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @for (node of children(); track $index) {
     <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-    <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-button>
+    <axp-designer-add-widget-mini-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-mini-button>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPBlockWidgetDesignerComponent
@@ -7071,7 +7114,7 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPBlockWidgetViewComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -7081,7 +7124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-block-widget',
                     template: `
     @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7109,6 +7152,7 @@ const AXPBlockWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'container',
     properties: [
+        AXP_NAME_PROPERTY,
         AXP_FONT_SIZE_PROPERTY,
         cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
         ...AXP_LAYOUT_FLEX_PROPERTIES
@@ -7142,7 +7186,7 @@ class AXPPageWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPageWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPageWidgetViewComponent, isStandalone: true, selector: "axp-page-widget", host: { properties: { "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -7152,7 +7196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-page-widget',
                     template: `
     @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7181,7 +7225,21 @@ const AXPPageWidget = {
     properties: [
         AXP_FONT_SIZE_PROPERTY,
         AXP_THEME_PROPERTY,
-        AXP_BG_COLOR_PROPERTY
+        AXP_BG_COLOR_PROPERTY,
+        createBooleanProperty({
+            name: "hasHeader",
+            path: 'options.hasHeader',
+            title: "Header",
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+        }),
+        createBooleanProperty({
+            name: "hasFooter",
+            path: 'options.hasFooter',
+            title: "Footer",
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+        })
     ],
     components: {
         view: {
@@ -7194,7 +7252,7 @@ const AXPPageWidget = {
             component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-widgets-page-widget-designer.component-6BMZ0qRw.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-page-widget-designer.component-BL_EAwUs.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
         },
     },
 };
@@ -7245,18 +7303,23 @@ var repeaterWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.rows = signal([]);
         this.disabled = computed(() => this.options()["disabled"]);
         this.hasControls = computed(() => this.options()["hasControls"]);
-    }
-    ngAfterViewInit() {
-        this.rows.set(this.getValue() ?? []);
+        this.rows = computed(() => {
+            return this.getValue() ?? [];
+        });
     }
     handleAddItemClick() {
         this.addNew();
     }
+    handleRemoveItemClick(i) {
+        this.removeItem(i);
+    }
     addNew() {
-        this.rows.update((prev) => [...prev, {}]);
+        this.setValue([...(this.getValue() ?? []), {}]);
+    }
+    removeItem(index) {
+        this.setValue(this.getValue().splice(index, 1));
     }
     api() {
         return {
@@ -7277,7 +7340,8 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        (onClick)="handleRemoveItemClick(i)"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
@@ -7301,7 +7365,7 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
         <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
       }
     }
-    <ng-template #tpl let-index>   
+    <ng-template #tpl let-index="index">   
       @for (node of children();track $index) 
       {
       <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="index" [mode]="this.mode"></ng-container>
@@ -7326,7 +7390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        (onClick)="handleRemoveItemClick(i)"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
@@ -7350,7 +7415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
       }
     }
-    <ng-template #tpl let-index>   
+    <ng-template #tpl let-index="index">   
       @for (node of children();track $index) 
       {
       <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="index" [mode]="this.mode"></ng-container>
@@ -7411,14 +7476,14 @@ class AXPRepeaterWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @if(hasControls())
     {
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <div class="ax-col-span-11 ax-border-dashed ax-border">
+      <div class="ax-col-span-11">
         <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
       </div>
       <ax-button
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
@@ -7442,10 +7507,10 @@ class AXPRepeaterWidgetDesignerComponent extends AXPContainerWidgetComponent {
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode"> </ng-container>
       }
       @empty {
-       <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end axp-empty-space ax-block ax-p-0 " ></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7455,14 +7520,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @if(hasControls())
     {
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <div class="ax-col-span-11 ax-border-dashed ax-border">
+      <div class="ax-col-span-11">
         <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
       </div>
       <ax-button
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
@@ -7486,13 +7551,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode"> </ng-container>
       }
       @empty {
-       <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end axp-empty-space ax-block ax-p-0 " ></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
       }
     </ng-template>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPRepeaterWidgetDesignerComponent
@@ -7665,12 +7730,13 @@ const AXPQrcodeWidget = {
 
 class AXPColorBoxWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{ rawValue() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "axp-color-box-widget", usesInheritance: true, ngImport: i0, template: `{{ getValue() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{ rawValue() }}`,
+                    selector: 'axp-color-box-widget',
+                    template: `{{ getValue() }}`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -7698,7 +7764,7 @@ class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPColorBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPColorBoxWidgetEditComponent, isStandalone: true, selector: "axp-color-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-color-box [disabled]="disabled()" [readonly]="readonly()" [ngModel]="getValue()" [placeholder]="placeholder()" (onValueChanged)="handleValueChanged($event)">
       @for (validation of validationRules(); track $index) {
           <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
@@ -7707,11 +7773,12 @@ class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
       <ax-clear-button></ax-clear-button>
       } 
     </ax-color-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$5.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$5.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-color-box-widget',
                     template: `
     <ax-color-box [disabled]="disabled()" [readonly]="readonly()" [ngModel]="getValue()" [placeholder]="placeholder()" (onValueChanged)="handleValueChanged($event)">
       @for (validation of validationRules(); track $index) {
@@ -7778,12 +7845,12 @@ var colorBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPColorBoxWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{rawValue()}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{getValue()}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{rawValue()}}`,
+                    template: `{{getValue()}}`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -7813,7 +7880,7 @@ const AXPColorBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-Bb3aXCNZ.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-DIvi0BtT.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return colorBoxWidgetView_component; }).then((c) => c.AXPColorBoxWidgetViewComponent),
@@ -7861,10 +7928,10 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
     <ax-form-field>
       <ax-label>{{ label() }}</ax-label>
       @for (node of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -7874,7 +7941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     <ax-form-field>
       <ax-label>{{ label() }}</ax-label>
       @for (node of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
   `,
@@ -7898,10 +7965,11 @@ class AXPFormFieldWidgetDesignerComponent extends AXPContainerWidgetComponent {
         this.label = computed(() => this.options()["label"]);
     }
     get __class() {
-        const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-w-full`] = true;
-        return cls;
+        return {
+            'ax-widget-container': true,
+            'ax-block': true,
+            'ax-w-full': true
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetDesignerComponent, isStandalone: true, selector: "axp-form-field-widget", host: { properties: { "class": "this.__class" } }, providers: [
@@ -7915,10 +7983,10 @@ class AXPFormFieldWidgetDesignerComponent extends AXPContainerWidgetComponent {
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
      }
      @empty {
-       <axp-designer-add-widget-button class="axp-empty-space ax-block ax-p-0 "></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
      }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7931,13 +7999,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
      }
      @empty {
-       <axp-designer-add-widget-button class="axp-empty-space ax-block ax-p-0 "></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
      }
     </ax-form-field>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPFormFieldWidgetDesignerComponent
@@ -7960,7 +8028,11 @@ const AXPFormFieldWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'container',
     icon: 'fa-solid fa-pen-field',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_LABEL_PROPERTY],
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_LABEL_PROPERTY
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return formFieldWidgetView_component; }).then((c) => c.AXPFormFieldWidgetViewComponent),
@@ -7985,10 +8057,10 @@ class AXPGridWidgetViewComponent extends AXPWidgetComponent {
         this.gap = computed(() => this.options()['gap'] ?? 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "axp-grid-layout-widget", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
       @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -7996,10 +8068,11 @@ class AXPGridWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-layout-widget',
                     template: `
     <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
       @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `,
@@ -8076,11 +8149,11 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
         });
     }
     get __class() {
-        const cls = {};
-        //
-        cls[`ax-block`] = true;
-        cls[`ax-w-full`] = true;
-        return cls;
+        return {
+            'ax-widget-container': true,
+            'ax-block': true,
+            'ax-w-full': true
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridWidgetDesignerComponent, isStandalone: true, selector: "axp-grid-layout-widget", host: { properties: { "class": "this.__class" } }, providers: [
@@ -8216,23 +8289,24 @@ class AXPGridItemWidgetViewComponent extends AXPContainerWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "axp-grid-layout-item-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
                 provide: AXPContainerWidgetComponent,
                 useExisting: AXPGridItemWidgetViewComponent,
             },
         ], usesInheritance: true, ngImport: i0, template: `
     @for (child of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-layout-item-widget',
                     template: `
     @for (child of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
   `,
                     standalone: true,
@@ -8273,7 +8347,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
-        this.designerService = inject(AXPDesignerService);
         this.colSpan = computed(() => this.options()['colSpan']);
         this.colStart = computed(() => this.options()['colStart']);
         this.colEnd = computed(() => this.options()['colEnd']);
@@ -8283,12 +8356,10 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
         this.flexDirection = computed(() => this.options()['flexDirection']?.id);
         this.gap = computed(() => this.options()['gap'] ?? 0);
     }
-    async handleSlotClick() {
-        await this.designerService.showPicker(this.node);
-    }
     get __class() {
         const cls = {};
         //
+        cls[`ax-widget-container`] = true;
         cls[`ax-flex`] = true;
         cls[`ax-gap-${this.gap()}`] = true;
         //
@@ -8332,13 +8403,9 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @for (child of children(); track $index) {
     <ng-container axp-widget-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
     } @empty {
-    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center">
-      <div class="ax-m-auto ax-p-4 ax-text-primary-500 hover:ax-text-primary-800" (click)="handleSlotClick()">
-        <i class="fa-solid fa-plus "></i>
-      </div>
-    </div>
+      <axp-designer-add-widget-mini-button  ></axp-designer-add-widget-mini-button>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -8348,11 +8415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @for (child of children(); track $index) {
     <ng-container axp-widget-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
     } @empty {
-    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center">
-      <div class="ax-m-auto ax-p-4 ax-text-primary-500 hover:ax-text-primary-800" (click)="handleSlotClick()">
-        <i class="fa-solid fa-plus "></i>
-      </div>
-    </div>
+      <axp-designer-add-widget-mini-button  ></axp-designer-add-widget-mini-button>
     }
   `,
                     standalone: true,
@@ -8361,7 +8424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         CommonModule,
                         AXPLayoutBuilderModule,
                         AXPWidgetDesignerRendererDirective,
-                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerAddWidgetMiniButtonComponent,
                         AXPDesignerGridDrawerComponent,
                     ],
                     providers: [
@@ -8417,10 +8480,10 @@ class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
         this.gap = computed(() => this.options()['gap'] ?? 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "axp-grid-row-widget", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
       @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -8428,10 +8491,11 @@ class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-row-widget',
                     template: `
     <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
       @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `,
@@ -8497,6 +8561,7 @@ class AXPGridRowWidgetDesignerComponent extends AXPContainerWidgetComponent {
     get __class() {
         const cls = {};
         //
+        cls[`ax-widget-container`] = true;
         cls[`ax-block`] = true;
         cls[`ax-w-full`] = true;
         return cls;
@@ -8612,6 +8677,7 @@ const AXPTextBlockWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'view',
     properties: [
+        AXP_NAME_PROPERTY,
         {
             name: 'content',
             title: 'Content',