@acorex/platform 18.0.16 → 18.1.1

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,5 +1,9 @@
+import * as i2$1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$7 from '@acorex/platform/layout/builder';
@@ -7,7 +11,7 @@ import { AXPWidgetComponent, AXPWidgetsCatalog, cloneProperty, AXP_WIDGETS_ACTIO
 import * as i1$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, ViewEncapsulation, ViewChild, effect, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, effect, HostBinding, signal, ViewEncapsulation, ViewChild, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
 import { AX_STYLE_COLOR_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
@@ -15,11 +19,6 @@ import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i2$1 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';
@@ -31,6 +30,7 @@ import * as i1$2 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 { AXPClipBoardService } from '@acorex/platform/common';
 import { AXDateTimeFormatter } from '@acorex/core/date-time';
 import * as i3$2 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
@@ -59,12 +59,12 @@ import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
-import * as i2$5 from '@acorex/components/color-box';
-import { AXColorBoxModule } from '@acorex/components/color-box';
-import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$8 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXColorUtil } from '@acorex/core/utils';
+import * as i2$5 from '@acorex/components/color-box';
+import { AXColorBoxModule } from '@acorex/components/color-box';
+import { DomSanitizer } from '@angular/platform-browser';
 
 class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
@@ -73,7 +73,8 @@ class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
         this.color = computed(() => this.options()['color']?.id ?? 'primary');
         this.look = computed(() => this.options()['look']?.id ?? 'solid');
         this.text = computed(() => this.options()['text']);
-        this.loading = computed(() => this.options()['loading']);
+        this.loading = computed(() => this.options()['loading'] ?? false);
+        this.icon = computed(() => this.options()['icon']);
         this.onClick = new EventEmitter();
     }
     handleClick(e) {
@@ -85,28 +86,40 @@ 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: `
-    <ax-button (onClick)="handleClick($event)" [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
-      @if(loading()){
+    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
+        ><ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon
+      ></ax-prefix>
+      } @else if(icon() && !text()) {
+      <ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon>
+      } @if(loading()){
       <ax-loading> </ax-loading>
       }
     </ax-button>
-  `, 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: 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: "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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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 (onClick)="handleClick($event)" [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
-      @if(loading()){
+    <ax-button [disabled]="disabled()" [color]="color()" [look]="look()" [text]="text()">
+      @if(icon() && text()){
+      <ax-prefix
+        ><ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon
+      ></ax-prefix>
+      } @else if(icon() && !text()) {
+      <ax-icon> <i class="fa-solid" [class]="icon()"></i> </ax-icon>
+      } @if(loading()){
       <ax-loading> </ax-loading>
       }
     </ax-button>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXLoadingModule],
+                    imports: [CommonModule, AXButtonModule, AXLoadingModule, AXDecoratorModule, AXBadgeModule],
                     inputs: [],
                 }]
         }] });
@@ -409,6 +422,34 @@ const AXP_HAS_ICON_PROPERTY = {
     },
     visible: true,
 };
