@acorex/platform 18.1.0 → 18.1.1

package/fesm2022/acorex-platform-widgets.mjs

@@ -86,7 +86,7 @@ class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPButtonWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPButtonWidgetViewComponent, isStandalone: true, selector: "axp_button_widget", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPButtonWidgetViewComponent, isStandalone: true, selector: "axp-button-widget", usesInheritance: true, ngImport: i0, template: `
     <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
       @if(icon() && text()){
       <ax-prefix
@@ -103,7 +103,7 @@ class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPButtonWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp_button_widget',
+                    selector: 'axp-button-widget',
                     template: `
     <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
       @if(icon() && text()){
@@ -1061,7 +1061,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-COvuxaTt.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-Oxpdaz9P.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -1334,12 +1334,12 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
                     this.dataSource.refresh();
                 }
             }
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, [name]: value } : item);
+            if (this.multiple())
+                this.setValue(newValues);
+            else
+                this.setValue(newValues[0]);
         }
-        const newValues = this.internalValue().map((item, index) => selectedIndex === index ? { ...item, [name]: value } : item);
-        if (this.multiple())
-            this.setValue(newValues);
-        else
-            this.setValue(newValues[0]);
     }
     generateClasses(element) {
         if (this.multiple()) {
@@ -1353,7 +1353,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
             }
             else {
                 if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-11';
+                    return 'ax-col-start-1 ax-col-end-12';
                 }
             }
         }
@@ -1451,7 +1451,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-7 ax-col-end-13 lg:ax-col-start-10 xl:ax-col-start-11 "
+      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
     >
       <ax-prefix>
         <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -1514,7 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-7 ax-col-end-13 lg:ax-col-start-10 xl:ax-col-start-11 "
