@acorex/platform 18.0.13 → 18.0.14

package/fesm2022/acorex-platform-widgets.mjs

@@ -7,7 +7,7 @@ import { AXPWidgetComponent, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, cloneP
 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, signal, ViewEncapsulation, ViewChild, effect, HostBinding, 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';
@@ -64,7 +64,7 @@ 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 {
@@ -551,6 +551,7 @@ function plainTextDefaultProperty() {
         group: AXP_DATA_PROPERTY_GROUP,
         schema: {
             dataType: 'string',
+            defaultValue: "Sample Text",
             interface: {
                 name: 'defaultValue',
                 path: 'defaultValue',
@@ -3922,7 +3923,7 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
         this._validationRules = v;
     }
     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", 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 +3936,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"] }, { 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>
@@ -7180,29 +7181,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);
+    }
+    // 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,31 +7220,24 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
             mode: 'update',
             widget: this.node
         });
-        this.settled.set(true);
-    }
-    get __class() {
-        return [
-            'ax-relative',
-            'ax-block',
-        ];
+        const list = Array.from({ length: this.cells().length }).map(() => ({
+            type: AXPWidgetsCatalog.gridItem,
+        }));
+        list.forEach((node) => {
+            this.designerService.addWidget(this.node, node);
+        });
     }
     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: "ng-component", 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>
+          <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
         }
       </div>
     }@else {
@@ -7249,15 +7251,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     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>
+          <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
         }
       </div>
     }@else {
@@ -7273,13 +7269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         }
                     ]
                 }]
-        }], propDecorators: { placeholder: [{
-                type: ViewChild,
-                args: ["placeholder", { static: false }]
-            }], __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 var gridWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7305,6 +7295,60 @@ const AXP_LAYOUT_GAP_PROPERTY = {
     },
     visible: true,
 };
+const AXP_LAYOUT_COL_SPAN_PROPERTY = {
+    name: 'colSpan',
+    title: 'Column Span',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        interface: {
+            name: 'colSpan',
+            path: 'options.colSpan',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 0,
+                maxValue: 12,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_COL_START_PROPERTY = {
+    name: 'colStart',
+    title: 'Column Start',
+    group: AXP_STYLING_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_STYLING_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',
@@ -7343,9 +7387,60 @@ const AXP_LAYOUT_ROWS_PROPERTY = {
     },
     visible: true,
 };
+const AXP_FLEX_JUSTIFY_PROPERTY = {
+    name: 'flexJustify',
+    title: 'Flex Justify',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-justify-start' },
+        interface: {
+            name: 'flexJustify',
+            path: 'options.flexJustify',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-justify-start', title: 'Justify Start' },
+                    { id: 'ax-justify-end', title: 'Justify End' },
+                    { id: 'ax-justify-center', title: 'Justify Center' },
+                    { id: 'ax-justify-between', title: 'Justify Between' },
+                    { id: 'ax-justify-around', title: 'Justify Around' },
+                    { id: 'ax-justify-evenly', title: 'Justify Evenly' },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_FLEX_ALIGN_PROPERTY = {
+    name: 'flexAlign',
+    title: 'Flex Align',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'ax-items-start' },
+        interface: {
+            name: 'flexAlign',
+            path: 'options.flexAlign',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                hasClearButton: false,
+                dataSource: [
+                    { id: 'ax-items-start', title: 'Align Start' },
+                    { id: 'ax-items-end', title: 'Align End' },
+                    { id: 'ax-items-center', title: 'Align Center' },
+                    { id: 'ax-items-baseline', title: 'Align Baseline' },
+                    { id: 'ax-items-stretch', title: 'Align Stretch' },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
 
 const AXPGridWidget = {
-    name: 'grid',
+    name: 'grid-layout',
     title: 'Grid Layout',
     container: true,
     group: AXP_WIDGETS_LAYOUT_GROUP,
@@ -7359,7 +7454,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),
@@ -7388,7 +7483,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,7 +7502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, QrcodeModule],
+                    imports: [CommonModule, AXQrcodeModule],
                 }]
         }] });
 
@@ -7418,11 +7513,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 +7571,168 @@ 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.flexAlign = computed(() => this.options()["flexAlign"]?.id);
+        this.flexJustify = computed(() => this.options()["flexJustify"]?.id);
+        this.outerClass = computed(() => {
+            const cls = {};
+            //
+            cls[`!ax-flex`] = true;
+            cls[`ax-flex-1`] = true;
+            if (this.flexAlign()) {
+                cls[this.flexAlign()] = true;
+            }
+            if (this.flexJustify()) {
+                cls[this.flexJustify()] = 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;
+        });
+    }
+    async handleSlotClick() {
+        await this.designerService.showPicker(this.node);
+    }
+    get __class() {
+        return ['ax-flex-1'];
+    }
+    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: "ng-component", host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXPContainerWidgetComponent, useExisting: AXPGridItemWidgetDesignerComponent
+            }
+        ], 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>
+    }
+    @empty {
+    <div class="axp-empty-space  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: "component", type: AXPWidgetDesignerRendererComponent, 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: [{
+                    template: `
+    @for (node of children(); track $index) {
+        <axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-designer-renderer>
+    }
+    @empty {
+    <div class="axp-empty-space  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, AXPWidgetDesignerRendererComponent, 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_COL_SPAN_PROPERTY,
+        AXP_LAYOUT_COL_START_PROPERTY,
+        AXP_LAYOUT_COL_END_PROPERTY,
+        AXP_FLEX_ALIGN_PROPERTY,
+        AXP_FLEX_JUSTIFY_PROPERTY,
+    ],
+    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 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 +7746,7 @@ class AXPWidgetsModule {
                     AXPTextBlockWidget,
                     AXPFormFieldWidget,
                     AXPGridWidget,
+                    AXPGridItemWidget,
                     //
                     AXPTextBoxWidget,
                     AXPCheckBoxWidget,
@@ -7529,6 +7787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                                 AXPTextBlockWidget,
                                 AXPFormFieldWidget,
                                 AXPGridWidget,
+                                AXPGridItemWidget,
                                 //
                                 AXPTextBoxWidget,
                                 AXPCheckBoxWidget,