+const AXP_ICON_PROPERTY = {
+    name: 'icon',
+    title: 'Icon Name',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        interface: {
+            name: 'icon',
+            path: 'options.icon',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: true,
+};
+const AXP_IS_LOADING_PROPERTY = {
+    name: 'loading',
+    title: 'Is Loading',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    schema: {
+        dataType: 'boolean',
+        interface: {
+            name: 'loading',
+            path: 'options.loading',
+            type: AXPWidgetsCatalog.toggle,
+        },
+    },
+    visible: true,
+};
 const AXP_HAS_CLEAR_BUTTON_PROPERTY = {
     name: 'hasClearButton',
     title: 'Clear Button',
@@ -661,7 +702,6 @@ function plainTextDefaultProperty() {
         group: AXP_DATA_PROPERTY_GROUP,
         schema: {
             dataType: 'string',
-            defaultValue: 'Sample Text',
             interface: {
                 name: 'defaultValue',
                 path: 'defaultValue',
@@ -671,6 +711,38 @@ function plainTextDefaultProperty() {
         visible: true,
     };
 }
+function largeTextDefaultProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'string',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.largeText,
+            },
+        },
+        visible: true,
+    };
+}
+function numberDefaultProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'number',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.number,
+            },
+        },
+        visible: true,
+    };
+}
 
 const AXP_LAYOUT_GRID_PROPERTY_GROUP = {
     name: "grid",
@@ -947,7 +1019,7 @@ const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
     group: AXP_STYLING_PROPERTY_GROUP,
     schema: {
         dataType: 'string',
-        defaultValue: '200px',
+        defaultValue: '300px',
         interface: {
             name: 'width',
             path: 'options.width',
@@ -956,6 +1028,21 @@ const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
     },
     visible: false,
 };
+const AXP_TABLE_COLUMN_HEIGHT_PROPERTY = {
+    name: 'height',
+    title: 'Height',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: '300px',
+        interface: {
+            name: 'height',
+            path: 'options.height',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: false,
+};
 
 const AXPButtonWidget = {
     name: 'button-action',
@@ -969,10 +1056,12 @@ const AXPButtonWidget = {
         cloneProperty(AXP_TEXT_PROPERTY, { schema: { defaultValue: 'Click Here' } }),
         AXP_STYLE_COLOR_PROPERTY,
         AXP_STYLE_LOOK_PROPERTY,
+        AXP_ICON_PROPERTY,
+        AXP_IS_LOADING_PROPERTY
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-C0S_HJkl.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),
@@ -1056,7 +1145,7 @@ const AXPCheckBoxWidget = {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-BzNhzB9y.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-j1jG8pCr.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
         },
         filter: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -1064,121 +1153,41 @@ const AXPCheckBoxWidget = {
     },
 };
 
-class AXPContactWidgetViewComponent extends AXPWidgetComponent {
+class AXPContactWidgetColumnComponent extends AXPColumnWidgetComponent {
     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.internalValue = computed(() => this.valueToArray());
-        this.clipboard = inject(AXPClipBoardService);
-        this.chooseIcon = () => {
-            switch (this.type()) {
-                case 'email':
-                    return 'fa-envelope';
-                case 'link':
-                    return 'fa-link';
-                case 'phone':
-                    return 'fa-phone';
-                default:
-                    return 'fa-info';
-            }
-        };
-        this.itemToArray = (item) => {
+        this.itemToValue = (item) => {
             if (typeof item === 'object')
-                return {
-                    value: item?.value ?? '',
-                    label: this.hasLabel() ? item?.label || this.labelList()[0] : undefined,
-                    icon: this.hasIcon() ? item?.icon || this.chooseIcon() : undefined,
-                };
+                return item?.value ?? '';
             else
-                return {
-                    value: item,
-                    label: this.hasLabel() ? this.labelList()[0] : undefined,
-                    icon: this.hasIcon() ? this.chooseIcon() : undefined,
-                };
+                return item;
         };
     }
-    valueToArray() {
-        const value = this.getValue();
-        if (Array.isArray(value)) {
-            return value.map((item) => this.itemToArray(item));
-        }
+    getText(seperator) {
+        const sep = seperator === 'comma' ? ',' : '\\n';
+        if (typeof this.rawValue === 'string')
+            return this.rawValue;
         else {
-            return [this.itemToArray(value)];
+            return this.rawValue?.map((item) => this.itemToValue(item)).join(sep);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPContactWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-1 ax-justify-center ax-items-center ax-group">
-    @for(item of internalValue();track $index){ @if(item){ @if(hasIcon()){
-    <ax-icon class="ax-col-start-1 ax-col-end-2 fa-solid ax-text-neutral-400" [class]="chooseIcon()"> </ax-icon>
-    } @let href = type() === 'link' ? item.value : type()==='phone'? 'tel:'+item.value : 'mailto:'+ item.value ;
-    <div class="ax-col-start-2 ax-col-end-9">
-      <a
-        [href]="href"
-        [target]="'_blank'"
-        class="ax-text-blue-700 group-hover:!ax-text-primary-500 group-hover:ax-underline group-hover:ax-decoration-blue-700"
-        >{{ item.value }}</a
-      >
-      <span
-        class="ax-text-neutral-400  ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
-        (click)="clipboard.copy('Email', item.value)"
-      >
-        <i class="fa-solid fa-copy "></i>
-      </span>
-    </div>
-    @if(hasLabel()){
-    <ax-badge
-      class="ax-col-start-10 ax-col-end-12 ax-flex ax-justify-center ax-items-center"
-      color="primary"
-      [look]="'twotone'"
-      [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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPContactWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</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: AXPContactWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<div class="ax-grid ax-grid-cols-12 ax-gap-1 ax-justify-center ax-items-center ax-group">
-    @for(item of internalValue();track $index){ @if(item){ @if(hasIcon()){
-    <ax-icon class="ax-col-start-1 ax-col-end-2 fa-solid ax-text-neutral-400" [class]="chooseIcon()"> </ax-icon>
-    } @let href = type() === 'link' ? item.value : type()==='phone'? 'tel:'+item.value : 'mailto:'+ item.value ;
-    <div class="ax-col-start-2 ax-col-end-9">
-      <a
-        [href]="href"
-        [target]="'_blank'"
-        class="ax-text-blue-700 group-hover:!ax-text-primary-500 group-hover:ax-underline group-hover:ax-decoration-blue-700"
-        >{{ item.value }}</a
-      >
-      <span
-        class="ax-text-neutral-400  ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
-        (click)="clipboard.copy('Email', item.value)"
-      >
-        <i class="fa-solid fa-copy "></i>
-      </span>
-    </div>
-    @if(hasLabel()){
-    <ax-badge
-      class="ax-col-start-10 ax-col-end-12 ax-flex ax-justify-center ax-items-center"
-      color="primary"
-      [look]="'twotone'"
-      [text]="item.label ?? ''"
-    ></ax-badge>
-    } }}
-  </div> `,
+                    template: `<span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXBadgeModule, AXDecoratorModule],
-                    inputs: [],
+                    imports: [CommonModule],
+                    inputs: ['rawValue'],
                 }]
         }] });
 
-var contactWidgetView_component = /*#__PURE__*/Object.freeze({
+var contactWidgetColumn_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPContactWidgetViewComponent: AXPContactWidgetViewComponent
+  AXPContactWidgetColumnComponent: AXPContactWidgetColumnComponent
 });
 
 class popupComponent extends AXBasePageComponent {
@@ -1243,10 +1252,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class AXPContactWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         //properties
-        this.type = computed(() => this.options()['type']);
-        this.labelList = computed(() => this.options()['labelList'] || ['primary', 'secondary', 'new']);
+        this.type = computed(() => this.options()['type']?.id ?? 'email');
+        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']);
@@ -1293,6 +1302,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
                     return 'fa-info';
             }
         };
+        effect(() => console.log(this.type()));
     }
     addItem() {
         const newValues = [...this.internalValue(), this.emptyValue()];
@@ -1324,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()) {
@@ -1338,7 +1348,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
                     return 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7';
                 }
                 else {
-                    return 'ax-col-start-1 ax-col-end-12 lg:ax-col-start-7 lg:ax-col-end-12';
+                    return 'ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-12 ';
                 }
             }
             else {
@@ -1389,7 +1399,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPContactWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<div class="lg:ax-grid lg:ax-grid-cols-12 lg:ax-gap-4">
     @for(item of internalValue();track $index) {
     <ax-text-box
@@ -1402,7 +1412,11 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [disabled]="disabled()"
     >
       @for (validation of validationRules; track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
       }
       <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
     </ax-text-box>
@@ -1437,7 +1451,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="sm:ax-col-start-8 lg:ax-col-start-7 xl:ax-col-start-11   sm:ax-col-end-13"
+      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>
@@ -1461,7 +1475,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [disabled]="disabled()"
     >
       @for (validation of validationRules; track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
       }
       <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
     </ax-text-box>
@@ -1496,7 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="sm:ax-col-start-8 lg:ax-col-start-7 xl:ax-col-start-11   sm:ax-col-end-13"
+      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>
@@ -1520,7 +1538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     ],
                     inputs: [],
                 }]