+      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
     >
       <ax-prefix>
         <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -1571,11 +1571,11 @@ var contactWidgetPrint_component = /*#__PURE__*/Object.freeze({
 class AXPContactWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.type = computed(() => this.options()['type']);
-        this.labelList = computed(() => this.options()['labelList'] || ['primary', 'secondary', 'Add New']);
-        this.hasLabel = computed(() => this.options()['hasLabel']);
-        this.multiple = computed(() => this.options()['multiple']);
-        this.hasIcon = computed(() => this.options()['hasIcon']);
+        this.type = computed(() => this.options()['type'] ?? 'link');
+        this.labelList = computed(() => this.options()['labelList'] ?? ['primary', 'secondary']);
+        this.hasLabel = computed(() => this.options()['hasLabel'] ?? false);
+        this.multiple = computed(() => this.options()['multiple'] ?? false);
+        this.hasIcon = computed(() => this.options()['hasIcon'] ?? false);
         this.internalValue = computed(() => this.itemToArray());
         this.clipboard = inject(AXPClipBoardService);
         this.chooseIcon = () => {
@@ -4448,13 +4448,15 @@ class AXPRichTextWidgetViewComponent extends AXPWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: `<span class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()"> </span>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()">
+  </span>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget',
-                    template: `<span class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()"> </span>`,
+                    template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()" [innerHTML]="text()">
+  </span>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -4866,17 +4868,45 @@ var selectBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.multiple = this.options['multiple'];
+        this.valueField = this.options['valueField'] ?? 'id';
+        this.textField = this.options['textField'] ?? 'title';
+        this.internalValue = computed(() => Array.isArray(this.rawValue)
+            ? this.rawValue.map((item) => this.extractItem(item))
+            : [this.extractItem(this.rawValue)]);
+    }
+    extractItem(item) {
+        return typeof item == 'object'
+            ? {
+                [this.valueField]: item[this.valueField],
+                [this.textField]: item[this.textField],
+            }
+            : {
+                [this.valueField]: item,
+                [this.textField]: item,
+            };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: ` <div class="ax-flex ax-gap-2">
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+    }
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: ['rawValue']
+                    imports: [CommonModule, AXBadgeModule],
+                    inputs: ['rawValue'],
                 }]
         }] });
 
@@ -5161,6 +5191,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.valueField = this.options['valueField'];
         this.textField = this.options['textField'];
         this.items = this.options['items'];
+        this.multiple = this.options['multiple'];
         this.selectedItemIds = computed(() => {
             return this.rawValue || [];
         });
@@ -6633,7 +6664,7 @@ class AXPMapBoxWidgetViewComponent extends AXPWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPMapBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPMapBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div [class.height.px]="height()" class="ax-w-full">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPMapBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
       [hasMarker]="false"
       [markers]="markers()"
@@ -6646,7 +6677,7 @@ class AXPMapBoxWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPMapBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<div [class.height.px]="height()" class="ax-w-full">
+                    template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
       [hasMarker]="false"
       [markers]="markers()"
@@ -7246,9 +7277,9 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPBlockWidgetViewComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetViewComponent, decorators: [{
             type: Component,
@@ -7256,7 +7287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-block-widget',
                     template: `
     @for (node of children(); track $index) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7317,9 +7348,10 @@ class AXPPageWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPageWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPageWidgetViewComponent, isStandalone: true, selector: "axp-page-widget", host: { properties: { "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
     @for (node of children(); track $index) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="mode" > </axp-widget-renderer>
+    <!-- <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="mode" > </axp-widget-renderer> -->
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPageWidgetViewComponent, decorators: [{
             type: Component,
@@ -7327,7 +7359,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-page-widget',
                     template: `
     @for (node of children(); track $index) {
-    <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="mode" > </axp-widget-renderer>
+    <!-- <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="mode" > </axp-widget-renderer> -->
+    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7837,34 +7870,46 @@ const AXPDocumentWidget = {
 class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.label = computed(() => this.options()["label"]);
+        this.label = computed(() => this.options()['label']);
+    }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-w-full`] = true;
+        return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-  <ax-form-field>
-     <ax-label>{{label()}}</ax-label>
-     @for (node of children(); track $index) {
-      <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
-     }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "axp-form-field-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    <ax-form-field>
+      <ax-label>{{ label() }}</ax-label>
+      @for (node of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <!-- <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.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$7.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-form-field-widget',
                     template: `
-  <ax-form-field>
-     <ax-label>{{label()}}</ax-label>
-     @for (node of children(); track $index) {
-      <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer>
-     }
+    <ax-form-field>
+      <ax-label>{{ label() }}</ax-label>
+      @for (node of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <!-- <axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer> -->
+      }
     </ax-form-field>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var formFieldWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7957,16 +8002,36 @@ const AXPFormFieldWidget = {
 };
 
 class AXPGridWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <!-- <axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer> -->
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: `
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <!-- <axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer> -->
+      }
+    </div>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
         }] });
 
@@ -7994,11 +8059,11 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
         this.designerService = inject(AXPDesignerService);
-        this.cols = computed(() => this.options()["cols"] ?? 1);
-        this.rows = computed(() => this.options()["rows"] ?? 1);
-        this.gap = computed(() => this.options()["gap"] ?? 0);
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
         this.cells = computed(() => Array.from({ length: this.cols() * this.rows() }).map((c, index) => index));
-        this.settled = computed(() => (this.cols() * this.rows() > 1) && this.children().length);
+        this.settled = computed(() => this.cols() * this.rows() > 1 && this.children().length);
     }
     // private e = effect(async () => {
     //   if (this.settled()) {
@@ -8024,10 +8089,10 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     handleDrawerSelect(e) {
         this.designerService.update({
             values: {
-                options: e
+                options: e,
             },
             mode: 'update',
-            widget: this.node
+            widget: this.node,
         });
         const list = Array.from({ length: this.cells().length }).map(() => ({
             type: AXPWidgetsCatalog.gridItem,
@@ -8046,18 +8111,18 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridWidgetDesignerComponent, isStandalone: true, selector: "axp-grid-layout-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
-                provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
-            }
+                provide: AXPContainerWidgetComponent,
+                useExisting: AXPGridWidgetDesignerComponent,
+            },
         ], usesInheritance: true, ngImport: i0, template: `
-    @if(settled())
-    {
-      <div class="ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
-        @for (node of children(); track $index) {
-          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-        }
-      </div>
+    @if(settled()) {
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      }
+    </div>
     }@else {
-      <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
+    <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerGridDrawerComponent, selector: "axp-designer-grid-drawer", inputs: ["rows", "columns"], outputs: ["rowsChange", "columnsChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -8066,25 +8131,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     selector: 'axp-grid-layout-widget',
                     template: `
-    @if(settled())
-    {
-      <div class="ax-grid ax-grid-cols-{{cols()}} ax-grid-rows-{{rows()}} ax-gap-{{gap()}}">
-        @for (node of children(); track $index) {
-          <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-        }
-      </div>
+    @if(settled()) {
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      }
+    </div>
     }@else {
-      <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
+    <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerGridDrawerComponent,
+                    ],
                     providers: [
                         {
-                            provide: AXPContainerWidgetComponent, useExisting: AXPGridWidgetDesignerComponent
-                        }
-                    ]
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridWidgetDesignerComponent,
+                        },
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -8122,19 +8193,92 @@ const AXPGridWidget = {
     },
 };
 
