@acorex/platform 18.1.4 → 18.1.5

package/fesm2022/acorex-platform-widgets.mjs

@@ -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),
@@ -1136,38 +1136,30 @@ 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) {
@@ -1202,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"
@@ -1219,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
@@ -1249,7 +1245,7 @@ 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>
@@ -1261,7 +1257,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
 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"
@@ -1278,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
@@ -1308,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>
@@ -1487,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',
@@ -1495,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,
@@ -1510,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,
@@ -1827,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],
@@ -3187,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 }); }
@@ -3242,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 = [];
@@ -3291,7 +3273,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         [minValue]="minValue()"
         [maxValue]="maxValue()"
         [decimals]="decimals()"
-        [thousandsSeparator]="','"
+        [thousandsSeparator]="seprator()"
         [placeholder]="placeholder()"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
@@ -3322,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: 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 }); }
+  `, 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,
@@ -3335,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)"
@@ -5391,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: [],
                 }]
         }] });
 
@@ -5449,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,
@@ -5543,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,
@@ -6991,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;
@@ -7025,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,
@@ -7036,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
@@ -7092,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 }); }
 }
@@ -7102,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,
@@ -7130,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
@@ -7163,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 }); }
 }
@@ -7173,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,
@@ -7202,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: {
@@ -7215,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),
         },
     },
 };
@@ -7266,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 {
@@ -7298,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>
@@ -7322,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>
@@ -7347,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>
@@ -7371,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>
@@ -7432,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>
@@ -7463,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,
@@ -7476,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>
@@ -7507,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
@@ -7686,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],
@@ -7719,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>
@@ -7733,6 +7778,7 @@ class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
 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) {
@@ -7799,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],
@@ -7834,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),
@@ -7882,7 +7928,7 @@ 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: 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 }); }
@@ -7895,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>
   `,
@@ -7919,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: [
@@ -7936,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: 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: 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,
@@ -7952,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
@@ -7981,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),
@@ -8006,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 }); }
@@ -8017,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>
   `,
@@ -8097,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: [
@@ -8237,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,
@@ -8294,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']);
@@ -8304,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;
         //
@@ -8353,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,
@@ -8369,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,
@@ -8382,7 +8424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         CommonModule,
                         AXPLayoutBuilderModule,
                         AXPWidgetDesignerRendererDirective,
-                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerAddWidgetMiniButtonComponent,
                         AXPDesignerGridDrawerComponent,
                     ],
                     providers: [
@@ -8438,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 }); }
@@ -8449,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>
   `,
@@ -8518,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;
@@ -8633,6 +8677,7 @@ const AXPTextBlockWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'view',
     properties: [
+        AXP_NAME_PROPERTY,
         {
             name: 'content',
             title: 'Content',