-        }], propDecorators: { __class: [{
+        }], ctorParameters: () => [], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1530,81 +1548,141 @@ var contactWidgetEdit_component = /*#__PURE__*/Object.freeze({
   AXPContactWidgetEditComponent: AXPContactWidgetEditComponent
 });
 
-class AXPContactWidgetFilterComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPContactWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPContactWidgetPrintComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPContactWidgetPrintComponent, 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: AXPContactWidgetFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule],
                     inputs: []
                 }]
         }] });
 
-var contactWidgetFilter_component = /*#__PURE__*/Object.freeze({
+var contactWidgetPrint_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPContactWidgetFilterComponent: AXPContactWidgetFilterComponent
+  AXPContactWidgetPrintComponent: AXPContactWidgetPrintComponent
 });
 
-class AXPContactWidgetColumnComponent extends AXPColumnWidgetComponent {
+class AXPContactWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.itemToValue = (item) => {
+        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 = () => {
+            switch (this.type()) {
+                case 'email':
+                    return 'fa-envelope';
+                case 'link':
+                    return 'fa-link';
+                case 'phone':
+                    return 'fa-phone';
+                default:
+                    return 'fa-info';
+            }
+        };
+        this.correctItems = (item) => {
             if (typeof item === 'object')
-                return item?.value ?? '';
+                return {
+                    value: item?.value ?? '',
+                    label: this.hasLabel() ? item?.label || this.labelList()[0] : undefined,
+                    icon: this.hasIcon() ? item?.icon || this.chooseIcon() : undefined,
+                };
             else
-                return item;
+                return {
+                    value: item,
+                    label: this.hasLabel() ? this.labelList()[0] : undefined,
+                    icon: this.hasIcon() ? this.chooseIcon() : undefined,
+                };
         };
     }
-    getText(seperator) {
-        const sep = seperator === 'comma' ? ',' : '\\n';
-        if (typeof this.rawValue === 'string')
-            return this.rawValue;
+    itemToArray() {
+        const value = this.getValue();
+        if (Array.isArray(value)) {
+            return value.map((item) => this.correctItems(item));
+        }
         else {
-            return this.rawValue?.map((item) => this.itemToValue(item)).join(sep);
+            return [this.correctItems(value)];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPContactWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</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: AXPContactWidgetColumnComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `<span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>`,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: ['rawValue'],
-                }]
-        }] });
-
-var contactWidgetColumn_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPContactWidgetColumnComponent: AXPContactWidgetColumnComponent
-});
-
-class AXPContactWidgetPrintComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPContactWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPContactWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    @for(item of internalValue();track $index){ @let href = type() === 'link' ? item.value :
+    type()==='phone'?'tel:'+item.value : 'mailto:'+ item.value ;
+    <div class="ax-flex ax-gap-4 ax-items-center ax-justify-between ax-py-1">
+      <div class="ax-flex  ax-gap-4 ax-group ax-items-center ax-justify-center ax-truncate">
+        @if(hasIcon()){
+        <ax-icon class="fa-solid ax-text-neutral-400" [class]="chooseIcon()"> </ax-icon>
+        }
+        <a
+          [href]="href"
+          [target]="'_blank'"
+          class="ax-truncate ax-text-blue-700 group-hover:!ax-text-primary-500 group-hover:ax-underline group-hover:ax-decoration-blue-700"
+          >{{ item.value }}</a
+        >
+        <span
+          class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+          (click)="clipboard.copy(type(), item.value)"
+        >
+          <i class="fa-solid fa-copy"></i>
+        </span>
+      </div>
+      @if(hasLabel()){
+      <div><ax-badge color="primary" [look]="'twotone'" [text]="item.label ?? ''"></ax-badge></div>
+      }
+    </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetPrintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: `
+    @for(item of internalValue();track $index){ @let href = type() === 'link' ? item.value :
+    type()==='phone'?'tel:'+item.value : 'mailto:'+ item.value ;
+    <div class="ax-flex ax-gap-4 ax-items-center ax-justify-between ax-py-1">
+      <div class="ax-flex  ax-gap-4 ax-group ax-items-center ax-justify-center ax-truncate">
+        @if(hasIcon()){
+        <ax-icon class="fa-solid ax-text-neutral-400" [class]="chooseIcon()"> </ax-icon>
+        }
+        <a
+          [href]="href"
+          [target]="'_blank'"
+          class="ax-truncate ax-text-blue-700 group-hover:!ax-text-primary-500 group-hover:ax-underline group-hover:ax-decoration-blue-700"
+          >{{ item.value }}</a
+        >
+        <span
+          class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+          (click)="clipboard.copy(type(), item.value)"
+        >
+          <i class="fa-solid fa-copy"></i>
+        </span>
+      </div>
+      @if(hasLabel()){
+      <div><ax-badge color="primary" [look]="'twotone'" [text]="item.label ?? ''"></ax-badge></div>
+      }
+    </div>
+    }
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: []
+                    imports: [CommonModule, FormsModule, AXBadgeModule, AXDecoratorModule],
+                    inputs: [],
                 }]
         }] });
 
-var contactWidgetPrint_component = /*#__PURE__*/Object.freeze({
+var contactWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPContactWidgetPrintComponent: AXPContactWidgetPrintComponent
+  AXPContactWidgetViewComponent: AXPContactWidgetViewComponent
 });
 
 const AXPContactWidget = {
@@ -1617,12 +1695,13 @@ const AXPContactWidget = {
     properties: [
         {
             name: 'type',
-            title: 'Type',
+            title: 'Contact Type',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 dataType: 'string',
                 nullable: false,
                 interface: {
+                    defaultValue: { id: 'link', title: 'Link' },
                     name: 'type',
                     path: 'options.type',
                     type: AXPWidgetsCatalog.select,
@@ -1652,7 +1731,6 @@ const AXPContactWidget = {
                         dataSource: [
                             { id: 'primary', title: 'Primary' },
                             { id: 'secondary', title: 'Secondary' },
-                            { id: 'new', title: 'New' },
                         ],
                     },
                 },
@@ -1673,7 +1751,7 @@ const AXPContactWidget = {
             component: () => Promise.resolve().then(function () { return contactWidgetEdit_component; }).then((c) => c.AXPContactWidgetEditComponent),
         },
         filter: {
-            component: () => Promise.resolve().then(function () { return contactWidgetFilter_component; }).then((c) => c.AXPContactWidgetFilterComponent),
+            component: () => import('./acorex-platform-widgets-contact-widget-filter.component-GTwK51nJ.mjs').then((c) => c.AXPContactWidgetFilterComponent),
         },
         column: {
             component: () => Promise.resolve().then(function () { return contactWidgetColumn_component; }).then((c) => c.AXPContactWidgetColumnComponent),
@@ -1691,9 +1769,11 @@ class AXPDateTimeBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.formatter = inject(AXDateTimeFormatter);
-        this.multiple = computed(() => this.options()["multiple"]);
-        this.format = computed(() => this.options()["format"]['id']);
-        this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue().map((v) => this.handleFormat(v)) : [this.handleFormat(this.getValue())]);
+        this.multiple = computed(() => this.options()['multiple']);
+        this.format = computed(() => this.options()['format']['id']);
+        this.internalValue = computed(() => Array.isArray(this.getValue())
+            ? this.getValue().map((v) => this.handleFormat(v))
+            : [this.handleFormat(this.getValue())]);
     }
     handleFormat(value) {
         return value ? this.formatter.format(new Date(value), { format: this.format() }) : '---';
@@ -1701,14 +1781,10 @@ class AXPDateTimeBoxWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div>
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-          <p>{{ item }}</p>
-        } 
-      }
-      @else 
-      {
-        <p>{{ internalValue()[0] }}</p>
+      @if(multiple()){ @for (item of internalValue(); track $index) {
+      <p>{{ item }}</p>
+      } } @else {
+      <p>{{ internalValue()[0] }}</p>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1718,14 +1794,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     template: `
     <div>
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-          <p>{{ item }}</p>
-        } 
-      }
-      @else 
-      {
-        <p>{{ internalValue()[0] }}</p>
+      @if(multiple()){ @for (item of internalValue(); track $index) {
+      <p>{{ item }}</p>
+      } } @else {
+      <p>{{ internalValue()[0] }}</p>
       }
     </div>
   `,
@@ -1745,11 +1817,12 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.validationService = inject(AXValidationService);
-        this.multiple = computed(() => this.options()["multiple"]);
-        this.clearButton = computed(() => this.options()["clearButton"]);
-        this.format = computed(() => this.options()["format"]?.['id']);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.multiple = computed(() => this.options()['multiple']);
+        this.clearButton = computed(() => this.options()['clearButton']);
+        this.format = computed(() => this.options()['format']?.['id']);
+        this.disabled = computed(() => this.options()['disabled']);
+        this.placeholder = computed(() => this.options()['placeholder']);
+        this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
         this._validationRules = [];
         this.calendarFormat = computed(() => {
             if (this.format() === 'date')
@@ -1799,26 +1872,32 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
         (onValueChanged)="handleValueChange($event, $index)"
         [disabled]="disabled()"
         [format]="calendarFormat()"
+        [placeholder]="placeholder()"
       >
-        @for (validation of validationRules; track $index) 
-        {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-        }
-        @if(clearButton()){
-          <ax-clear-button></ax-clear-button>
-        } 
-        @if(multiple())
-        {
-          <ax-suffix>
-            <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-              <ax-icon class="far fa-trash"> </ax-icon>
-            </ax-button>
-          </ax-suffix>
+        @for (validation of validationRules; track $index) {
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
+        } @if(clearButton()){
+        <ax-clear-button></ax-clear-button>
+        } @if(multiple()) {
+        <ax-suffix>
+          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+            <ax-icon class="far fa-trash"> </ax-icon>
+          </ax-button>
+        </ax-suffix>
         }
       </ax-datetime-box>
-      } 
-      @if(multiple()){
-        <ax-button class="ax-col-span-2" [text]="!internalValue().length ? 'Add New' : 'Add Another'" look="twotone" (onClick)="addItem()" [disabled]="disabled()"></ax-button>
+      } @if(multiple()){
+      <ax-button
+        class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
+        [text]="!internalValue().length ? 'Add New' : 'Add Another'"
+        look="twotone"
+        (onClick)="addItem()"
+        [disabled]="disabled()"
+      ></ax-button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { 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.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1835,32 +1914,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         (onValueChanged)="handleValueChange($event, $index)"
         [disabled]="disabled()"
         [format]="calendarFormat()"
+        [placeholder]="placeholder()"
       >
-        @for (validation of validationRules; track $index) 
-        {
-          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
-        }
-        @if(clearButton()){
-          <ax-clear-button></ax-clear-button>
-        } 
-        @if(multiple())
-        {
-          <ax-suffix>
-            <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-              <ax-icon class="far fa-trash"> </ax-icon>
-            </ax-button>
-          </ax-suffix>
+        @for (validation of validationRules; track $index) {
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
+        } @if(clearButton()){
+        <ax-clear-button></ax-clear-button>
+        } @if(multiple()) {
+        <ax-suffix>
+          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+            <ax-icon class="far fa-trash"> </ax-icon>
+          </ax-button>
+        </ax-suffix>
         }
       </ax-datetime-box>
-      } 
-      @if(multiple()){
-        <ax-button class="ax-col-span-2" [text]="!internalValue().length ? 'Add New' : 'Add Another'" look="twotone" (onClick)="addItem()" [disabled]="disabled()"></ax-button>
+      } @if(multiple()){
+      <ax-button
+        class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
+        [text]="!internalValue().length ? 'Add New' : 'Add Another'"
+        look="twotone"
+        (onClick)="addItem()"
+        [disabled]="disabled()"
+      ></ax-button>
       }
     </div>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXFormModule, AXValidationModule, AXDateTimeBoxModule, AXButtonModule, AXDecoratorModule, AXValidationModule],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXValidationModule,
+                        AXDateTimeBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXValidationModule,
+                    ],
                     inputs: [],
                 }]
         }], propDecorators: { __class: [{
@@ -2671,7 +2765,8 @@ const AXPLargeTextWidget = {
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
-        cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
+        largeTextDefaultProperty(),
+        //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
     ],
     components: {
         view: {
@@ -3289,8 +3384,8 @@ class AXPNumberBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
-        this.multiple = computed(() => this.options()["multiple"]);
-        this.format = computed(() => this.options()["format"]);
+        this.multiple = computed(() => this.options()['multiple']);
+        this.format = computed(() => this.options()['format']);
         this.formatService = inject(AXFormatService);
     }
     getValue() {
@@ -3302,13 +3397,10 @@ class AXPNumberBoxWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPNumberBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPNumberBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div>
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-          <p>{{ item }}</p>
-        } 
-      }@else 
-      {
-        <p>{{ internalValue()[0] }}</p>
+      @if(multiple()){ @for (item of internalValue(); track $index) {
+      <p>{{ item }}</p>
+      } }@else {
+      <p>{{ internalValue()[0] }}</p>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3318,13 +3410,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     template: `
     <div>
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-          <p>{{ item }}</p>
-        } 
-      }@else 
-      {
-        <p>{{ internalValue()[0] }}</p>
+      @if(multiple()){ @for (item of internalValue(); track $index) {
+      <p>{{ item }}</p>
+      } }@else {
+      <p>{{ internalValue()[0] }}</p>
       }
     </div>
   `,
@@ -3343,16 +3432,16 @@ var numberBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.multiple = computed(() => this.options()["multiple"]);
-        this.clearButton = computed(() => this.options()["hasClearButton"] ?? true);
-        this.decimals = computed(() => this.options()["decimals"] ?? 0);
-        this.minValue = computed(() => this.options()["minValue"]);
-        this.maxValue = computed(() => this.options()["maxValue"]);
-        this.placeholder = computed(() => this.options()["placeholder"]);
+        this.disabled = computed(() => this.options()['disabled']);
+        this.multiple = computed(() => this.options()['multiple']);
+        this.clearButton = computed(() => this.options()['hasClearButton'] ?? true);
+        this.decimals = computed(() => this.options()['decimals'] ?? 0);
+        this.minValue = computed(() => this.options()['minValue']);
+        this.maxValue = computed(() => this.options()['maxValue']);
+        this.placeholder = computed(() => this.options()['placeholder']);
         this.validationService = inject(AXValidationService);
         this.validationRules = [];
-        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
         this.validateFn = async (value, options) => {
             const vn = this.validationService.ruleFor(value);
             this.validationRules.forEach((v) => {
@@ -3405,32 +3494,28 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         [disabled]="disabled()"
       >
         <ax-validation-rule rule="callback" [options]="{ validate: validateFn }"></ax-validation-rule>
-        @if(clearButton())
-        {
-          <ax-clear-button></ax-clear-button>
-        } 
-        @if(multiple()){
-          <ax-suffix>
-            <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-              <ax-icon class="far fa-trash"> </ax-icon>
-            </ax-button>
-          </ax-suffix>
+        @if(clearButton()) {
+        <ax-clear-button></ax-clear-button>
+        } @if(multiple()){
+        <ax-suffix>
+          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+            <ax-icon class="far fa-trash"> </ax-icon>
+          </ax-button>
+        </ax-suffix>
         }
       </ax-number-box>
-      } 
-      @if(multiple())
-      {
-        <ax-button
-          [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-          [disabled]="disabled()"
-          look="twotone"
-          (onClick)="addItem()"
-          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
-        >
-          <ax-prefix>
-            <ax-icon class="fa-solid fa-add"></ax-icon>
-          </ax-prefix>
-        </ax-button>
+      } @if(multiple()) {
+      <ax-button
+        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+        [disabled]="disabled()"
+        look="twotone"
+        (onClick)="addItem()"
+        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "hasWheel", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3453,32 +3538,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [disabled]="disabled()"
       >
         <ax-validation-rule rule="callback" [options]="{ validate: validateFn }"></ax-validation-rule>
-        @if(clearButton())
-        {
-          <ax-clear-button></ax-clear-button>
-        } 
-        @if(multiple()){
-          <ax-suffix>
-            <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-              <ax-icon class="far fa-trash"> </ax-icon>
-            </ax-button>
-          </ax-suffix>
+        @if(clearButton()) {
+        <ax-clear-button></ax-clear-button>
+        } @if(multiple()){
+        <ax-suffix>
+          <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+            <ax-icon class="far fa-trash"> </ax-icon>
+          </ax-button>
+        </ax-suffix>
         }
       </ax-number-box>
-      } 
-      @if(multiple())
-      {
-        <ax-button
-          [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
-          [disabled]="disabled()"
-          look="twotone"
-          (onClick)="addItem()"
-          class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
-        >
-          <ax-prefix>
-            <ax-icon class="fa-solid fa-add"></ax-icon>
-          </ax-prefix>
-        </ax-button>
+      } @if(multiple()) {
+      <ax-button
+        [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+        [disabled]="disabled()"
+        look="twotone"
+        (onClick)="addItem()"
+        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
       }
     </div>
   `,
@@ -3587,6 +3668,7 @@ const AXPNumberBoxWidget = {
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
+        numberDefaultProperty(),
         cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
     ],
     components: {
@@ -3628,9 +3710,12 @@ class AXPPasswordBoxWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPPasswordBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
       <div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
-        <span>{{ showPassword() ? internalValue() : '*******' }}</span>
+        <span>{{ show() ? internalValue() : '*******' }}</span>
         @if(hasEyeIcon()){
-        <span class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500" (click)="toggleEye()">
+        <span
+          class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+          (click)="toggleEye()"
+        >
           @if(!showPassword()){
           <i class="fa-solid fa-eye"></i>
           }@else {
@@ -3655,9 +3740,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     template: `
     <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
       <div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
-        <span>{{ showPassword() ? internalValue() : '*******' }}</span>
+        <span>{{ show() ? internalValue() : '*******' }}</span>
         @if(hasEyeIcon()){
-        <span class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500" (click)="toggleEye()">
+        <span
+          class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+          (click)="toggleEye()"
+        >
           @if(!showPassword()){
           <i class="fa-solid fa-eye"></i>
           }@else {
@@ -3755,18 +3843,55 @@ var passwordBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
   AXPPasswordBoxWidgetFilterComponent: AXPPasswordBoxWidgetFilterComponent
 });
 
-class AXPPasswordBoxWidgetColumnComponent extends AXPWidgetComponent {
+class AXPPasswordBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.hasEyeIcon = this.options['hasEyeIcon'];
+        this.showPassword = this.options['showPassword'];
+        this.show = signal(!!this.rawValue);
+    }
+    toggleEye() {
+        this.show.update((prev) => !prev);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPPasswordBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPPasswordBoxWidgetColumnComponent, 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: AXPPasswordBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+    <span>{{ show() ? rawValue : '*******' }}</span>
+    @if(hasEyeIcon){
+    <span
+      class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+      (click)="toggleEye()"
+    >
+      @if(!showPassword){
+      <i class="fa-solid fa-eye"></i>
+      }@else {
+      <i class="fa-solid fa-eye-slash"></i>
+      }
+    </span>
+    }
+  </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: AXPPasswordBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: `<div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+    <span>{{ show() ? rawValue : '*******' }}</span>
+    @if(hasEyeIcon){
+    <span
+      class="ax-text-neutral-400 ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+      (click)="toggleEye()"
+    >
+      @if(!showPassword){
+      <i class="fa-solid fa-eye"></i>
+      }@else {
+      <i class="fa-solid fa-eye-slash"></i>
+      }
+    </span>
+    }
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: []
+                    inputs: ['rawValue'],
                 }]
         }] });
 