-class AXPGridItemWidgetViewComponent extends AXPWidgetComponent {
+class AXPGridItemWidgetViewComponent extends AXPContainerWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colSpan = computed(() => this.options()['colSpan']);
+        this.colStart = computed(() => this.options()['colStart']);
+        this.colEnd = computed(() => this.options()['colEnd']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-flex`] = true;
+        cls[`ax-gap-${this.gap()}`] = true;
+        //
+        if (this.flexAlignItems()) {
+            cls[this.flexAlignItems()] = true;
+        }
+        if (this.flexJustifyContent()) {
+            cls[this.flexJustifyContent()] = true;
+        }
+        if (this.flexWrap()) {
+            cls[this.flexWrap()] = true;
+        }
+        if (this.flexDirection()) {
+            cls[this.flexDirection()] = true;
+        }
+        //
+        cls[`ax-col-span-12`] = true;
+        if (this.colSpan() != null) {
+            cls[`lg:ax-col-span-${this.colSpan()}`] = true;
+        }
+        else {
+            cls[`lg:ax-col-span-1`] = true;
+        }
+        //
+        if (this.colStart() != null) {
+            cls[`lg:ax-col-start-${this.colStart()}`] = true;
+        }
+        //
+        if (this.colEnd() != null) {
+            cls[`lg:ax-col-end-${this.colEnd()}`] = true;
+        }
+        return cls;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXPContainerWidgetComponent,
+                useExisting: AXPGridItemWidgetViewComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @for (child of children(); track $index) {
+    <!-- <axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"></axp-widget-renderer> -->
+    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: `
+    @for (child of children(); track $index) {
+    <!-- <axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"></axp-widget-renderer> -->
+    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+
+    }
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    providers: [
+                        {
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridItemWidgetViewComponent,
+                        },
+                    ],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var gridItemWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8160,14 +8304,14 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
         this.designerService = inject(AXPDesignerService);
-        this.colSpan = computed(() => this.options()["colSpan"]);
-        this.colStart = computed(() => this.options()["colStart"]);
-        this.colEnd = computed(() => this.options()["colEnd"]);
-        this.flexAlignItems = computed(() => this.options()["flexAlignItems"]?.id);
-        this.flexJustifyContent = computed(() => this.options()["flexJustifyContent"]?.id);
-        this.flexWrap = computed(() => this.options()["flexWrap"]?.id);
-        this.flexDirection = computed(() => this.options()["flexDirection"]?.id);
-        this.gap = computed(() => this.options()["gap"] ?? 0);
+        this.colSpan = computed(() => this.options()['colSpan']);
+        this.colStart = computed(() => this.options()['colStart']);
+        this.colEnd = computed(() => this.options()['colEnd']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
     }
     async handleSlotClick() {
         await this.designerService.showPicker(this.node);
@@ -8211,14 +8355,14 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetDesignerComponent, isStandalone: true, selector: "axp-grid-layout-item-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
-                provide: AXPContainerWidgetComponent, useExisting: AXPGridItemWidgetDesignerComponent
-            }
+                provide: AXPContainerWidgetComponent,
+                useExisting: AXPGridItemWidgetDesignerComponent,
+            },
         ], usesInheritance: true, ngImport: i0, template: `
-    @for (node of children(); track $index) {
-        <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-    }
-    @empty {
-    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center" >
+    @for (child of children(); track $index) {
+    <ng-container axp-widget-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    } @empty {
+    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center">
       <div class="ax-m-auto ax-p-4 ax-text-primary-500 hover:ax-text-primary-800" (click)="handleSlotClick()">
         <i class="fa-solid fa-plus "></i>
       </div>
@@ -8231,11 +8375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     selector: 'axp-grid-layout-item-widget',
                     template: `
-    @for (node of children(); track $index) {
-        <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-    }
-    @empty {
-    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center" >
+    @for (child of children(); track $index) {
+    <ng-container axp-widget-designer-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    } @empty {
+    <div class="axp-empty-space ax-flex-1  ax-flex ax-justify-center ax-items-center">
       <div class="ax-m-auto ax-p-4 ax-text-primary-500 hover:ax-text-primary-800" (click)="handleSlotClick()">
         <i class="fa-solid fa-plus "></i>
       </div>
@@ -8244,12 +8387,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerGridDrawerComponent],
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerGridDrawerComponent,
+                    ],
                     providers: [
                         {
-                            provide: AXPContainerWidgetComponent, useExisting: AXPGridItemWidgetDesignerComponent
-                        }
-                    ]
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridItemWidgetDesignerComponent,
+                        },
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -8290,16 +8440,36 @@ const AXPGridItemWidget = {
 };
 
 class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <!-- <axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer> -->
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: `
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      <!-- <axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </axp-widget-renderer> -->
+      }
+    </div>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
         }] });