@acorex/platform 18.0.13 → 18.0.15

package/fesm2022/acorex-platform-widgets.mjs

@@ -3,24 +3,25 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$5 from '@acorex/platform/layout/builder';
-import { AXPWidgetComponent, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, cloneProperty, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXP_WIDGETS_ADVANCE_GROUP, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP } 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 * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, signal, ViewEncapsulation, ViewChild, effect, HostBinding, ElementRef, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, ViewEncapsulation, ViewChild, effect, HostListener, NgModule } from '@angular/core';
 import { AX_STYLE_COLOR_TYPES, AXDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i3 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4$1 from '@acorex/components/form';
-import { AXFormModule } from '@acorex/components/form';
-import { AXValidationService, AXValidationModule } from '@acorex/core/validation';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2$1 from '@acorex/components/badge';
+import * as i2$1 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i2$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXPClipBoardService } from '@acorex/platform/common';
+import * as i4$1 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i3$1 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
@@ -28,6 +29,7 @@ import * as i7 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i1$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXDateTimeFormatter } from '@acorex/core/date-time';
 import * as i3$2 from '@acorex/components/datetime-box';
@@ -35,7 +37,7 @@ import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import * as i4$2 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormatService } from '@acorex/core/format';
-import { isNumber } from 'lodash-es';
+import { isNumber, sum, get } from 'lodash-es';
 import * as i1$3 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$3 from '@acorex/components/password-box';
@@ -44,27 +46,25 @@ import { AXPlatform } from '@acorex/core/platform';
 import { AXPHtmlUtils } from '@acorex/platform/core';
 import * as i1$4 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
-import * as i2$2 from '@acorex/components/selection-list';
+import * as i2$3 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i2$3 from '@acorex/components/switch';
+import * as i2$4 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i5$1 from '@acorex/components/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { Subscription } from 'rxjs';
-import * as i2$4 from '@acorex/components/image';
+import * as i2$5 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as L from 'leaflet';
 import 'leaflet-draw';
 import 'leaflet.locatecontrol';
-import { AXPWidgetDesignerRendererComponent, AXPDesignerAddWidgetButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
-import * as i2$5 from '@acorex/components/color-box';
+import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
+import * as i2$6 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i2$6 from '@acorex/components/label';
-import { AXLabelModule } from '@acorex/components/label';
 import * as i1$6 from '@acorex/components/qrcode';
-import { QrcodeModule } from '@acorex/components/qrcode';
+import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXColorUtil } from '@acorex/core/utils';
 
 class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