@@ -4323,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],
@@ -4343,13 +4470,15 @@ var richTextWidgetView_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this._validationRules = [];
-    }
     setNgModel(event) {
         this.setValue(event);
     }
+    constructor() {
+        super();
+        this.placeholder = computed(() => this.options()['placeholder'] ?? 'default');
+        this._validationRules = [];
+        effect(() => console.log(this.placeholder()));
+    }
     get validationRules() {
         return this._validationRules;
     }
@@ -4362,8 +4491,13 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
         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", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container [look]="'solid'" [ngModel]="getValue()" (ngModelChange)="setNgModel($event)" >
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRichTextWidgetEditComponent, deps: [], 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", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container
+    [placeHolder]="placeholder()"
+    [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>
@@ -4371,18 +4505,26 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
       <ax-wysiwyg-colors></ax-wysiwyg-colors>
       <ax-wysiwyg-list></ax-wysiwyg-list>
       <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
-      <ax-wysiwyg-insert></ax-wysiwyg-insert>
     </ax-wysiwyg-toolbar>
     @for (validation of validationRules; track $index) {
-    <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+    <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$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i1$5.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$5.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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
+    [placeHolder]="placeholder()"
+    [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>
@@ -4390,10 +4532,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       <ax-wysiwyg-colors></ax-wysiwyg-colors>
       <ax-wysiwyg-list></ax-wysiwyg-list>
       <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
-      <ax-wysiwyg-insert></ax-wysiwyg-insert>
     </ax-wysiwyg-toolbar>
     @for (validation of validationRules; track $index) {
-    <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+    <ax-validation-rule
+      [rule]="validation.rule"
+      [message]="validation.options?.message"
+      [options]="validation.options"
+    ></ax-validation-rule>
     }
   </ax-wysiwyg-container>`,
                     standalone: true,
@@ -4402,7 +4547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, AXWysiwygModule, AXValidationModule, AXFormModule, FormsModule],
                     inputs: [],
                 }]
-        }], propDecorators: { __class: [{
+        }], ctorParameters: () => [], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -4508,7 +4653,7 @@ const AXPRichTextWidget = {
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
-        cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
+        //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
     ],
     components: {
         view: {
@@ -4723,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'],
                 }]
         }] });
 
@@ -5015,11 +5188,26 @@ var selectionListWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.selectedItemIds = computed(() => this.rawValue);
-        this.selectedItems = computed(() => this.items.filter((i) => {
-            return this.selectedItemIds().includes(i[this.valueField]);
-        }));
-        this.firstItem = computed(() => this.selectedItems()[0]);
+        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 || [];
+        });
+        this.selectedItems = computed(() => {
+            const selectedIds = this.selectedItemIds();
+            const filteredItems = this.items.filter((item) => {
+                const itemValue = item[this.valueField];
+                const isSelected = selectedIds.includes(itemValue);
+                return isSelected;
+            });
+            return filteredItems;
+        });
+        this.firstItem = computed(() => {
+            const first = this.selectedItems()[0];
+            return first;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectionListWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
@@ -5087,7 +5275,7 @@ const AXPSelectionListWidget = {
         AXP_DISABLED_PROPERTY,
         AXP_READONLY_PROPERTY,
         AXP_VALIDATION_PROPERTY,
-        cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
+        //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
     ],
     type: 'editor',
     components: {
@@ -5357,7 +5545,7 @@ const AXPTextBoxWidget = {
         AXP_PLACEHOLDER_PROPERTY,
         AXP_HAS_CLEAR_BUTTON_PROPERTY,
         plainTextDefaultProperty(),
-        cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
+        //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
     ],
     components: {
         view: {
@@ -5600,7 +5788,7 @@ const AXPToggleWidget = {
 
 class AXPFileBoxWidgetColumnComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFileBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPFileBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPFileBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, 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: AXPFileBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -5609,7 +5797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: []
+                    inputs: ['rawValue']
                 }]
         }] });
 
@@ -6393,7 +6581,7 @@ var galleryWidgetFilter_component = /*#__PURE__*/Object.freeze({
 
 class AXPGalleryWidgetColumnComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGalleryWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGalleryWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPGalleryWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, 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: AXPGalleryWidgetColumnComponent, decorators: [{
             type: Component,
@@ -6402,7 +6590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: []
+                    inputs: ['rawValue']
                 }]
         }] });
 
@@ -6476,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()"
@@ -6489,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()"
@@ -6514,12 +6702,16 @@ var mapBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
+        this.cdr = inject(ChangeDetectorRef);
         this.markers = computed(() => this.getValue() ?? []);
         this.hasDraw = computed(() => this.options()['hasDraw'] ?? false);
         this.hasLocate = computed(() => this.options()['hasLocate'] ?? false);
         this.maxMarker = computed(() => this.options()['maxMarker'] ?? 1);
         this.zoomLevel = computed(() => this.options()['zoomLevel'] ?? 13);
-        this.height = computed(() => this.options()['height'] ?? 300);
+        this.height = computed(() => {
+            this.cdr.markForCheck();
+            return this.options()['height'] ?? 300;
+        });
         this.initialLocation = computed(() => this.options()['initialLocation'] ?? { latitude: 51.505, longitude: -0.09 }, {
             equal: (a, b) => {
                 if (a.latitude === b.latitude && a.longitude === b.longitude)
@@ -6604,7 +6796,7 @@ const AXPMapBoxWidget = {
                         minValue: 0,
                         maxValue: 500,
                         hasClearButton: false,
-                    }
+                    },
                 },
             },
             visible: true,
@@ -6624,7 +6816,7 @@ const AXPMapBoxWidget = {
                         minValue: 0,
                         maxValue: 100,
                         hasClearButton: false,
-                    }
+                    },
                 },
             },
             visible: true,
@@ -6644,7 +6836,7 @@ const AXPMapBoxWidget = {
                         minValue: 1,
                         maxValue: 20,
                         hasClearButton: false,
-                    }
+                    },
                 },
             },
             visible: true,
@@ -6698,7 +6890,7 @@ const AXPMapBoxWidget = {
 
 class AXPSignatureWidgetColumnComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSignatureWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPSignatureWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPSignatureWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, 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: AXPSignatureWidgetColumnComponent, decorators: [{
             type: Component,
@@ -6707,7 +6899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: []
+                    inputs: ['rawValue']
                 }]
         }] });
 
@@ -7085,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,
@@ -7095,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,
@@ -7156,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,
@@ -7166,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,
@@ -7372,32 +7566,151 @@ const AXPRepeaterWidget = {
     },
 };
 
-class AXPColorBoxWidgetViewComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{ rawValue() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `{{ rawValue() }}`,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: []
-                }]
-        }] });
-
-var colorBoxWidgetView_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPColorBoxWidgetViewComponent: AXPColorBoxWidgetViewComponent
-});
-
-class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
+class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.placeholder = computed(() => this.options()["placeholder"]);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.readonly = computed(() => this.options()["readonly"]);
+        this.content = computed(() => this.options()['content']);
+        this.size = computed(() => this.options()['size'] ?? 200);
+        this.level = computed(() => this.options()['level']?.id ?? 'M');
+        this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'));
+        this.outputType = computed(() => this.options()['outputType'] ?? 'svg');
+    }
+    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", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    @if(this.content()){
+    <ax-qrcode
+      [content]="this.content()"
+      [size]="size()"
+      [color]="color()"
+      [level]="level()"
+      [outputType]="outputType()"
+    >
+    </ax-qrcode>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$8.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,
+            args: [{
+                    template: `
+    @if(this.content()){
+    <ax-qrcode
+      [content]="this.content()"
+      [size]="size()"
+      [color]="color()"
+      [level]="level()"
+      [outputType]="outputType()"
+    >
+    </ax-qrcode>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXQrcodeModule],
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPQrcodeWidgetViewComponent: AXPQrcodeWidgetViewComponent
+});
+
+const AXPQrcodeWidget = {
+    name: 'qrcode',
+    title: 'QR Code',
+    group: AXP_WIDGETS_ADVANCE_GROUP,
+    icon: 'fa-solid fa-qrcode',
+    description: 'Display and edit QR Codes',
+    type: 'view',
+    properties: [
+        AXP_NAME_PROPERTY,
+        cloneProperty(AXP_COLOR_PROPERTY, { schema: { interface: { defaultValue: '#000000' } } }),
+        cloneProperty(AXP_CONTENT_PROPERTY, { schema: { interface: { defaultValue: 'http://google.com' } } }),
+        {
+            name: 'size',
+            title: 'Size',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: 200,
+                interface: {
+                    name: 'size',
+                    path: 'options.size',
+                    type: AXPWidgetsCatalog.number,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'level',
+            title: 'Error Correction Level',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                interface: {
+                    defaultValue: 'M',
+                    name: 'level',
+                    path: 'options.level',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: ['L', 'M', 'Q', 'H'].map((i) => ({ title: i, id: i })),
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
+        },
+    },
+};
+
+class AXPColorBoxWidgetViewComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{ rawValue() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `{{ rawValue() }}`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: []
+                }]
+        }] });
+
+var colorBoxWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPColorBoxWidgetViewComponent: AXPColorBoxWidgetViewComponent
+});
+
+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"] ?? []);
     }
