@acorex/platform 18.1.0 → 18.1.2

package/fesm2022/acorex-platform-widgets.mjs

@@ -7,12 +7,12 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$7 from '@acorex/platform/layout/builder';
-import { AXPWidgetComponent, AXPWidgetsCatalog, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXP_WIDGETS_ADVANCE_GROUP, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP } from '@acorex/platform/layout/builder';
+import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXP_WIDGETS_ADVANCE_GROUP, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP } from '@acorex/platform/layout/builder';
 import * as i1$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, effect, HostBinding, signal, ViewEncapsulation, ViewChild, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
-import { AX_STYLE_COLOR_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/components/common';
+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';
 import * as i1$1 from '@angular/forms';
@@ -86,7 +86,7 @@ class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPButtonWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPButtonWidgetViewComponent, isStandalone: true, selector: "axp_button_widget", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPButtonWidgetViewComponent, isStandalone: true, selector: "axp-button-widget", usesInheritance: true, ngImport: i0, template: `
     <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
       @if(icon() && text()){
       <ax-prefix
@@ -103,7 +103,7 @@ class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPButtonWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp_button_widget',
+                    selector: 'axp-button-widget',
                     template: `
     <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
       @if(icon() && text()){
@@ -169,20 +169,11 @@ const AXP_DATA_SOURCE_PROPERTY = {
     visible: true,
 };
 
-const AXP_NAME_PROPERTY = {
+const AXP_NAME_PROPERTY = createStringProperty({
     name: 'name',
     title: 'Name',
     group: AXP_WIDGET_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'name',
-            path: 'name',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
+});
 const AXP_THEME_PROPERTY = {
     name: 'theme',
     title: 'Theme',
@@ -305,379 +296,173 @@ const AXP_VALIDATION_PROPERTY = {
     },
     visible: true,
 };
-const AXP_CONTENT_PROPERTY = {
+const AXP_CONTENT_PROPERTY = createStringProperty({
     name: 'content',
     title: 'Content',
+    path: 'options.content',
     group: AXP_DATA_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'content',
-            path: 'options.content',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_DISABLED_PROPERTY = {
-    name: 'disabled',
-    title: 'Disabled',
-    group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        defaultValue: false,
-        interface: {
-            name: 'disabled',
-            path: 'options.disabled',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_READONLY_PROPERTY = {
-    name: 'readonly',
-    title: 'Readonly',
-    group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        defaultValue: false,
-        interface: {
-            name: 'readonly',
-            path: 'options.readonly',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_PLACEHOLDER_PROPERTY = {
+});
+const AXP_PLACEHOLDER_PROPERTY = createStringProperty({
     name: 'placeholder',
     title: 'Placeholder',
+    path: 'options.placeholder',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'placeholder',
-            path: 'options.placeholder',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_DATA_PATH_PROPERTY = {
+});
+const AXP_DATA_PATH_PROPERTY = createStringProperty({
     name: 'path',
     title: 'Data Path',
     group: AXP_DATA_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'path',
-            path: 'path',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_ALLOW_MULTIPLE_PROPERTY = {
+});
+const AXP_DISABLED_PROPERTY = createBooleanProperty({
+    name: 'disabled',
+    title: 'Disabled',
+    path: 'options.disabled',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_READONLY_PROPERTY = createBooleanProperty({
+    name: 'readonly',
+    title: 'Readonly',
+    path: 'options.readonly',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_ALLOW_MULTIPLE_PROPERTY = createBooleanProperty({
     name: 'multiple',
     title: 'Multiple',
+    path: 'options.multiple',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        defaultValue: false,
-        interface: {
-            name: 'multiple',
-            path: 'options.multiple',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_HAS_LABEL_PROPERTY = {
+});
+const AXP_HAS_LABEL_PROPERTY = createBooleanProperty({
     name: 'hasLabel',
     title: 'Label',
+    path: 'options.hasLabel',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        defaultValue: true,
-        interface: {
-            name: 'hasLabel',
-            path: 'options.hasLabel',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_HAS_ICON_PROPERTY = {
+    defaultValue: true,
+});
+const AXP_HAS_ICON_PROPERTY = createBooleanProperty({
     name: 'hasIcon',
     title: 'Icon',
+    path: 'options.hasIcon',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        defaultValue: true,
-        interface: {
-            name: 'hasIcon',
-            path: 'options.hasIcon',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_ICON_PROPERTY = {
+    defaultValue: true,
+});
+const AXP_ICON_PROPERTY = createStringProperty({
     name: 'icon',
     title: 'Icon Name',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'icon',
-            path: 'options.icon',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_IS_LOADING_PROPERTY = {
+    path: 'options.icon',
+});
+const AXP_IS_LOADING_PROPERTY = createBooleanProperty({
     name: 'loading',
     title: 'Is Loading',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        interface: {
-            name: 'loading',
-            path: 'options.loading',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_HAS_CLEAR_BUTTON_PROPERTY = {
+    path: 'options.loading',
+});
+const AXP_HAS_CLEAR_BUTTON_PROPERTY = createBooleanProperty({
     name: 'hasClearButton',
     title: 'Clear Button',
+    path: 'options.hasClearButton',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        interface: {
-            name: 'hasClearButton',
-            path: 'options.hasClearButton',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_HAS_COPY_ICON_PROPERTY = {
+    defaultValue: true,
+});
+const AXP_HAS_COPY_ICON_PROPERTY = createBooleanProperty({
     name: 'hasCopyIcon',
     title: 'Copy Icon',
+    path: 'options.hasCopyIcon',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        interface: {
-            name: 'hasCopyIcon',
-            path: 'options.hasCopyIcon',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_HAS_EYE_ICON_PROPERTY = {
+    defaultValue: true,
+});
+const AXP_HAS_EYE_ICON_PROPERTY = createBooleanProperty({
     name: 'hasEyeIcon',
     title: 'Eye Icon',
+    path: 'options.hasEyeIcon',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        interface: {
-            name: 'hasEyeIcon',
-            path: 'options.hasEyeIcon',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_DOWNLOADABLE_PROPERTY = {
+    defaultValue: true,
+});
+const AXP_DOWNLOADABLE_PROPERTY = createBooleanProperty({
     name: 'downloadable',
     title: 'Downloadable',
+    path: 'options.downloadable',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'boolean',
-        interface: {
-            name: 'downloadable',
-            path: 'options.downloadable',
-            type: AXPWidgetsCatalog.toggle,
-        },
-    },
-    visible: true,
-};
-const AXP_TRULY_TEXT_PROPERTY = {
+    defaultValue: true,
+});
+// Converted with createStringProperty
+const AXP_TRULY_TEXT_PROPERTY = createStringProperty({
     name: 'trulyText',
     title: 'Truly Text',
+    path: 'options.trulyText',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'trulyText',
-            path: 'options.trulyText',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_FALSY_TEXT_PROPERTY = {
+});
+const AXP_FALSY_TEXT_PROPERTY = createStringProperty({
     name: 'falsyText',
     title: 'Falsy Text',
+    path: 'options.falsyText',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'falsyText',
-            path: 'options.falsyText',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_TEXT_PROPERTY = {
+});
+const AXP_TEXT_PROPERTY = createStringProperty({
     name: 'text',
     title: 'Text',
+    path: 'options.text',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'text',
-            path: 'options.text',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_TITLE_PROPERTY = {
+});
+const AXP_TITLE_PROPERTY = createStringProperty({
     name: 'title',
     title: 'Title',
+    path: 'options.title',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'title',
-            path: 'options.title',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_LABEL_PROPERTY = {
+});
+const AXP_LABEL_PROPERTY = createStringProperty({
     name: 'label',
     title: 'Label',
+    path: 'options.label',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        defaultValue: 'Sample Label',
-        interface: {
-            name: 'label',
-            path: 'options.label',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_VALUE_FIELD_PROPERTY = {
+    defaultValue: 'Sample Label',
+});
+const AXP_VALUE_FIELD_PROPERTY = createStringProperty({
     name: 'valueField',
     title: 'Value Field',
+    path: 'options.valueField',
     group: AXP_DATA_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'valueField',
-            path: 'options.valueField',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_TEXT_FIELD_PROPERTY = {
+});
+const AXP_TEXT_FIELD_PROPERTY = createStringProperty({
     name: 'textField',
     title: 'Text Field',
+    path: 'options.textField',
     group: AXP_DATA_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'textField',
-            path: 'options.textField',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_DESCRIPTION_PROPERTY = {
+});
+const AXP_DESCRIPTION_PROPERTY = createStringProperty({
     name: 'description',
     title: 'Description',
+    path: 'options.description',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            name: 'description',
-            path: 'options.description',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_STYLE_COLOR_PROPERTY = {
+});
+const AXP_STYLE_COLOR_PROPERTY = createSelectProperty({
     name: 'color',
     title: 'Color',
+    dataSource: AX_STYLE_COLOR_TYPES,
+    defaultValue: 'primary',
+    path: 'options.color',
     group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        defaultValue: { id: 'primary' },
-        interface: {
-            name: 'color',
-            path: 'options.color',
-            type: AXPWidgetsCatalog.select,
-            options: {
-                dataSource: AX_STYLE_COLOR_TYPES.map((i) => ({ id: i, title: i })),
-                hasClearButton: true,
-            },
-        },
-    },
-    visible: true,
-};
-const AXP_STYLE_LOOK_PROPERTY = {
+});
+const AXP_STYLE_LOOK_PROPERTY = createSelectProperty({
     name: 'look',
     title: 'Look',
+    dataSource: AX_STYLE_LOOK_TYPES,
+    defaultValue: 'solid',
+    path: 'options.look',
     group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        defaultValue: { id: 'solid' },
-        interface: {
-            name: 'look',
-            path: 'options.look',
-            type: AXPWidgetsCatalog.select,
-            options: {
-                dataSource: ['solid', 'blank', 'outline', 'twotone', 'flat', 'fill', 'none'].map((i) => ({ id: i, title: i })), //TODO remove this array and use AX_STYLE_LOOK_TYPES instead
-            },
-        },
-    },
-    visible: true,
-};
-const AXP_DATE_FROMAT_PROPERTY = {
+});
+const AXP_DATE_FORMAT_PROPERTY = createSelectProperty({
     name: 'format',
     title: 'Format',
+    dataSource: [
+        { id: 'date', title: 'Date' },
+        { id: 'datetime', title: 'DateTime' },
+        { id: 'time', title: 'Time' },
+    ],
+    defaultValue: { id: 'date', title: 'date' },
+    path: 'options.format',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        defaultValue: { id: 'date', title: 'Date' },
-        interface: {
-            name: 'format',
-            path: 'options.format',
-            type: AXPWidgetsCatalog.select,
-            options: {
-                dataSource: [
-                    { id: 'date', title: 'Date' },
-                    { id: 'datetime', title: 'DateTime' },
-                    { id: 'time', title: 'Time' },
-                ],
-            },
-        },
-    },
-    visible: true,
-};
+});
 function booleanDefaultProperty(defaultValue = false) {
     return {
         name: 'defaultValue',
@@ -1061,7 +846,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-COvuxaTt.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-B9bfVuC4.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -1133,7 +918,7 @@ const AXPCheckBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-DAGbdSTk.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
+            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),
@@ -1260,6 +1045,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         this.multiple = computed(() => this.options()['multiple']);
         this.hasIcon = computed(() => this.options()['hasIcon']);
         this.disabled = computed(() => this.options()['disabled']);
+        this.placeholder = computed(() => this.options()['placeholder'] ?? `Enter ${this.type()} ...`);
         this.popup = inject(AXPopupService);
         this.dataSource = new AXDataSource({
             pageSize: this.labelList().length,
@@ -1302,7 +1088,6 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
                     return 'fa-info';
             }
         };
-        effect(() => console.log(this.type()));
     }
     addItem() {
         const newValues = [...this.internalValue(), this.emptyValue()];
@@ -1334,12 +1119,12 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
                     this.dataSource.refresh();
                 }
             }
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, [name]: value } : item);
+            if (this.multiple())
+                this.setValue(newValues);
+            else
+                this.setValue(newValues[0]);
         }
-        const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, [name]: value } : item);
-        if (this.multiple())
-            this.setValue(newValues);
-        else
-            this.setValue(newValues[0]);
     }
     generateClasses(element) {
         if (this.multiple()) {
@@ -1353,7 +1138,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
             }
             else {
                 if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-11';
+                    return 'ax-col-start-1 ax-col-end-12';
                 }
             }
         }
@@ -1407,7 +1192,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       (onValueChanged)="handleValueChange($event, $index)"
       type="text"
       name="value"
-      placeholder="Enter {{ type() }} ..."
+      [placeholder]="placeholder()"
       [ngClass]="generateClasses('value')"
       [disabled]="disabled()"
     >
@@ -1418,7 +1203,6 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
       }
-      <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
     </ax-text-box>
     @if(hasLabel()){
     <ax-select-box
@@ -1426,13 +1210,10 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [ngModel]="item.label"
       [disabled]="disabled()"
       (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="Choose label..."
+      placeholder="{{ 'selectbox.popover.title' | translate | async }}"
       name="label"
       [ngClass]="generateClasses('label')"
     >
-      @if(type()==='email'){
-      <ax-validation-rule [rule]="'email'"></ax-validation-rule>
-      }
     </ax-select-box>
     } @if(multiple()){
     <ax-button
@@ -1451,14 +1232,14 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-7 ax-col-end-13 lg:ax-col-start-10 xl:ax-col-start-11 "
+      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 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: "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 }], 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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -1470,7 +1251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       (onValueChanged)="handleValueChange($event, $index)"
       type="text"
       name="value"
-      placeholder="Enter {{ type() }} ..."
+      [placeholder]="placeholder()"
       [ngClass]="generateClasses('value')"
       [disabled]="disabled()"
     >
@@ -1481,7 +1262,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [options]="validation.options"
       ></ax-validation-rule>
       }
-      <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
     </ax-text-box>
     @if(hasLabel()){
     <ax-select-box
@@ -1489,13 +1269,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [ngModel]="item.label"
       [disabled]="disabled()"
       (onValueChanged)="handleValueChange($event, $index)"
-      placeholder="Choose label..."
+      placeholder="{{ 'selectbox.popover.title' | translate | async }}"
       name="label"
       [ngClass]="generateClasses('label')"
     >
-      @if(type()==='email'){
-      <ax-validation-rule [rule]="'email'"></ax-validation-rule>
-      }
     </ax-select-box>
     } @if(multiple()){
     <ax-button
@@ -1514,7 +1291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-7 ax-col-end-13 lg:ax-col-start-10 xl:ax-col-start-11 "
+      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
     >
       <ax-prefix>
         <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -1571,11 +1348,11 @@ var contactWidgetPrint_component = /*#__PURE__*/Object.freeze({
 class AXPContactWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.type = computed(() => this.options()['type']);
-        this.labelList = computed(() => this.options()['labelList'] || ['primary', 'secondary', 'Add New']);
-        this.hasLabel = computed(() => this.options()['hasLabel']);
-        this.multiple = computed(() => this.options()['multiple']);
-        this.hasIcon = computed(() => this.options()['hasIcon']);
+        this.type = computed(() => this.options()['type'] ?? 'link');
+        this.labelList = computed(() => this.options()['labelList'] ?? ['primary', 'secondary']);
+        this.hasLabel = computed(() => this.options()['hasLabel'] ?? false);
+        this.multiple = computed(() => this.options()['multiple'] ?? false);
+        this.hasIcon = computed(() => this.options()['hasIcon'] ?? false);
         this.internalValue = computed(() => this.itemToArray());
         this.clipboard = inject(AXPClipBoardService);
         this.chooseIcon = () => {
@@ -2062,7 +1839,7 @@ const AXPDateTimeBoxWidget = {
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
-        AXP_DATE_FROMAT_PROPERTY,
+        AXP_DATE_FORMAT_PROPERTY,
         AXP_READONLY_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
@@ -4448,13 +4225,15 @@ class AXPRichTextWidgetViewComponent extends AXPWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: `<span class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()"> </span>`, 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: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()">
+  </span>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget',
-                    template: `<span class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()"> </span>`,
+                    template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()">
+  </span>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -4866,17 +4645,45 @@ var selectBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.multiple = this.options['multiple'];
+        this.valueField = this.options['valueField'] ?? 'id';
+        this.textField = this.options['textField'] ?? 'title';
+        this.internalValue = computed(() => Array.isArray(this.rawValue)
+            ? this.rawValue.map((item) => this.extractItem(item))
+            : [this.extractItem(this.rawValue)]);
+    }
+    extractItem(item) {
+        return typeof item == 'object'
+            ? {
+                [this.valueField]: item[this.valueField],
+                [this.textField]: item[this.textField],
+            }
+            : {
+                [this.valueField]: item,
+                [this.textField]: item,
+            };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: ` <div class="ax-flex ax-gap-2">
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+    }
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: ['rawValue']
+                    imports: [CommonModule, AXBadgeModule],
+                    inputs: ['rawValue'],
                 }]
         }] });
 
@@ -5161,6 +4968,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.valueField = this.options['valueField'];
         this.textField = this.options['textField'];
         this.items = this.options['items'];
+        this.multiple = this.options['multiple'];
         this.selectedItemIds = computed(() => {
             return this.rawValue || [];
         });
@@ -6633,22 +6441,22 @@ class AXPMapBoxWidgetViewComponent extends AXPWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPMapBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPMapBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div [class.height.px]="height()" class="ax-w-full">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPMapBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
-      [hasMarker]="false"
+      [hasDraw]="false"
       [markers]="markers()"
       [zoomLevel]="zoomLevel()"
       [latitude]="initialLocation().latitude"
       [longitude]="initialLocation().longitude"
     ></ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasMarker", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPMapBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<div [class.height.px]="height()" class="ax-w-full">
+                    template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
-      [hasMarker]="false"
+      [hasDraw]="false"
       [markers]="markers()"
       [zoomLevel]="zoomLevel()"
       [latitude]="initialLocation().latitude"
@@ -6690,6 +6498,9 @@ class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
             },
         });
     }
+    onMarkerChanged(event) {
+        this.setValue(event);
+    }
     get __class() {
         const cls = {};
         cls[`ax-block`] = true;
@@ -6700,15 +6511,16 @@ class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPMapBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: ` <div [style.height.px]="height()" class="ax-w-full">
     <ax-map
       class="ax-h-full"
+      (onMarkerChanged)="onMarkerChanged($event)"
       [hasLocator]="hasLocate()"
-      [hasMarker]="hasDraw()"
+      [hasDraw]="hasDraw()"
       [latitude]="initialLocation().latitude"
       [longitude]="initialLocation().longitude"
       [zoomLevel]="zoomLevel()"
       [maxMarker]="maxMarker()"
     >
     </ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasMarker", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPMapBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6716,8 +6528,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     template: ` <div [style.height.px]="height()" class="ax-w-full">
     <ax-map
       class="ax-h-full"
+      (onMarkerChanged)="onMarkerChanged($event)"
       [hasLocator]="hasLocate()"
-      [hasMarker]="hasDraw()"
+      [hasDraw]="hasDraw()"
       [latitude]="initialLocation().latitude"
       [longitude]="initialLocation().longitude"
       [zoomLevel]="zoomLevel()"
@@ -7175,9 +6988,7 @@ 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>
     }
-    @empty {
-      <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-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
@@ -7188,9 +6999,7 @@ 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>
     }
-    @empty {
-      <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-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-button>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7246,9 +7055,9 @@ 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) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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: AXPBlockWidgetViewComponent, decorators: [{
             type: Component,
@@ -7256,7 +7065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-block-widget',
                     template: `
     @for (node of children(); track $index) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7317,9 +7126,9 @@ 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) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="mode" > </axp-widget-renderer>
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPageWidgetViewComponent, decorators: [{
             type: Component,
@@ -7327,7 +7136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-page-widget',
                     template: `
     @for (node of children(); track $index) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="mode" > </axp-widget-renderer>
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7382,41 +7191,33 @@ class AXPRepeaterWidgetViewComponent extends AXPWidgetComponent {
     ngAfterViewInit() {
         this.rows.set(this.getValue() ?? []);
     }
-    addNew() {
-        this.rows.update((prev) => [...prev, {}]);
-    }
-    api() {
-        return {
-            "addNew": this.addNew.bind(this)
-        };
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRepeaterWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    @for(row of rows();let i=$index; track i){
-    <ng-container>
-      @for (node of children();track $index) {
-      <axp-widget-renderer [node]="node" [parentNode]="this" [index]="i"> </axp-widget-renderer>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRepeaterWidgetViewComponent, isStandalone: true, selector: "axp-repeater-widget", usesInheritance: true, ngImport: i0, template: `
+    @for(row of rows();let i=$index; track i)
+    {
+      @for (node of children();track $index) 
+      {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
       }
-    </ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: AXPRepeaterWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-repeater-widget',
                     template: `
-    @for(row of rows();let i=$index; track i){
-    <ng-container>
-      @for (node of children();track $index) {
-      <axp-widget-renderer [node]="node" [parentNode]="this" [index]="i"> </axp-widget-renderer>
+    @for(row of rows();let i=$index; track i)
+    {
+      @for (node of children();track $index) 
+      {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
       }
-    </ng-container>
     }
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXPLayoutBuilderModule],
-                    inputs: [],
                 }]
         }] });
 
@@ -7426,27 +7227,139 @@ 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() ?? []);
+    }
+    handleAddItemClick() {
+        this.addNew();
+    }
+    addNew() {
+        this.rows.update((prev) => [...prev, {}]);
+    }
+    api() {
+        return {
+            "addNew": this.addNew.bind(this)
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPRepeaterWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRepeaterWidgetEditComponent, isStandalone: true, selector: "axp-repeater-widget", usesInheritance: true, ngImport: i0, template: `
+   @if(hasControls())
+    {
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      @for(row of rows();let i=$index; track i)
+      {
+      <div class="ax-col-span-11">
+        <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
+      </div>
+      <ax-button
+        [disabled]="disabled()"
+        look="twotone"
+        color="danger"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+      >
+        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+      </ax-button>
+      }
+      <ax-button
+          [text]="'Add New'"
+          look="twotone"
+          [disabled]="disabled()"
+          (onClick)="handleAddItemClick()"
+          class="ax-col-start-10  ax-col-end-13"
+        >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+    }
+    @else {
+      @for(row of rows();let i=$index; track i)
+      {
+        <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
+      }
+    }
+    <ng-template #tpl let-index>   
+      @for (node of children();track $index) 
+      {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="index" [mode]="this.mode"></ng-container>
+      }    
+    </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: 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: AXPRepeaterWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    selector: 'axp-repeater-widget',
+                    template: `
+   @if(hasControls())
+    {
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      @for(row of rows();let i=$index; track i)
+      {
+      <div class="ax-col-span-11">
+        <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
+      </div>
+      <ax-button
+        [disabled]="disabled()"
+        look="twotone"
+        color="danger"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+      >
+        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+      </ax-button>
+      }
+      <ax-button
+          [text]="'Add New'"
+          look="twotone"
+          [disabled]="disabled()"
+          (onClick)="handleAddItemClick()"
+          class="ax-col-start-10  ax-col-end-13"
+        >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+    }
+    @else {
+      @for(row of rows();let i=$index; track i)
+      {
+        <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
+      }
+    }
+    <ng-template #tpl let-index>   
+      @for (node of children();track $index) 
+      {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="index" [mode]="this.mode"></ng-container>
+      }    
+    </ng-template>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule],
-                    inputs: []
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule],
                 }]
         }] });
 
+var repeaterWidgetEdit_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPRepeaterWidgetEditComponent: AXPRepeaterWidgetEditComponent
+});
+
 class AXPRepeaterWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPRepeaterWidgetPrintComponent, 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: AXPRepeaterWidgetPrintComponent, isStandalone: true, selector: "axp-repeater-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: AXPRepeaterWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-repeater-widget',
                     template: ``,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7463,47 +7376,117 @@ var repeaterWidgetPrint_component = /*#__PURE__*/Object.freeze({
 class AXPRepeaterWidgetDesignerComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
-        this.rows = signal([0]);
+        this.disabled = computed(() => this.options()["disabled"]);
+        this.hasControls = computed(() => this.options()["hasControls"]);
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-block`] = true;
+        cls[`ax-w-full`] = true;
+        return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRepeaterWidgetDesignerComponent, isStandalone: true, selector: "ng-component", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRepeaterWidgetDesignerComponent, isStandalone: true, selector: "axp-repeater-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
                 provide: AXPContainerWidgetComponent, useExisting: AXPRepeaterWidgetDesignerComponent
             }
         ], usesInheritance: true, ngImport: i0, template: `
-    @for(row of rows();let i=$index; track i){
-    <ng-container>
+    @if(hasControls())
+    {
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <div class="ax-col-span-11 ax-border-dashed ax-border">
+        <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"
+      >
+        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+      </ax-button>
+      <ax-button
+          [text]="'Add New'"
+          look="twotone"
+          [disabled]="disabled()"
+          class="ax-col-start-10  ax-col-end-13"
+        >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+    }
+    @else {
+      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+    }
+    <ng-template #tpl>
       @for (node of children();track $index) {
-      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode"> </ng-container>
       }
-    </ng-container>
-    }
-   <axp-designer-add-widget-button></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 }); }
+      @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>
+      }
+    </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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-repeater-widget',
                     template: `
-    @for(row of rows();let i=$index; track i){
-    <ng-container>
+    @if(hasControls())
+    {
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <div class="ax-col-span-11 ax-border-dashed ax-border">
+        <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"
+      >
+        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+      </ax-button>
+      <ax-button
+          [text]="'Add New'"
+          look="twotone"
+          [disabled]="disabled()"
+          class="ax-col-start-10  ax-col-end-13"
+        >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+    }
+    @else {
+      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+    }
+    <ng-template #tpl>
       @for (node of children();track $index) {
-      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"> </ng-container>
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode"> </ng-container>
       }
-    </ng-container>
-    }
-   <axp-designer-add-widget-button></axp-designer-add-widget-button>
+      @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>
+      }
+    </ng-template>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPRepeaterWidgetDesignerComponent
                         }
                     ]
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var repeaterWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7517,12 +7500,24 @@ const AXPRepeaterWidget = {
     icon: 'fa-solid fa-table-list',
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'container',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+        createBooleanProperty({
+            name: "hasControls",
+            title: "Controls",
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+            path: "options.hasControls",
+        })
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return repeaterWidgetView_component; }).then((c) => c.AXPRepeaterWidgetViewComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return repeaterWidgetView_component; }).then((c) => c.AXPRepeaterWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return repeaterWidgetEdit_component; }).then((c) => c.AXPRepeaterWidgetEditComponent),
         },
         print: {
             component: () => Promise.resolve().then(function () { return repeaterWidgetPrint_component; }).then((c) => c.AXPRepeaterWidgetPrintComponent),
@@ -7837,34 +7832,44 @@ const AXPDocumentWidget = {
 class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.label = computed(() => this.options()["label"]);
+        this.label = computed(() => this.options()['label']);
+    }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-w-full`] = true;
+        return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-  <ax-form-field>
-     <ax-label>{{label()}}</ax-label>
-     @for (node of children(); track $index) {
-      <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
-     }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "axp-form-field-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    <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>
+      }
     </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: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-form-field-widget',
                     template: `
-  <ax-form-field>
-     <ax-label>{{label()}}</ax-label>
-     @for (node of children(); track $index) {
-      <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
-     }
+    <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>
+      }
     </ax-form-field>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var formFieldWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7957,16 +7962,34 @@ const AXPFormFieldWidget = {
 };
 
 class AXPGridWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        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: "14.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, 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: "17.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "ng-component", 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>
+      }
+    </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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    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>
+      }
+    </div>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
         }] });
 
@@ -7994,11 +8017,11 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
         this.designerService = inject(AXPDesignerService);
-        this.cols = computed(() => this.options()["cols"] ?? 1);
-        this.rows = computed(() => this.options()["rows"] ?? 1);
-        this.gap = computed(() => this.options()["gap"] ?? 0);
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
         this.cells = computed(() => Array.from({ length: this.cols() * this.rows() }).map((c, index) => index));
-        this.settled = computed(() => (this.cols() * this.rows() > 1) && this.children().length);
+        this.settled = computed(() => this.cols() * this.rows() > 1 && this.children().length);
     }
     // private e = effect(async () => {
     //   if (this.settled()) {
@@ -8024,10 +8047,10 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     handleDrawerSelect(e) {
         this.designerService.update({
             values: {
-                options: e
+                options: e,
             },
             mode: 'update',
-            widget: this.node
+            widget: this.node,
         });
         const list = Array.from({ length: this.cells().length }).map(() => ({
             type: AXPWidgetsCatalog.gridItem,
@@ -8046,18 +8069,18 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     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: [
             {
-                provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
-            }
+                provide: AXPContainerWidgetComponent,
+                useExisting: AXPGridWidgetDesignerComponent,
+            },
         ], usesInheritance: true, ngImport: i0, template: `
-    @if(settled())
-    {
-      <div class="ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
-        @for (node of children(); track $index) {
-          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-        }
-      </div>
+    @if(settled()) {
+    <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-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      }
+    </div>
     }@else {
-      <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
+    <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
   `, 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: AXPDesignerGridDrawerComponent, selector: "axp-designer-grid-drawer", inputs: ["rows", "columns"], outputs: ["rowsChange", "columnsChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -8066,25 +8089,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     selector: 'axp-grid-layout-widget',
                     template: `
-    @if(settled())
-    {
-      <div class="ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
-        @for (node of children(); track $index) {
-          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-        }
-      </div>
+    @if(settled()) {
+    <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-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      }
+    </div>
     }@else {
-      <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
+    <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerGridDrawerComponent,
+                    ],
                     providers: [
                         {
-                            provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
-                        }
-                    ]
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridWidgetDesignerComponent,
+                        },
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -8122,19 +8151,88 @@ const AXPGridWidget = {
     },
 };
 
-class AXPGridItemWidgetViewComponent extends AXPWidgetComponent {
+class AXPGridItemWidgetViewComponent extends AXPContainerWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colSpan = computed(() => this.options()['colSpan']);
+        this.colStart = computed(() => this.options()['colStart']);
+        this.colEnd = computed(() => this.options()['colEnd']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-flex`] = true;
+        cls[`ax-gap-${this.gap()}`] = true;
+        //
+        if (this.flexAlignItems()) {
+            cls[this.flexAlignItems()] = true;
+        }
+        if (this.flexJustifyContent()) {
+            cls[this.flexJustifyContent()] = true;
+        }
+        if (this.flexWrap()) {
+            cls[this.flexWrap()] = true;
+        }
+        if (this.flexDirection()) {
+            cls[this.flexDirection()] = true;
+        }
+        //
+        cls[`ax-col-span-12`] = true;
+        if (this.colSpan() != null) {
+            cls[`lg:ax-col-span-${this.colSpan()}`] = true;
+        }
+        else {
+            cls[`lg:ax-col-span-1`] = true;
+        }
+        //
+        if (this.colStart() != null) {
+            cls[`lg:ax-col-start-${this.colStart()}`] = true;
+        }
+        //
+        if (this.colEnd() != null) {
+            cls[`lg:ax-col-end-${this.colEnd()}`] = true;
+        }
+        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: "14.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, 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: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "ng-component", 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>
+    }
+  `, 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: [{
-                    template: ``,
+                    template: `
+    @for (child of children(); track $index) {
+    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    }
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    providers: [
+                        {
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridItemWidgetViewComponent,
+                        },
+                    ],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var gridItemWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8160,14 +8258,14 @@ 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"]);
-        this.flexAlignItems = computed(() => this.options()["flexAlignItems"]?.id);
-        this.flexJustifyContent = computed(() => this.options()["flexJustifyContent"]?.id);
-        this.flexWrap = computed(() => this.options()["flexWrap"]?.id);
-        this.flexDirection = computed(() => this.options()["flexDirection"]?.id);
-        this.gap = computed(() => this.options()["gap"] ?? 0);
+        this.colSpan = computed(() => this.options()['colSpan']);
+        this.colStart = computed(() => this.options()['colStart']);
+        this.colEnd = computed(() => this.options()['colEnd']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
     }
     async handleSlotClick() {
         await this.designerService.showPicker(this.node);
@@ -8211,14 +8309,14 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetDesignerComponent, isStandalone: true, selector: "axp-grid-layout-item-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
-                provide: AXPContainerWidgetComponent, useExisting: AXPGridItemWidgetDesignerComponent
-            }
+                provide: AXPContainerWidgetComponent,
+                useExisting: AXPGridItemWidgetDesignerComponent,
+            },
         ], usesInheritance: true, ngImport: i0, template: `
-    @for (node of children(); track $index) {
-        <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-    }
-    @empty {
-    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center" >
+    @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>
@@ -8231,11 +8329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     selector: 'axp-grid-layout-item-widget',
                     template: `
-    @for (node of children(); track $index) {
-        <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-    }
-    @empty {
-    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center" >
+    @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>
@@ -8244,12 +8341,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerGridDrawerComponent,
+                    ],
                     providers: [
                         {
-                            provide: AXPContainerWidgetComponent, useExisting: AXPGridItemWidgetDesignerComponent
-                        }
-                    ]
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridItemWidgetDesignerComponent,
+                        },
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -8290,16 +8394,34 @@ const AXPGridItemWidget = {
 };
 
 class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        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: "14.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, 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: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "ng-component", 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>
+      }
+    </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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    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>
+      }
+    </div>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
         }] });
 
@@ -8598,5 +8720,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FROMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, plainTextDefaultProperty };
+export { AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map