@@ -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: "ng-component", 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 (onClick)="handleClick($event)" [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
       @if(loading()){
       <ax-loading> </ax-loading>
@@ -97,6 +97,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',
                     template: `
     <ax-button (onClick)="handleClick($event)" [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
       @if(loading()){
@@ -137,30 +138,110 @@ const AXP_WIDGET_PROPERTY_GROUP = {
     title: "Widget"
 };
 
-const AXP_VALIDATION_PROPERTY = {
-    name: 'validationRules',
-    title: 'Validation Rules',
-    group: AXP_DATA_PROPERTY_GROUP,
+const AXP_NAME_PROPERTY = {
+    name: 'name',
+    title: 'Name',
+    group: AXP_WIDGET_PROPERTY_GROUP,
     schema: {
-        dataType: 'array',
-        defaultValue: [],
+        dataType: 'string',
         interface: {
+            name: 'name',
+            path: 'name',
             type: AXPWidgetsCatalog.text,
-            path: 'validationRules',
         },
     },
     visible: true,
 };
-const AXP_NAME_PROPERTY = {
-    name: 'name',
-    title: 'Name',
-    group: AXP_WIDGET_PROPERTY_GROUP,
+const AXP_THEME_PROPERTY = {
+    name: 'theme',
+    title: 'Theme',
+    group: AXP_STYLING_PROPERTY_GROUP,
     schema: {
         dataType: 'string',
+        defaultValue: { id: 'default' },
+        interface: {
+            name: 'theme',
+            path: 'options.theme',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    {
+                        id: 'default',
+                        title: 'Default',
+                    },
+                    {
+                        id: 'light',
+                        title: 'Light',
+                    },
+                    {
+                        id: 'dark',
+                        title: 'Dark',
+                    },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_COLOR_PROPERTY = {
+    name: 'color',
+    title: 'Color',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        interface: {
+            path: 'options.color',
+            options: {
+                hasClearButton: true,
+            },
+            type: AXPWidgetsCatalog.color,
+        },
+    },
+    visible: true,
+};
+const AXP_FONT_SIZE_PROPERTY = {
+    name: 'fontSize',
+    title: 'Font Size',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: '12px',
+        interface: {
+            name: 'fontSize',
+            path: 'options.fontSize',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: true,
+};
+const AXP_BG_COLOR_PROPERTY = {
+    name: 'backgroundColor',
+    title: 'Background Color',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        interface: {
+            path: 'options.backgroundColor',
+            options: {
+                hasClearButton: true,
+            },
+            type: AXPWidgetsCatalog.color,
+        },
+    },
+    visible: true,
+};
+
+const AXP_VALIDATION_PROPERTY = {
+    name: 'validationRules',
+    title: 'Validation Rules',
+    group: AXP_DATA_PROPERTY_GROUP,
+    schema: {
+        dataType: 'array',
+        defaultValue: [],
         interface: {
-            name: 'name',
-            path: 'name',
             type: AXPWidgetsCatalog.text,
+            path: 'validationRules',
         },
     },
     visible: true,
@@ -171,6 +252,7 @@ const AXP_DISABLED_PROPERTY = {
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
     schema: {
         dataType: 'boolean',
+        defaultValue: false,
         interface: {
             name: 'disabled',
             path: 'options.disabled',
@@ -179,6 +261,21 @@ const AXP_DISABLED_PROPERTY = {
     },
     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 = {
     name: 'placeholder',
     title: 'Placeholder',
@@ -252,37 +349,6 @@ const AXP_HAS_ICON_PROPERTY = {
     },
     visible: true,
 };
-const AXP_FONT_SIZE_PROPERTY = {
-    name: 'fontSize',
-    title: 'Font Size',
-    group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        defaultValue: '12px',
-        interface: {
-            name: 'fontSize',
-            path: 'options.fontSize',
-            type: AXPWidgetsCatalog.text,
-        },
-    },
-    visible: true,
-};
-const AXP_BG_COLOR_PROPERTY = {
-    name: 'backgroundColor',
-    title: 'Background Color',
-    group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            path: 'options.backgroundColor',
-            options: {
-                hasClearButton: true,
-            },
-            type: AXPWidgetsCatalog.color,
-        },
-    },
-    visible: true,
-};
 const AXP_HAS_CLEAR_BUTTON_PROPERTY = {
     name: 'hasClearButton',
     title: 'Clear Button',
@@ -452,26 +518,10 @@ const AXP_DESCRIPTION_PROPERTY = {
     },
     visible: true,
 };
-const AXP_COLOR_PROPERTY = {
-    name: 'color',
-    title: 'Color',
-    group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'string',
-        interface: {
-            path: 'options.color',
-            options: {
-                hasClearButton: true,
-            },
-            type: AXPWidgetsCatalog.color,
-        },
-    },
-    visible: true,
-};
 const AXP_STYLE_COLOR_PROPERTY = {
     name: 'color',
     title: 'Color',
-    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    group: AXP_STYLING_PROPERTY_GROUP,
     schema: {
         dataType: 'string',
         defaultValue: { id: 'primary' },
@@ -490,7 +540,7 @@ const AXP_STYLE_COLOR_PROPERTY = {
 const AXP_STYLE_LOOK_PROPERTY = {
     name: 'look',
     title: 'Look',
-    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    group: AXP_STYLING_PROPERTY_GROUP,
     schema: {
         dataType: 'string',
         defaultValue: { id: 'solid' },
@@ -551,6 +601,7 @@ function plainTextDefaultProperty() {
         group: AXP_DATA_PROPERTY_GROUP,
         schema: {
             dataType: 'string',
+            defaultValue: "Sample Text",
             interface: {
                 name: 'defaultValue',
                 path: 'defaultValue',
@@ -560,70 +611,307 @@ function plainTextDefaultProperty() {
         visible: true,
     };
 }
-const AXP_THEME_PROPERTY = {
-    name: 'theme',
-    title: 'Theme',
-    group: AXP_STYLING_PROPERTY_GROUP,
+
+const AXP_LAYOUT_GRID_PROPERTY_GROUP = {
+    name: "grid",
+    order: 1,
+    title: "Grid Layout"
+};
+const AXP_LAYOUT_FLEX_PROPERTY_GROUP = {
+    name: "flex",
+    order: 1,
+    title: "Flex Layout"
+};
+const AXP_LAYOUT_GAP_PROPERTY = {
+    name: 'gap',
+    title: 'Gap',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
     schema: {
-        dataType: 'string',
-        defaultValue: { id: 'default' },
+        dataType: 'number',
+        defaultValue: 2,
         interface: {
-            name: 'theme',
-            path: 'options.theme',
-            type: AXPWidgetsCatalog.select,
+            name: 'gap',
+            path: 'options.gap',
+            type: AXPWidgetsCatalog.number,
             options: {
-                hasClearButton: false,
-                dataSource: [
-                    {
-                        id: 'default',
-                        title: 'Default',
-                    },
-                    {
-                        id: 'light',
-                        title: 'Light',
-                    },
-                    {
-                        id: 'dark',
-                        title: 'Dark',
-                    },
-                ],
+                minValue: 0,
+                maxValue: 12,
             },
         },
     },
     visible: true,
 };
-
-const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
-    name: 'width',
-    title: 'Width',
-    group: AXP_STYLING_PROPERTY_GROUP,
+const AXP_LAYOUT_COL_SPAN_PROPERTY = {
+    name: 'colSpan',
+    title: 'Column Span',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
     schema: {
-        dataType: 'string',
-        defaultValue: '200px',
+        dataType: 'number',
         interface: {
-            name: 'width',
-            path: 'options.width',
-            type: AXPWidgetsCatalog.text,
+            name: 'colSpan',
+            path: 'options.colSpan',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 0,
+                maxValue: 12,
+            },
         },
     },
     visible: true,
 };
-
-const AXPButtonWidget = {
-    name: 'button-action',
-    title: 'Button',
-    description: 'Triggers customizable actions',
-    icon: 'fa-solid fa-play',
-    group: AXP_WIDGETS_ACTION_GROUP,
-    properties: [
-        AXP_DISABLED_PROPERTY,
-        cloneProperty(AXP_TEXT_PROPERTY, { schema: { defaultValue: 'Click Here' } }),
-        AXP_STYLE_COLOR_PROPERTY,
-        AXP_STYLE_LOOK_PROPERTY,
-    ],
-    components: {
-        designer: {
-            component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
+const AXP_LAYOUT_COL_START_PROPERTY = {
+    name: 'colStart',
+    title: 'Column Start',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        interface: {
+            name: 'colStart',
+            path: 'options.colStart',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 13,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_COL_END_PROPERTY = {
+    name: 'colEnd',
+    title: 'Column End',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        interface: {
+            name: 'colEnd',
+            path: 'options.colEnd',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 13,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_COLUMNS_PROPERTY = {
+    name: 'cols',
+    title: 'Columns',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 1,
+        interface: {
+            name: 'cols',
+            path: 'options.cols',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 12,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_ROWS_PROPERTY = {
+    name: 'rows',
+    title: 'Rows',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 1,
+        interface: {
+            name: 'rows',
+            path: 'options.rows',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 100,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY = {
+    name: 'flexJustifyContent',
+    title: 'Justify Content',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-justify-normal' },
+        interface: {
+            name: 'flexJustifyContent',
+            path: 'options.flexJustifyContent',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-justify-normal', title: 'Normal' },
+                    { id: 'ax-justify-start', title: 'Start' },
+                    { id: 'ax-justify-end', title: 'End' },
+                    { id: 'ax-justify-center', title: 'Center' },
+                    { id: 'ax-justify-between', title: 'Between' },
+                    { id: 'ax-justify-around', title: 'Around' },
+                    { id: 'ax-justify-evenly', title: 'Evenly' },
+                    { id: 'ax-justify-stretch', title: 'Stretch' },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_FLEX_ALIGN_PROPERTY = {
+    name: 'flexAlignItems',
+    title: 'Align Items',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-items-start' },
+        interface: {
+            name: 'flexAlignItems',
+            path: 'options.flexAlignItems',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-items-start', title: 'Start' },
+                    { id: 'ax-items-end', title: 'End' },
+                    { id: 'ax-items-center', title: 'Center' },
+                    { id: 'ax-items-baseline', title: 'Baseline' },
+                    { id: 'ax-items-stretch', title: 'Stretch' },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_FLEX_DIRECTION_PROPERTY = {
+    name: 'flexDirection',
+    title: 'Direction',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-flex-row' },
+        interface: {
+            name: 'flexDirection',
+            path: 'options.flexDirection',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-flex-row', title: 'Row' },
+                    { id: 'ax-flex-row-reverse', title: 'Row Reverse' },
+                    { id: 'ax-flex-col', title: 'Column' },
+                    { id: 'ax-flex-col-reverse', title: 'Column Reverse' }
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_FLEX_WRAP_PROPERTY = {
+    name: 'flexWrap',
+    title: 'Wrap',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-flex-nowrap' },
+        interface: {
+            name: 'flexWrap',
+            path: 'options.flexWrap',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-flex-nowrap', title: 'No Wrap' },
+                    { id: 'ax-flex-wrap', title: 'Wrap' },
+                    { id: 'ax-flex-wrap-reverse', title: 'Wrap Reverse' }
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_ALIGN_CONTENT_PROPERTY = {
+    name: 'flexAlignContent',
+    title: 'Align Content',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-content-start' },
+        interface: {
+            name: 'flexAlignContent',
+            path: 'options.flexAlignContent',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-content-start', title: 'Start' },
+                    { id: 'ax-content-end', title: 'End' },
+                    { id: 'ax-content-center', title: 'Center' },
+                    { id: 'ax-content-between', title: 'Between' },
+                    { id: 'ax-content-around', title: 'Around' },
+                    { id: 'ax-content-stretch', title: 'Stretch' },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_GRID_PROPERTIES = [
+    AXP_LAYOUT_GAP_PROPERTY,
+    AXP_LAYOUT_COLUMNS_PROPERTY,
+    AXP_LAYOUT_ROWS_PROPERTY
+];
+const AXP_LAYOUT_GRID_ROW_PROPERTIES = [
+    AXP_LAYOUT_GAP_PROPERTY,
+    cloneProperty(AXP_LAYOUT_COLUMNS_PROPERTY, { schema: { defaultValue: 12 } }),
+];
+const AXP_LAYOUT_GRID_ITEM_PROPERTIES = [
+    AXP_LAYOUT_COL_SPAN_PROPERTY,
+    AXP_LAYOUT_COL_START_PROPERTY,
+    AXP_LAYOUT_COL_END_PROPERTY,
+];
+const AXP_LAYOUT_FLEX_PROPERTIES = [
+    AXP_LAYOUT_FLEX_DIRECTION_PROPERTY,
+    AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY,
+    AXP_LAYOUT_FLEX_ALIGN_PROPERTY,
+    AXP_LAYOUT_GAP_PROPERTY,
+    AXP_LAYOUT_FLEX_WRAP_PROPERTY,
+];
+
+const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
+    name: 'width',
+    title: 'Width',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: '200px',
+        interface: {
+            name: 'width',
+            path: 'options.width',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: true,
+};
+
+const AXPButtonWidget = {
+    name: 'button-action',
+    title: 'Button',
+    description: 'Triggers customizable actions',
+    icon: 'fa-solid fa-play',
+    group: AXP_WIDGETS_ACTION_GROUP,
+    properties: [
+        AXP_DISABLED_PROPERTY,
+        cloneProperty(AXP_TEXT_PROPERTY, { schema: { defaultValue: 'Click Here' } }),
+        AXP_STYLE_COLOR_PROPERTY,
+        AXP_STYLE_LOOK_PROPERTY,
+    ],
+    components: {
+        designer: {
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-C0S_HJkl.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -641,32 +929,34 @@ class AXPCheckBoxWidgetEditComponent extends AXPWidgetComponent {
         this.trulyText = computed(() => this.options()["trulyText"]);
         this.falsyText = computed(() => this.options()["falsyText"]);
         this.disabled = computed(() => this.options()["disabled"]);
-        this.validationService = inject(AXValidationService);
-    }
-    handleValueChange(e) {
-        if (e.isUserInteraction) {
-            this.setValue(e.value);
-        }
+        this.readonly = computed(() => this.options()["readonly"]);
+        this.label = computed(() => this.options()["label"]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPCheckBoxWidgetEditComponent, isStandalone: true, selector: "axp-checkbox-widget-edit", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <ax-check-box [ngModel]="this.getValue()" (onValueChanged)="handleValueChange($event)" [disabled]="disabled()"> </ax-check-box>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPCheckBoxWidgetEditComponent, isStandalone: true, selector: "axp-checkbox-widget-edit", usesInheritance: true, ngImport: i0, template: `
+    <ax-check-box [ngModel]="this.getValue()"  [disabled]="disabled()" [readonly]="readonly()" (onValueChanged)="handleValueChanged($event)"> 
+      @if(label())
+      {
+      <ax-label >{{label()}}</ax-label>
+      }
+    </ax-check-box>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-checkbox-widget-edit',
                     template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <ax-check-box [ngModel]="this.getValue()" (onValueChanged)="handleValueChange($event)" [disabled]="disabled()"> </ax-check-box>
-    </div>
+    <ax-check-box [ngModel]="this.getValue()"  [disabled]="disabled()" [readonly]="readonly()" (onValueChanged)="handleValueChanged($event)"> 
+      @if(label())
+      {
+      <ax-label >{{label()}}</ax-label>
+      }
+    </ax-check-box>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXFormModule, AXDecoratorModule, AXValidationModule, AXButtonModule],
+                    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXLabelModule],
                 }]
         }] });
 