@@ -7542,76 +7855,6 @@ const AXPColorBoxWidget = {
     },
 };
 
-class AXPTextBlockWidgetViewComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.sanitizer = inject(DomSanitizer);
-        this.content = computed(() => this.options()['content']);
-        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: "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>
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                }]
-        }] });
-
-var textBlockWidgetView_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPTextBlockWidgetViewComponent: AXPTextBlockWidgetViewComponent
-});
-
-const AXPTextBlockWidget = {
-    name: 'text-block-layout',
-    title: 'Text Block',
-    description: 'Displays text blocks',
-    icon: 'fa-solid fa-text',
-    group: AXP_WIDGETS_LAYOUT_GROUP,
-    type: 'view',
-    properties: [
-        {
-            name: 'content',
-            title: 'Content',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                defaultValue: 'Text Block',
-                interface: {
-                    name: 'content',
-                    path: 'options.content',
-                    type: AXPWidgetsCatalog.richText,
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
-        },
-        designer: {
-            component: () => import('./acorex-platform-widgets-text-block-widget-designer.component-Bi9hlpvB.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
-        },
-    },
-};
-
 const AXPDocumentWidget = {
     name: 'document-layout',
     title: 'Document',
@@ -7627,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,
@@ -7747,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],
                 }]
         }] });
 