@@ -682,13 +972,21 @@ const AXPCheckBoxWidget = {
     group: AXP_WIDGETS_EDITOR_GROUP,
     description: 'Selects multiple options via checkboxes',
     icon: 'fa-solid fa-square-check',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_VALIDATION_PROPERTY, booleanDefaultProperty()],
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_LABEL_PROPERTY,
+        AXP_READONLY_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+        AXP_VALIDATION_PROPERTY,
+        booleanDefaultProperty()
+    ],
     components: {
         designer: {
-            component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-DfUr_DMU.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
         },
         view: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-BCsej7C6.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-tPk6Gylo.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
         },
         edit: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -778,7 +1076,7 @@ class AXPContactWidgetViewComponent extends AXPWidgetComponent {
       [text]="item.label ?? ''"
     ></ax-badge>
     } }}
-  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetViewComponent, decorators: [{
             type: Component,
@@ -1024,8 +1322,14 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
             value: '',
         };
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPContactWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="lg:ax-grid lg:ax-grid-cols-12 lg:ax-gap-4">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPContactWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<div class="lg:ax-grid lg:ax-grid-cols-12 lg:ax-gap-4">
     @for(item of internalValue();track $index) {
     <ax-text-box
       [ngModel]="item.value"
@@ -1155,7 +1459,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     ],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var contactWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1414,8 +1721,14 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
         const newValues = this.internalValue().filter((_, index) => index != i);
         this.setValue(newValues);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for (datetime of internalValue(); track $index) {
       <ax-datetime-box
@@ -1488,7 +1801,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXFormModule, AXValidationModule, AXDateTimeBoxModule, AXButtonModule, AXDecoratorModule, AXValidationModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var dateTimeBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1590,6 +1906,7 @@ const AXPDateTimeBoxWidget = {
         AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DATE_FROMAT_PROPERTY,
+        AXP_READONLY_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
@@ -1676,7 +1993,7 @@ class AXPEmailBoxWidgetViewComponent extends AXPWidgetComponent {
         }
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.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: AXPEmailBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -1793,8 +2110,14 @@ class AXPEmailBoxWidgetEditComponent extends AXPWidgetComponent {
         const newValues = this.internalValue().filter((_, index) => index != deletedIndex);
         this.setValue(newValues);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEmailBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPEmailBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPEmailBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @if(multiple())
       {
@@ -1959,7 +2282,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXFormModule, AXButtonModule, AXDecoratorModule, AXSelectBoxModule, AXTextBoxModule, AXValidationModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var emailBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -2157,8 +2483,14 @@ class AXPLargeTextWidgetEditComponent extends AXPWidgetComponent {
     set validationRules(v) {
         this._validationRules = v;
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLargeTextWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLargeTextWidgetEditComponent, isStandalone: true, selector: "axp-large-text-box-widget", inputs: { disabled: "disabled", clearButton: "clearButton" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLargeTextWidgetEditComponent, isStandalone: true, selector: "axp-large-text-box-widget", inputs: { disabled: "disabled", clearButton: "clearButton" }, host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-text-area [disabled]="disabled()" [ngModel]="getValue()" (ngModelChange)="setValue($event)" [placeholder]="placeholder()">
       @if(clearButton()){
         <ax-clear-button></ax-clear-button>
@@ -2188,7 +2520,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, AXDecoratorModule, FormsModule, AXFormModule, AXTextAreaModule],
                     inputs: ['disabled', 'clearButton'],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var largeTextWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -2358,7 +2693,7 @@ class AXPLinkWidgetViewComponent extends AXPWidgetComponent {
       </div>
       }
     </ng-template>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLinkWidgetViewComponent, decorators: [{
             type: Component,
@@ -2576,8 +2911,14 @@ class AXPLinkWidgetEditComponent extends AXPWidgetComponent {
             return [''];
         }
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLinkWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLinkWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLinkWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4">
     @if(multiple()){ @for(item of internalValue();track $index) { @if(item){
     <!-- TODO need to fix multiple -->
     <ax-text-box
@@ -2780,7 +3121,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     ],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var linkWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -2973,8 +3317,14 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         const newValues = this.internalValue().filter((_, index) => index != i);
         this.setValue(newValues);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPNumberBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPNumberBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for(number of internalValue(); track $index){
       <ax-number-box
@@ -3070,7 +3420,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXNumberBoxModule, FormsModule, AXDecoratorModule, AXFormModule, AXButtonModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var numberBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3273,13 +3626,14 @@ class AXPPasswordBoxWidgetEditComponent extends AXPWidgetComponent {
         this.disabled = computed(() => this.options()['disabled']);
         this.hasClearButton = computed(() => this.options()['hasClearButton']);
     }
-    handleValueChanged(e) {
-        if (e.isUserInteraction) {
-            this.setValue(e.value);
-        }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPasswordBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPasswordBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-password-box [ngModel]="getValue()" [disabled]="disabled()" (onValueChanged)="handleValueChanged($event)">
       <ax-validation-rule rule="required"></ax-validation-rule>
       @if(hasClearButton()){
@@ -3304,7 +3658,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXDecoratorModule, AXPasswordBoxModule, AXValidationModule, AXFormModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var passwordBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3467,7 +3824,7 @@ class AXPPhoneBoxWidgetViewComponent extends AXPWidgetComponent {
         </ng-container>
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.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: AXPPhoneBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -3572,8 +3929,14 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetComponent {
         const newValues = this.internalValue().filter((_, index) => index != deletedIndex);
         this.setValue(newValues);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPhoneBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPhoneBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPhoneBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       <ng-container *ngIf="multiple()">
         @for(item of internalValue();track $index) {
@@ -3720,7 +4083,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXFormModule, AXButtonModule, AXDecoratorModule, AXSelectBoxModule, AXTextBoxModule, AXValidationModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var phoneBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -3921,8 +4287,14 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     set validationRules(v) {
         this._validationRules = v;
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container [look]="'solid'" [ngModel]="getValue()" (ngModelChange)="setNgModel($event)">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container [look]="'solid'" [ngModel]="getValue()" (ngModelChange)="setNgModel($event)" >
     <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
     <ax-wysiwyg-toolbar>
       <ax-wysiwyg-history></ax-wysiwyg-history>
@@ -3935,13 +4307,13 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     @for (validation of validationRules; track $index) {
     <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
     }
-  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$4.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "initialValue"] }, { kind: "component", type: i1$4.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$4.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$4.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$4.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$4.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$4.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$4.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i1$4.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$4.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$4.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$4.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$4.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$4.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$4.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$4.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i1$4.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget',
-                    template: `<ax-wysiwyg-container [look]="'solid'" [ngModel]="getValue()" (ngModelChange)="setNgModel($event)">
+                    template: `<ax-wysiwyg-container [look]="'solid'" [ngModel]="getValue()" (ngModelChange)="setNgModel($event)" >
     <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
     <ax-wysiwyg-toolbar>
       <ax-wysiwyg-history></ax-wysiwyg-history>
@@ -3961,7 +4333,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, AXWysiwygModule, AXValidationModule, AXFormModule, FormsModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var richTextWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4107,8 +4482,14 @@ class AXPSelectBoxWidgetViewComponent extends AXPWidgetComponent {
                 text: item,
             };
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div>
       @if(multiple())
       { 
@@ -4141,7 +4522,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4171,8 +4555,14 @@ class AXPSelectBoxWidgetEditComponent extends AXPWidgetComponent {
         this.selectbox?.reset(true);
         this.selectbox?.refresh();
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", viewQueries: [{ propertyName: "selectbox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectbox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-select-box
       #dd
       [placeholder]="placeholder()"
@@ -4221,6 +4611,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         }], propDecorators: { selectbox: [{
                 type: ViewChild,
                 args: [AXSelectBoxComponent]
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 var selectBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -4346,7 +4739,7 @@ class AXPSelectionListWidgetViewComponent extends AXPWidgetComponent {
     @for (item of internalValue(); track $index) {
     <ax-badge [class]="'ax-ms-1'" [look]="'twotone'" [text]="item[this.textField()]" color="primary"></ax-badge>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.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: AXPSelectionListWidgetViewComponent, decorators: [{
             type: Component,
@@ -4386,8 +4779,14 @@ class AXPSelectionListWidgetEditComponent extends AXPWidgetComponent {
             this.setValue(e.value);
         }
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectionListWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectionListWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectionListWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-selection-list
       class="ax-w-max"
       [valueField]="valueField()"
@@ -4402,7 +4801,7 @@ class AXPSelectionListWidgetEditComponent extends AXPWidgetComponent {
       <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
       }
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -4428,7 +4827,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXSelectionListModule, AXFormModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var selectionListWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4471,7 +4873,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     } }@else {
     <ax-badge [look]="'twotone'" [text]="firstItem()[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 }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.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: AXPSelectionListWidgetColumnComponent, decorators: [{
             type: Component,
@@ -4620,8 +5022,14 @@ class AXPTextBoxWidgetEditComponent extends AXPWidgetComponent {
         const newValues = this.internalValue().filter((_, index) => index != i);
         this.setValue(newValues);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTextBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPTextBoxWidgetEditComponent, isStandalone: true, selector: "axp-text-box-widget", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPTextBoxWidgetEditComponent, isStandalone: true, selector: "axp-text-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for (text of internalValue(); track $index) {
       <ax-text-box class="ax-col-span-12" [ngModel]="text"  [type]="'text'" (onValueChanged)="handleValueChange($event, $index)" [disabled]="disabled()" [placeholder]="placeholder()">
@@ -4695,7 +5103,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, AXTextBoxModule, FormsModule, AXFormModule, AXDecoratorModule, AXValidationModule, AXButtonModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var textBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4822,7 +5233,7 @@ class AXPToggleWidgetViewComponent extends AXPWidgetComponent {
     <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
@@ -4861,19 +5272,29 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
     onModelChange(e) {
         this.setValue(e);
     }
+    get __class() {
+        const cls = {};
+        //
+        cls['ax-inline'] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-swith-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$4.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-swith-widget',
                     template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXSwitchModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var toggleWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4920,7 +5341,7 @@ class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
     <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.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: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
@@ -5101,8 +5522,14 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
                 return { icon: 'fa-file', color: 'ax-bg-gray-100 ax-text-gray-500' };
         }
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFileBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPFileBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPFileBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       <div class="ax-col-span-12">
         <ax-uploader-drop-zone
@@ -5141,7 +5568,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXUploaderModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var fileBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -5532,7 +5962,7 @@ class AXPGalleryWidgetViewComponent extends AXPWidgetComponent {
       <small>No Media!</small>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$4.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { 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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { 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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
             type: Component,
@@ -5637,8 +6067,14 @@ class AXPGalleryWidgetEditComponent extends AXPWidgetComponent {
                 return { icon: '', format: 'image' };
         }
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGalleryWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGalleryWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGalleryWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-2">
       @if(internalValue().length){
       <div class="ax-col-start-1 ax-col-end-13 ax-flex ax-items-center lg:ax-justify-start ax-justify-center ">
@@ -5691,7 +6127,7 @@ class AXPGalleryWidgetEditComponent extends AXPWidgetComponent {
 
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$4.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { 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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$1.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$1.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "directive", type: i5$1.AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { 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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$1.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$1.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "directive", type: i5$1.AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGalleryWidgetEditComponent, decorators: [{
             type: Component,
@@ -5755,7 +6191,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, FormsModule, AXImageModule, AXDecoratorModule, AXLoadingModule, AXUploaderModule],
                     inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var galleryWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6042,8 +6481,14 @@ class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
             duration: 1.5,
         });
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPMapBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPMapBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "mapEl", first: true, predicate: ["mapEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div class="ax-w-full ax-h-72 ax-relative">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPMapBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "mapEl", first: true, predicate: ["mapEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div class="ax-w-full ax-h-72 ax-relative">
     <div class="ax-h-full" #mapEl></div>
     @if(multiple()){
     <div class="marker-list-panel">
@@ -6077,6 +6522,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         }], propDecorators: { mapEl: [{
                 type: ViewChild,
                 args: ['mapEl']
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 var mapBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -6150,7 +6598,11 @@ const AXPMapBoxWidget = {
     description: 'Displays and interacts with maps',
     icon: 'fa-solid fa-map-location',
     group: AXP_WIDGETS_ADVANCE_GROUP,
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY],
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_ALLOW_MULTIPLE_PROPERTY
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return mapBoxWidgetView_component; }).then((c) => c.AXPMapBoxWidgetViewComponent),
@@ -6253,8 +6705,14 @@ class AXPSignatureWidgetEditComponent extends AXPWidgetComponent {
             this.setValue(this.getDataURL());
         }
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSignatureWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-widget", viewQueries: [{ propertyName: "padCanvas", first: true, predicate: ["padCanvas"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-widget", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "padCanvas", first: true, predicate: ["padCanvas"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-gap-3">
       @if(editMode() ){
       <canvas width="300" class="ax-border ax-rounded-md" #padCanvas></canvas>
@@ -6281,7 +6739,7 @@ class AXPSignatureWidgetEditComponent extends AXPWidgetComponent {
       </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "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: AXImageModule }, { kind: "component", type: i2$4.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "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: AXImageModule }, { kind: "component", type: i2$5.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
@@ -6322,6 +6780,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         }], propDecorators: { padCanvas: [{
                 type: ViewChild,
                 args: ['padCanvas']
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 var signaturePadWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -6384,7 +6845,7 @@ class AXPSignatureWidgetViewComponent extends AXPWidgetComponent {
       <span>{{placeholder()}}</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$4.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSignatureWidgetViewComponent, decorators: [{
             type: Component,
@@ -6445,30 +6906,54 @@ class AXPBlockWidgetDesignerComponent extends AXPContainerWidgetComponent {
         super(...arguments);
         this.backgroundColor = computed(() => this.options()["backgroundColor"]);
         this.cssClass = computed(() => this.options()["cssClass"]);
+        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() {
-        return this.cssClass();
-    }
-    get __class2() {
-        return ['ax-border', 'ax-border-dashed'];
+        const cls = {};
+        //
+        cls[`ax-w-full`] = true;
+        cls[`ax-border`] = true;
+        cls[`ax-border-dashed`] = true;
+        //
+        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;
+        }
+        return cls;
     }
     get __style() {
         return {
             'background-color': this.backgroundColor(),
-            'display': 'block',
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPBlockWidgetDesignerComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class2", "style": "this.__style" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPBlockWidgetDesignerComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, providers: [
             {
                 provide: AXPContainerWidgetComponent, useExisting: AXPBlockWidgetDesignerComponent
             }
         ], usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+    <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-    <axp-designer-add-widget-button></axp-designer-add-widget-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPWidgetDesignerRendererComponent, 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-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: [{
             type: Component,
@@ -6476,13 +6961,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-block-widget',
                     template: `
     @for (node of children(); track $index) {
-    <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+    <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></axp-designer-add-widget-button>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererComponent, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPBlockWidgetDesignerComponent
@@ -6492,9 +6979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         }], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
-            }], __class2: [{
-                type: HostBinding,
-                args: ['class']
             }], __style: [{
                 type: HostBinding,
                 args: ['style']
@@ -6510,14 +6994,28 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
         super(...arguments);
         this.backgroundColor = computed(() => this.options()["backgroundColor"]);
         this.cssClass = computed(() => this.options()["cssClass"]);
+        this.flexAlign = computed(() => this.options()["flexAlign"]?.id);
+        this.flexJustify = computed(() => this.options()["flexJustify"]?.id);
+        this.gap = computed(() => this.options()["gap"] ?? 0);
     }
     get __class() {
-        return this.cssClass();
+        const cls = {};
+        //
+        cls[`ax-flex`] = true;
+        cls[`ax-flex-col`] = true;
+        cls[`ax-w-full`] = true;
+        cls[`ax-gap-${this.gap}`] = true;
+        if (this.flexAlign()) {
+            cls[this.flexAlign()] = true;
+        }
+        if (this.flexJustify()) {
+            cls[this.flexJustify()] = true;
+        }
+        return cls;
     }
     get __style() {
         return {
             'background-color': this.backgroundColor(),
-            'display': 'block',
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -6560,7 +7058,11 @@ const AXPBlockWidget = {
     icon: 'fa-solid fa-square',
     group: AXP_WIDGETS_LAYOUT_GROUP,
     container: true,
-    properties: [AXP_FONT_SIZE_PROPERTY, cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } })],
+    properties: [
+        AXP_FONT_SIZE_PROPERTY,
+        cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
+        ...AXP_LAYOUT_FLEX_PROPERTIES
+    ],
     components: {
         designer: {
             component: () => Promise.resolve().then(function () { return blockWidgetDesigner_component; }).then((c) => c.AXPBlockWidgetDesignerComponent),
@@ -6585,7 +7087,6 @@ class AXPPageWidgetViewComponent extends AXPWidgetComponent {
     get __style() {
         return {
             'background-color': this.backgroundColor(),
-            'display': 'block',
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPageWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -6639,7 +7140,7 @@ const AXPPageWidget = {
             component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-widgets-page-widget-designer.component-DlfG4EP1.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-page-widget-designer.component-6BMZ0qRw.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
         },
     },
 };
@@ -6744,12 +7245,12 @@ class AXPRepeaterWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @for(row of rows();let i=$index; track i){
     <ng-container>
       @for (node of children();track $index) {
-      <axp-widget-designer-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"> </axp-widget-designer-renderer>
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [index]="i" [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: "component", type: AXPWidgetDesignerRendererComponent, selector: "axp-widget-designer-renderer", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: 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,
@@ -6758,7 +7259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @for(row of rows();let i=$index; track i){
     <ng-container>
       @for (node of children();track $index) {
-      <axp-widget-designer-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"> </axp-widget-designer-renderer>
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"> </ng-container>
       }
     </ng-container>
     }
@@ -6766,7 +7267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererComponent, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPRepeaterWidgetDesignerComponent
@@ -6826,38 +7327,50 @@ var colorBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
+        this.placeholder = computed(() => this.options()["placeholder"]);
         this.disabled = computed(() => this.options()["disabled"]);
+        this.readonly = computed(() => this.options()["readonly"]);
         this.hasClearButton = computed(() => this.options()['hasClearButton']);
         this.validationRules = computed(() => this.options()["validationRules"] ?? []);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPColorBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <ax-color-box [disabled]="disabled()" [ngModel]="getValue()" (ngModelChange)="setValue($event)">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPColorBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    <ax-color-box [disabled]="disabled()" [readonly]="readonly()" [ngModel]="getValue()" [placeholder]="placeholder()" (onValueChanged)="handleValueChanged($event)">
+      @for (validation of validationRules(); track $index) {
+          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
       @if(hasClearButton()){
       <ax-clear-button></ax-clear-button>
-      } @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-      }
+      } 
     </ax-color-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$5.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$6.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <ax-color-box [disabled]="disabled()" [ngModel]="getValue()" (ngModelChange)="setValue($event)">
+    <ax-color-box [disabled]="disabled()" [readonly]="readonly()" [ngModel]="getValue()" [placeholder]="placeholder()" (onValueChanged)="handleValueChanged($event)">
+      @for (validation of validationRules(); track $index) {
+          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
       @if(hasClearButton()){
       <ax-clear-button></ax-clear-button>
-      } @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-      }
+      } 
     </ax-color-box>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXColorBoxModule, AXDecoratorModule, AXFormModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var colorBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6930,8 +7443,18 @@ const AXPColorBoxWidget = {
     description: 'Picks and applies colors',
     icon: 'fa-solid fa-palette',
     group: AXP_WIDGETS_EDITOR_GROUP,
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_PLACEHOLDER_PROPERTY],
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_READONLY_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+        AXP_VALIDATION_PROPERTY,
+        AXP_PLACEHOLDER_PROPERTY
+    ],
     components: {
+        designer: {
+            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-BF24k3Y-.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
+        },
         view: {
             component: () => Promise.resolve().then(function () { return colorBoxWidgetView_component; }).then((c) => c.AXPColorBoxWidgetViewComponent),
         },
@@ -6947,9 +7470,6 @@ const AXPColorBoxWidget = {
         print: {
             component: () => Promise.resolve().then(function () { return colorBoxWidgetPrint_component; }).then((c) => c.AXPColorBoxWidgetPrintComponent),
         },
-        designer: {
-            component: () => Promise.resolve().then(function () { return colorBoxWidgetEdit_component; }).then((c) => c.AXPColorBoxWidgetEditComponent),
-        },
     },
 };
 
@@ -6961,13 +7481,14 @@ class AXPTextBlockWidgetViewComponent extends AXPWidgetComponent {
         this.innerContent = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.content()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTextBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPTextBlockWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPTextBlockWidgetViewComponent, isStandalone: true, selector: "axp-text-block-widget", usesInheritance: true, ngImport: i0, template: `
      <div  [innerHTML]="innerContent()"></div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTextBlockWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: "axp-text-block-widget",
                     template: `
      <div  [innerHTML]="innerContent()"></div>
   `,
@@ -6989,11 +7510,10 @@ const AXPTextBlockWidget = {
     icon: 'fa-solid fa-text',
     group: AXP_WIDGETS_LAYOUT_GROUP,
     properties: [
-        AXP_PLACEHOLDER_PROPERTY,
         {
             name: 'content',
             title: 'Content',
-            group: AXP_DATA_PROPERTY_GROUP,
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 dataType: 'string',
                 defaultValue: 'Text Block',
@@ -7017,7 +7537,7 @@ const AXPTextBlockWidget = {
             component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
         },
         designer: {
-            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
+            component: () => import('./acorex-platform-widgets-text-block-widget-designer.component-Bi9hlpvB.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
         },
     },
 };
@@ -7047,7 +7567,7 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
       <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
      }
     </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$6.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$5.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$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$5.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -7076,8 +7596,14 @@ class AXPFormFieldWidgetDesignerComponent extends AXPContainerWidgetComponent {
         super(...arguments);
         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: AXPFormFieldWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetDesignerComponent, isStandalone: true, selector: "ng-component", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetDesignerComponent, isStandalone: true, selector: "axp-form-field-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
                 provide: AXPContainerWidgetComponent, useExisting: AXPFormFieldWidgetDesignerComponent
             }
@@ -7085,22 +7611,23 @@ class AXPFormFieldWidgetDesignerComponent extends AXPContainerWidgetComponent {
     <ax-form-field>
      <ax-label>{{label()}}</ax-label>
      @for (node of children(); track $index) {
-      <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
      }
      @empty {
        <axp-designer-add-widget-button class="axp-empty-space ax-block ax-p-0 "></axp-designer-add-widget-button>
      }
     </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$6.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPWidgetDesignerRendererComponent, selector: "axp-widget-designer-renderer", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, 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-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
      }
      @empty {
        <axp-designer-add-widget-button class="axp-empty-space ax-block ax-p-0 "></axp-designer-add-widget-button>
@@ -7109,14 +7636,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererComponent, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPFormFieldWidgetDesignerComponent
                         }
                     ]
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var formFieldWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7180,29 +7710,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
-var gridWidgetPrint_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPGridWidgetPrintComponent: AXPGridWidgetPrintComponent
-});
-
 class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
         this.designerService = inject(AXPDesignerService);
-        this.element = inject(ElementRef);
         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 = signal(false);
-        this.e = effect(() => {
-            const v = this.cells();
-            const g = this.gap();
-            setTimeout(() => {
-                this.element.nativeElement.style.minHeight = this.placeholder?.nativeElement ? `${this.placeholder.nativeElement.clientHeight}px` : '100px';
-            }, 50);
-        });
-    }
+        this.settled = computed(() => (this.cols() * this.rows() > 1) && this.children().length);
+    }
+    // private e = effect(async () => {
+    //   if (this.settled()) {
+    //     const cols = this.cols();
+    //     const rows = this.rows();
+    //     const gap = this.gap();
+    //     // const gridstack = (await import('gridstack')).GridStack;
+    //     // const cols = this.cols();
+    //     // const rows = this.rows();
+    //     // debugger
+    //     // // Initialize the grid with responsive options
+    //     // gridstack.init({
+    //     //   cellHeight: 80,
+    //     //   margin: 0,
+    //     //   minRow: 1,
+    //     //   column: 11,
+    //     // });
+    //     setTimeout(() => {
+    //       this.element.nativeElement.style.minHeight = this.placeholder?.nativeElement ? `${this.placeholder.nativeElement.clientHeight}px` : '100px';
+    //     }, 50);
+    //   }
+    // })
     handleDrawerSelect(e) {
         this.designerService.update({
             values: {
@@ -7211,53 +7749,48 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
             mode: 'update',
             widget: this.node
         });
-        this.settled.set(true);
+        const list = Array.from({ length: this.cells().length }).map(() => ({
+            type: AXPWidgetsCatalog.gridItem,
+        }));
+        list.forEach((node) => {
+            this.designerService.addWidget(this.node, node);
+        });
     }
     get __class() {
-        return [
-            'ax-relative',
-            'ax-block',
-        ];
+        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: 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: "ng-component", host: { properties: { "class": "this.__class" } }, providers: [
+    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
             }
-        ], viewQueries: [{ propertyName: "placeholder", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        ], usesInheritance: true, ngImport: i0, template: `
     @if(settled())
     {
-      <div #placeholder class="ax-absolute ax-top-0 ax-left-0 ax-right-0 ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
-        @for(c of cells();track $index)
-        {
-          <div class="axp-empty-space ax-p-8"></div>
-        }
-      </div>
-      <div  class="ax-relative ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
+      <div class="ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
         @for (node of children(); track $index) {
-        <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
         }
       </div>
     }@else {
       <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPWidgetDesignerRendererComponent, 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 }); }
+  `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-layout-widget',
                     template: `
     @if(settled())
     {
-      <div #placeholder class="ax-absolute ax-top-0 ax-left-0 ax-right-0 ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
-        @for(c of cells();track $index)
-        {
-          <div class="axp-empty-space ax-p-8"></div>
-        }
-      </div>
-      <div  class="ax-relative ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
+      <div class="ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
         @for (node of children(); track $index) {
-        <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
         }
       </div>
     }@else {
@@ -7266,17 +7799,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererComponent, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
                         }
                     ]
                 }]
-        }], propDecorators: { placeholder: [{
-                type: ViewChild,
-                args: ["placeholder", { static: false }]
-            }], __class: [{
+        }], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -7286,71 +7816,16 @@ var gridWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   AXPGridWidgetDesignerComponent: AXPGridWidgetDesignerComponent
 });
 
-const AXP_LAYOUT_GAP_PROPERTY = {
-    name: 'gap',
-    title: 'Gap',
-    group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'number',
-        defaultValue: 2,
-        interface: {
-            name: 'gap',
-            path: 'options.gap',
-            type: AXPWidgetsCatalog.number,
-            options: {
-                minValue: 0,
-                maxValue: 12,
-            },
-        },
-    },
-    visible: true,
-};
-const AXP_LAYOUT_COLUMNS_PROPERTY = {
-    name: 'cols',
-    title: 'Columns',
-    group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'number',
-        defaultValue: 1,
-        interface: {
-            name: 'cols',
-            path: 'options.cols',
-            type: AXPWidgetsCatalog.number,
-            options: {
-                minValue: 1,
-                maxValue: 12,
-            },
-        },
-    },
-    visible: true,
-};
-const AXP_LAYOUT_ROWS_PROPERTY = {
-    name: 'rows',
-    title: 'Rows',
-    group: AXP_STYLING_PROPERTY_GROUP,
-    schema: {
-        dataType: 'number',
-        defaultValue: 1,
-        interface: {
-            name: 'rows',
-            path: 'options.rows',
-            type: AXPWidgetsCatalog.number,
-            options: {
-                minValue: 1,
-                maxValue: 100,
-            },
-        },
-    },
-    visible: true,
-};
-
 const AXPGridWidget = {
-    name: 'grid',
+    name: 'grid-layout',
     title: 'Grid Layout',
     container: true,
     group: AXP_WIDGETS_LAYOUT_GROUP,
     icon: 'fa-solid fa-grid',
-    properties: [AXP_NAME_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_ROWS_PROPERTY],
+    properties: [
+        AXP_NAME_PROPERTY,
+        ...AXP_LAYOUT_GRID_PROPERTIES
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return gridWidgetView_component; }).then((c) => c.AXPGridWidgetViewComponent),
@@ -7359,7 +7834,7 @@ const AXPGridWidget = {
             component: () => Promise.resolve().then(function () { return gridWidgetView_component; }).then((c) => c.AXPGridWidgetViewComponent),
         },
         print: {
-            component: () => Promise.resolve().then(function () { return gridWidgetPrint_component; }).then((c) => c.AXPGridWidgetPrintComponent),
+            component: () => Promise.resolve().then(function () { return gridWidgetView_component; }).then((c) => c.AXPGridWidgetViewComponent),
         },
         designer: {
             component: () => Promise.resolve().then(function () { return gridWidgetDesigner_component; }).then((c) => c.AXPGridWidgetDesignerComponent),
@@ -7376,8 +7851,14 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
         this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'));
         this.outputType = computed(() => this.options()['outputType']);
     }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @if(this.content()){
     <ax-qrcode
       [content]="this.content()"
@@ -7388,7 +7869,7 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     >
     </ax-qrcode>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: QrcodeModule }, { kind: "component", type: i1$6.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$6.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPQrcodeWidgetViewComponent, decorators: [{
             type: Component,
@@ -7407,9 +7888,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, QrcodeModule],
+                    imports: [CommonModule, AXQrcodeModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7418,11 +7902,11 @@ var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPQrcodeWidget = {
     name: 'qrcode',
-    title: 'Qrcode',
+    title: 'QR Code',
     group: AXP_WIDGETS_ADVANCE_GROUP,
     container: false,
     icon: 'fa-solid fa-qrcode',
-    description: 'Display and edit Qrcodes',
+    description: 'Display and edit QR Codes',
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
@@ -7476,6 +7960,320 @@ const AXPQrcodeWidget = {
     },
 };
 
+class AXPGridItemWidgetViewComponent extends AXPWidgetComponent {
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+var gridItemWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPGridItemWidgetViewComponent: AXPGridItemWidgetViewComponent
+});
+
+class AXPGridItemWidgetPrintComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGridItemWidgetPrintComponent, isStandalone: true, selector: "ng-component", 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: AXPGridItemWidgetPrintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: []
+                }]
+        }] });
+
+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);
+    }
+    async handleSlotClick() {
+        await this.designerService.showPicker(this.node);
+    }
+    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: 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
+            }
+        ], 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" >
+      <div class="ax-m-auto ax-p-4 ax-text-primary-500 hover:ax-text-primary-800" (click)="handleSlotClick()">
+        <i class="fa-solid fa-plus "></i>
+      </div>
+    </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetDesignerComponent, decorators: [{
+            type: Component,
+            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" >
+      <div class="ax-m-auto ax-p-4 ax-text-primary-500 hover:ax-text-primary-800" (click)="handleSlotClick()">
+        <i class="fa-solid fa-plus "></i>
+      </div>
+    </div>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
+                    providers: [
+                        {
+                            provide: AXPContainerWidgetComponent, useExisting: AXPGridItemWidgetDesignerComponent
+                        }
+                    ]
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var gridItemWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPGridItemWidgetDesignerComponent: AXPGridItemWidgetDesignerComponent
+});
+
+const AXPGridItemWidget = {
+    name: 'grid-item-layout',
+    title: 'Grid Item',
+    container: true,
+    visible: false,
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    icon: 'fa-solid fa-objects-column',
+    properties: [
+        AXP_NAME_PROPERTY,
+        ...AXP_LAYOUT_GRID_ITEM_PROPERTIES,
+        ...AXP_LAYOUT_FLEX_PROPERTIES
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return gridItemWidgetView_component; }).then((c) => c.AXPGridItemWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return gridItemWidgetView_component; }).then((c) => c.AXPGridItemWidgetViewComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return gridItemWidgetView_component; }).then((c) => c.AXPGridItemWidgetViewComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return gridItemWidgetDesigner_component; }).then((c) => c.AXPGridItemWidgetDesignerComponent),
+        },
+    },
+};
+
+class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+var gridRowWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPGridRowWidgetViewComponent: AXPGridRowWidgetViewComponent
+});
+
+class AXPGridRowWidgetPrintComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGridRowWidgetPrintComponent, isStandalone: true, selector: "ng-component", 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: AXPGridRowWidgetPrintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: []
+                }]
+        }] });
+
+var gridRowWidgetPrint_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPGridRowWidgetPrintComponent: AXPGridRowWidgetPrintComponent
+});
+
+class AXPGridRowWidgetDesignerComponent extends AXPContainerWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.designerService = inject(AXPDesignerService);
+        this.cols = computed(() => this.options()["cols"] ?? 1);
+        this.gap = computed(() => this.options()["gap"] ?? 0);
+        this.cells = computed(() => Array.from({ length: this.cols() - sum(this.children().map(c => get(c.options, 'colSpan'))) }).map((c, index) => index));
+        this.hoverIndex = signal(0);
+    }
+    handleMouseHover(index) {
+        console.log("handleMouseHover", index);
+        this.hoverIndex.set(index);
+    }
+    handleClick(e, index) {
+        console.log("handleClick", index);
+        e.stopPropagation();
+        this.hoverIndex.set(-1);
+        e.preventDefault();
+        this.designerService.addWidget(this.node, {
+            type: AXPWidgetsCatalog.gridItem,
+            options: {
+                colSpan: index + 1
+            }
+        });
+    }
+    handleMouseLeave(event) {
+        this.hoverIndex.set(-1);
+    }
+    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: AXPGridRowWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetDesignerComponent, isStandalone: true, selector: "axp-grid-row-widget", host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+   <div class="ax-grid ax-grid-cols-{{cols()}} ax-gap-{{gap()}}">
+        @for (node of children(); track $index) {
+          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+        }
+        @for (node of cells(); track $index) {
+          <div class="axp-empty-slot" (mouseenter)="handleMouseHover($index)" (mouseleave)="handleMouseLeave($event)" (click)="handleClick($event,$index)" [class.axp-state-hover]="hoverIndex()>=$index">
+          </div>
+        }
+    </div>
+  `, isInline: true, styles: ["axp-grid-row-widget.axp-widget-host .axp-empty-slot{display:flex;flex:1 1 0%;align-items:center;justify-content:center;border-width:1px;border-style:dashed;padding:1rem;background-color:rgba(209,213,219,.1);background-image:linear-gradient(135deg,rgb(209 213 219 / 50%) 10%,transparent 0,transparent 50%,rgb(209 213 219 / 50%) 0,rgb(209 213 219 / 50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}axp-grid-row-widget.axp-widget-host .axp-empty-slot.axp-state-hover{border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-300),var(--tw-bg-opacity))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-grid-row-widget', template: `
+   <div class="ax-grid ax-grid-cols-{{cols()}} ax-gap-{{gap()}}">
+        @for (node of children(); track $index) {
+          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+        }
+        @for (node of cells(); track $index) {
+          <div class="axp-empty-slot" (mouseenter)="handleMouseHover($index)" (mouseleave)="handleMouseLeave($event)" (click)="handleClick($event,$index)" [class.axp-state-hover]="hoverIndex()>=$index">
+          </div>
+        }
+    </div>
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent], providers: [
+                        {
+                            provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
+                        }
+                    ], styles: ["axp-grid-row-widget.axp-widget-host .axp-empty-slot{display:flex;flex:1 1 0%;align-items:center;justify-content:center;border-width:1px;border-style:dashed;padding:1rem;background-color:rgba(209,213,219,.1);background-image:linear-gradient(135deg,rgb(209 213 219 / 50%) 10%,transparent 0,transparent 50%,rgb(209 213 219 / 50%) 0,rgb(209 213 219 / 50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}axp-grid-row-widget.axp-widget-host .axp-empty-slot.axp-state-hover{border-color:transparent;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-300),var(--tw-bg-opacity))}\n"] }]
+        }], propDecorators: { handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var gridRowWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPGridRowWidgetDesignerComponent: AXPGridRowWidgetDesignerComponent
+});
+
+const AXPGridRowWidget = {
+    name: "grid-row-layout",
+    title: "Grid Row Layout",
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    container: true,
+    icon: "fa-solid fa-diagram-cells",
+    properties: [
+        AXP_NAME_PROPERTY,
+        ...AXP_LAYOUT_GRID_ROW_PROPERTIES
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return gridRowWidgetView_component; }).then((c) => c.AXPGridRowWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return gridRowWidgetView_component; }).then((c) => c.AXPGridRowWidgetViewComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return gridRowWidgetPrint_component; }).then((c) => c.AXPGridRowWidgetPrintComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return gridRowWidgetDesigner_component; }).then((c) => c.AXPGridRowWidgetDesignerComponent),
+        },
+    }
+};
+
 class AXPWidgetsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetsModule, imports: [i1$5.AXPLayoutBuilderModule] }); }
@@ -7489,6 +8287,8 @@ class AXPWidgetsModule {
                     AXPTextBlockWidget,
                     AXPFormFieldWidget,
                     AXPGridWidget,
+                    AXPGridItemWidget,
+                    AXPGridRowWidget,
                     //
                     AXPTextBoxWidget,
                     AXPCheckBoxWidget,
@@ -7529,6 +8329,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                                 AXPTextBlockWidget,
                                 AXPFormFieldWidget,
                                 AXPGridWidget,
+                                AXPGridItemWidget,
+                                AXPGridRowWidget,
                                 //
                                 AXPTextBoxWidget,
                                 AXPCheckBoxWidget,
@@ -7564,5 +8366,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, AXPContactWidgetFilterComponent, 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, AXPMapBoxWidgetColumnComponent, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetFilterComponent, AXPMapBoxWidgetPrintComponent, 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, 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_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATE_FROMAT_PROPERTY, AXP_DESCRIPTION_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_LABEL_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, 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, plainTextDefaultProperty };
+export { AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetFilterComponent, 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, AXPMapBoxWidgetColumnComponent, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetFilterComponent, AXPMapBoxWidgetPrintComponent, 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, 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_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATE_FROMAT_PROPERTY, AXP_DESCRIPTION_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_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_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, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map