@@ -7784,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()) {
@@ -7814,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,
@@ -7836,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 }); }
 }
@@ -7856,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,
@@ -7912,139 +8193,93 @@ const AXPGridWidget = {
     },
 };
 
-class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
+class AXPGridItemWidgetViewComponent extends AXPContainerWidgetComponent {
     constructor() {
         super(...arguments);
-        this.content = computed(() => this.options()['content']);
-        this.size = computed(() => this.options()['size'] ?? 200);
-        this.level = computed(() => this.options()['level']?.id ?? 'M');
-        this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'));
-        this.outputType = computed(() => this.options()['outputType'] ?? 'svg');
+        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-block`] = true;
-        cls[`ax-flex-1`] = 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;
+        }
+        //
+        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: 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", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    @if(this.content()){
-    <ax-qrcode
-      [content]="this.content()"
-      [size]="size()"
-      [color]="color()"
-      [level]="level()"
-      [outputType]="outputType()"
-    >
-    </ax-qrcode>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                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: AXQrcodeModule }, { kind: "component", type: i1$8.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: 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: AXPQrcodeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    @if(this.content()){
-    <ax-qrcode
-      [content]="this.content()"
-      [size]="size()"
-      [color]="color()"
-      [level]="level()"
-      [outputType]="outputType()"
-    >
-    </ax-qrcode>
+    @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, AXQrcodeModule],
+                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    providers: [
+                        {
+                            provide: AXPContainerWidgetComponent,
+                            useExisting: AXPGridItemWidgetViewComponent,
+                        },
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPQrcodeWidgetViewComponent: AXPQrcodeWidgetViewComponent
-});
-
-const AXPQrcodeWidget = {
-    name: 'qrcode',
-    title: 'QR Code',
-    group: AXP_WIDGETS_ADVANCE_GROUP,
-    icon: 'fa-solid fa-qrcode',
-    description: 'Display and edit QR Codes',
-    type: 'view',
-    properties: [
-        AXP_NAME_PROPERTY,
-        cloneProperty(AXP_COLOR_PROPERTY, { schema: { interface: { defaultValue: '#000000' } } }),
-        cloneProperty(AXP_CONTENT_PROPERTY, { schema: { interface: { defaultValue: 'http://google.com' } } }),
-        {
-            name: 'size',
-            title: 'Size',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                defaultValue: 200,
-                interface: {
-                    name: 'size',
-                    path: 'options.size',
-                    type: AXPWidgetsCatalog.number,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'level',
-            title: 'Error Correction Level',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                interface: {
-                    defaultValue: 'M',
-                    name: 'level',
-                    path: 'options.level',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: ['L', 'M', 'Q', 'H'].map((i) => ({ title: i, id: i })),
-                    },
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
-        },
-    },
-};
-
-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
@@ -8069,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);
@@ -8120,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>
@@ -8140,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>
@@ -8153,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,
@@ -8199,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],
                 }]
         }] });
 
@@ -8345,6 +8606,76 @@ const AXPGridRowWidget = {
     }
 };
 
+class AXPTextBlockWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.sanitizer = inject(DomSanitizer);
+        this.content = computed(() => this.options()['content']);
+        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: "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>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                }]
+        }] });
+
+var textBlockWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPTextBlockWidgetViewComponent: AXPTextBlockWidgetViewComponent
+});
+
+const AXPTextBlockWidget = {
+    name: 'text-block-layout',
+    title: 'Text Block',
+    description: 'Displays text blocks',
+    icon: 'fa-solid fa-text',
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    type: 'view',
+    properties: [
+        {
+            name: 'content',
+            title: 'Content',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: 'Text Block',
+                interface: {
+                    name: 'content',
+                    path: 'options.content',
+                    type: AXPWidgetsCatalog.richText,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
+        },
+        designer: {
+            component: () => import('./acorex-platform-widgets-text-block-widget-designer.component-Bi9hlpvB.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
+        },
+    },
+};
+
 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$7.AXPLayoutBuilderModule] }); }
@@ -8372,9 +8703,9 @@ class AXPWidgetsModule {
                     AXPSelectionListWidget,
                     AXPLargeTextWidget,
                     AXPMapBoxWidget,
-                    AXPPhoneBoxWidget,
-                    AXPEmailBoxWidget,
-                    AXPLinkWidget,
+                    //AXPPhoneBoxWidget,
+                    //AXPEmailBoxWidget,
+                    //AXPLinkWidget,
                     AXPFileBoxWidget,
                     AXPQrcodeWidget,
                     AXPPasswordBoxWidget,
@@ -8414,9 +8745,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                                 AXPSelectionListWidget,
                                 AXPLargeTextWidget,
                                 AXPMapBoxWidget,
-                                AXPPhoneBoxWidget,
-                                AXPEmailBoxWidget,
-                                AXPLinkWidget,
+                                //AXPPhoneBoxWidget,
+                                //AXPEmailBoxWidget,
+                                //AXPLinkWidget,
                                 AXPFileBoxWidget,
                                 AXPQrcodeWidget,
                                 AXPPasswordBoxWidget,
@@ -8437,5 +8768,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, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FROMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_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 };
+export { AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FROMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map