@acorex/platform 18.1.4 → 18.1.6

package/fesm2022/acorex-platform-widgets.mjs

@@ -11,7 +11,7 @@ import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBool
 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, effect, ViewEncapsulation, ViewChild, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, ElementRef, signal, afterNextRender, ViewEncapsulation, ViewChild, ChangeDetectorRef, effect, InjectionToken, Injectable, HostListener, NgModule } from '@angular/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
@@ -19,6 +19,7 @@ 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 { AXPClipBoardService } from '@acorex/platform/common';
 import * as i3$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXPopupService } from '@acorex/components/popup';
@@ -30,7 +31,6 @@ 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$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
@@ -58,7 +58,7 @@ import * as i2$4 from '@acorex/components/image';
 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 { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent, AXPDesignerAddWidgetButtonComponent } from '@acorex/platform/layout/designer';
 import * as i1$8 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXColorUtil } from '@acorex/core/utils';
@@ -120,7 +120,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXButtonModule, AXLoadingModule, AXDecoratorModule, AXBadgeModule],
-                    inputs: [],
                 }]
         }] });
 
@@ -837,6 +836,7 @@ const AXPButtonWidget = {
     group: AXP_WIDGETS_ACTION_GROUP,
     type: 'action',
     properties: [
+        AXP_NAME_PROPERTY,
         AXP_DISABLED_PROPERTY,
         cloneProperty(AXP_TEXT_PROPERTY, { schema: { defaultValue: 'Click Here' } }),
         AXP_STYLE_COLOR_PROPERTY,
@@ -846,7 +846,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-B9bfVuC4.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-M_JuDPbt.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -921,7 +921,7 @@ const AXPCheckBoxWidget = {
             component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-DzGg-uFi.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
         },
         view: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-tPk6Gylo.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-CDA7Jwov.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
         },
         edit: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -941,6 +941,7 @@ const AXPCheckBoxWidget = {
 class AXPContactWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
+        this.clipboard = inject(AXPClipBoardService);
         this.itemToValue = (item) => {
             if (typeof item === 'object')
                 return item?.value ?? '';
@@ -957,12 +958,24 @@ class AXPContactWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
     }
     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 }); }
+    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: ` <div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    <span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>
+    <i
+      (click)="clipboard.copy('Contact', rawValue)"
+      class="fa-solid fa-copy ax-text-neutral-400 dark:hover:ax-text-neutral-100 hover:ax-text-neutral-900 group-hover:ax-visible ax-invisible"
+    ></i>
+  </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: AXPContactWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>`,
+                    template: ` <div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    <span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>
+    <i
+      (click)="clipboard.copy('Contact', rawValue)"
+      class="fa-solid fa-copy ax-text-neutral-400 dark:hover:ax-text-neutral-100 hover:ax-text-neutral-900 group-hover:ax-visible ax-invisible"
+    ></i>
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -1136,34 +1149,25 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         }
     }
     generateClasses(element) {
+        const isValue = element === 'value';
         if (this.multiple()) {
             if (this.hasLabel()) {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7';
-                }
-                else {
-                    return 'ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-12 ';
-                }
+                return isValue
+                    ? 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7'
+                    : 'ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-12';
             }
             else {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-12';
-                }
+                return isValue ? 'ax-col-start-1 ax-col-end-11 sm:ax-col-end-12 md:ax-col-end-12' : '';
             }
         }
         else {
             if (this.hasLabel()) {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7';
-                }
-                else {
-                    return 'ax-col-start-1 ax-col-end-13 lg:ax-col-start-7 lg:ax-col-end-13';
-                }
+                return isValue
+                    ? 'ax-col-start-1 ax-col-end-13 lg:ax-col-end-7'
+                    : 'ax-col-start-1 ax-col-end-13 lg:ax-col-start-7 lg:ax-col-end-13';
             }
             else {
-                if (element === 'value') {
-                    return 'ax-col-start-1 ax-col-end-13';
-                }
+                return isValue ? 'ax-col-start-1 ax-col-end-13' : '';
             }
         }
     }
@@ -1202,7 +1206,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     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">
+    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="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max	">
     @for(item of internalValue();track $index) {
     <ax-text-box
       [ngModel]="item.value"
@@ -1219,7 +1223,10 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
         [message]="validation.options?.message"
         [options]="validation.options"
       ></ax-validation-rule>
+      } @if(type()==='email'){
+      <ax-validation-rule rule="email"></ax-validation-rule>
       }
+      <ax-validation-rule rule="required"></ax-validation-rule>
     </ax-text-box>
     @if(hasLabel()){
     <ax-select-box
@@ -1249,7 +1256,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
+      class="ax-col-start-8 ax-col-end-13 sm:ax-col-start-10 md:ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-10 "
     >
       <ax-prefix>
         <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -1261,7 +1268,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<div class="lg:ax-grid lg:ax-grid-cols-12 lg:ax-gap-4">
+                    template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max	">
     @for(item of internalValue();track $index) {
     <ax-text-box
       [ngModel]="item.value"
@@ -1278,7 +1285,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [message]="validation.options?.message"
         [options]="validation.options"
       ></ax-validation-rule>
+      } @if(type()==='email'){
+      <ax-validation-rule rule="email"></ax-validation-rule>
       }
+      <ax-validation-rule rule="required"></ax-validation-rule>
     </ax-text-box>
     @if(hasLabel()){
     <ax-select-box
@@ -1308,7 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [disabled]="disabled()"
       look="twotone"
       (onClick)="addItem()"
-      class="ax-col-start-6 ax-col-end-13 lg:ax-col-start-8 xl:ax-col-start-10 "
+      class="ax-col-start-8 ax-col-end-13 sm:ax-col-start-10 md:ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-10 "
     >
       <ax-prefix>
         <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -1487,6 +1497,8 @@ const AXPContactWidget = {
     icon: 'fa-solid fa-address-book',
     type: 'editor',
     properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
         {
             name: 'type',
             title: 'Contact Type',
@@ -1495,42 +1507,17 @@ const AXPContactWidget = {
                 dataType: 'string',
                 nullable: false,
                 interface: {
-                    defaultValue: { id: 'link', title: 'Link' },
+                    defaultValue: 'link',
                     name: 'type',
                     path: 'options.type',
                     type: AXPWidgetsCatalog.select,
                     options: {
-                        dataSource: [
-                            { id: 'link', title: 'Link' },
-                            { id: 'email', title: 'Email' },
-                            { id: 'phone', title: 'Phone' },
-                        ],
+                        dataSource: ['link', 'email', 'phone'],
                     },
                 },
             },
             visible: true,
         },
-        {
-            name: 'labelList',
-            title: 'Label List',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                nullable: false,
-                interface: {
-                    name: 'labelList',
-                    path: 'options.labelList',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { id: 'primary', title: 'Primary' },
-                            { id: 'secondary', title: 'Secondary' },
-                        ],
-                    },
-                },
-            },
-            visible: false,
-        },
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
@@ -1783,10 +1770,13 @@ var dateTimeBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 
 class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.formatter = inject(AXDateTimeFormatter);
+        this.elementRef = inject(ElementRef);
         this.convertedValue = computed(() => this.updateValue());
-        this.format = 'datetime';
+        this.multiple = this.options['multiple'] || false;
+        this.format = this.options['format'] || 'date';
+        this.dir = signal('ltr');
         this.updateValue = () => {
             const rawValue = this.rawValue;
             if (rawValue == null) {
@@ -1799,6 +1789,9 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
                 return this.handleFormat(rawValue);
             }
         };
+        afterNextRender(() => {
+            this.dir.set(getComputedStyle(this.elementRef.nativeElement).direction);
+        });
     }
     handleFormat(value) {
         return value ? this.formatter.format(new Date(value), { format: this.format }) : '---';
@@ -1806,19 +1799,23 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     isArray(val) {
         return Array.isArray(val);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<span [title]="convertedValue()">{{ convertedValue() }}</span>`, 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: AXPDateTimeBoxWidgetColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex" [class]="dir() === 'rtl' ? 'ax-justify-end' : 'ax-justify-start'">
+    <span [title]="convertedValue()">{{ convertedValue() }}</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: AXPDateTimeBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<span [title]="convertedValue()">{{ convertedValue() }}</span>`,
+                    template: `<div class="ax-flex" [class]="dir() === 'rtl' ? 'ax-justify-end' : 'ax-justify-start'">
+    <span [title]="convertedValue()">{{ convertedValue() }}</span>
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
                     inputs: ['rawValue'],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var dateTimeBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1827,12 +1824,12 @@ var dateTimeBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPDateTimeBoxWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{rawValue()}}`, 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: AXPDateTimeBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{getValue()}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{rawValue()}}`,
+                    template: `{{getValue()}}`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -3187,15 +3184,15 @@ const AXPLinkWidget = {
 class AXPNumberBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.internalValue = computed(() => (Array.isArray(this.formattedValue()) ? this.formattedValue() : [this.formattedValue()]));
         this.multiple = computed(() => this.options()['multiple']);
         this.format = computed(() => this.options()['format']);
         this.formatService = inject(AXFormatService);
     }
-    getValue() {
-        if (!isNumber(super.getValue()))
+    formattedValue() {
+        if (!isNumber(this.getValue()))
             return '---';
-        const value = Number(super.getValue());
+        const value = Number(this.getValue());
         return this.formatService.format(value, 'number', this.format());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPNumberBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -3242,6 +3239,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         this.decimals = computed(() => this.options()['decimals'] ?? 0);
         this.minValue = computed(() => this.options()['minValue']);
         this.maxValue = computed(() => this.options()['maxValue']);
+        this.seprator = computed(() => this.options()['seprator'] ?? null);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.validationService = inject(AXValidationService);
         this.validationRules = [];
@@ -3291,7 +3289,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         [minValue]="minValue()"
         [maxValue]="maxValue()"
         [decimals]="decimals()"
-        [thousandsSeparator]="','"
+        [thousandsSeparator]="seprator()"
         [placeholder]="placeholder()"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
@@ -3322,7 +3320,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
       </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: i3$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 }); }
+  `, 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", "changeOnScroll", "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: i3$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3335,7 +3333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [minValue]="minValue()"
         [maxValue]="maxValue()"
         [decimals]="decimals()"
-        [thousandsSeparator]="','"
+        [thousandsSeparator]="seprator()"
         [placeholder]="placeholder()"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
@@ -4274,14 +4272,19 @@ var richTextWidgetView_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
-    setNgModel(event) {
-        this.setValue(event);
-    }
     constructor() {
-        super();
+        super(...arguments);
         this.placeholder = computed(() => this.options()['placeholder'] ?? 'default');
+        this.eff = computed(() => {
+            console.log(this.getValue());
+            window.a = this;
+        });
         this._validationRules = [];
-        effect(() => console.log(this.placeholder()));
+    }
+    setWysiwyg(e) {
+        if (e) {
+            this.setValue(e.value);
+        }
     }
     get validationRules() {
         return this._validationRules;
@@ -4295,12 +4298,12 @@ 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: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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
     [placeHolder]="placeholder()"
     [look]="'solid'"
     [ngModel]="getValue()"
-    (ngModelChange)="setNgModel($event)"
+    (onValueChanged)="setWysiwyg($event)"
   >
     <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
     <ax-wysiwyg-toolbar>
@@ -4327,7 +4330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     [placeHolder]="placeholder()"
     [look]="'solid'"
     [ngModel]="getValue()"
-    (ngModelChange)="setNgModel($event)"
+    (onValueChanged)="setWysiwyg($event)"
   >
     <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
     <ax-wysiwyg-toolbar>
@@ -4351,7 +4354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     imports: [CommonModule, AXWysiwygModule, AXValidationModule, AXFormModule, FormsModule],
                     inputs: [],
                 }]
-        }], ctorParameters: () => [], propDecorators: { __class: [{
+        }], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -4484,11 +4487,13 @@ const AXPRichTextWidget = {
 class AXPSelectBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue().map((item) => this.extractItem(item)) : [this.extractItem(this.getValue())]);
+        this.internalValue = computed(() => Array.isArray(this.getValue())
+            ? this.getValue().map((item) => this.extractItem(item))
+            : [this.extractItem(this.getValue())]);
         this.text = null;
-        this.multiple = computed(() => this.options()["multiple"]);
-        this.valueField = computed(() => this.options()["valueField"] ?? "id");
-        this.textField = computed(() => this.options()["textField"] ?? "title");
+        this.multiple = computed(() => this.options()['multiple']);
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
     }
     extractItem(item) {
         return typeof item == 'object'
@@ -4510,13 +4515,10 @@ class AXPSelectBoxWidgetViewComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div>
-      @if(multiple())
-      { 
-        @for (item of internalValue(); track $index) {
-          <p>{{ item.text }}</p>
-        } 
-      }@else {
-        <p>{{ internalValue()[0].text }}</p>
+      @if(multiple()) { @for (item of internalValue(); track $index) {
+      <p>{{ item.text }}</p>
+      } }@else {
+      <p>{{ internalValue()[0].text }}</p>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -4526,13 +4528,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.text }}</p>
-        } 
-      }@else {
-        <p>{{ internalValue()[0].text }}</p>
+      @if(multiple()) { @for (item of internalValue(); track $index) {
+      <p>{{ item.text }}</p>
+      } }@else {
+      <p>{{ internalValue()[0].text }}</p>
       }
     </div>
   `,
@@ -4757,6 +4756,7 @@ const AXPSelectBoxWidget = {
     group: AXP_WIDGETS_EDITOR_GROUP,
     type: 'editor',
     properties: [
+        AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_TEXT_FIELD_PROPERTY,
@@ -5391,40 +5391,80 @@ class AXPToggleWidgetViewComponent extends AXPWidgetComponent {
         this.trulyText = computed(() => this.options()['trulyText']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` @if(getValue()){ @if(trulyText()){
-    <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText()){
-    <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "axp-switch-widget", usesInheritance: true, ngImport: i0, template: `
+    @if(getValue()){ 
+      @if(trulyText())
+      {
+      <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
+      }
+      @else { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+        }
+        @else 
+        {
+        <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
+        } 
+      } 
+    }@else 
+    { 
+      @if(falsyText())
+      {
+      <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
+      }
+      @else 
+      { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+        }@else 
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
+        } 
+      } 
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ` @if(getValue()){ @if(trulyText()){
-    <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText()){
-    <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative()){
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`,
+                    selector: 'axp-switch-widget',
+                    template: `
+    @if(getValue()){ 
+      @if(trulyText())
+      {
+      <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
+      }
+      @else { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+        }
+        @else 
+        {
+        <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
+        } 
+      } 
+    }@else 
+    { 
+      @if(falsyText())
+      {
+      <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
+      }
+      @else 
+      { 
+        @if(negative())
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+        }@else 
+        {
+        <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
+        } 
+      } 
+    }`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXDecoratorModule, AXBadgeModule],
-                    inputs: [],
                 }]
         }] });
 
@@ -5449,12 +5489,12 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-swith-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: AXSwitchModule }, { kind: "component", type: i2$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-switch-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: AXSwitchModule }, { kind: "component", type: i2$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-swith-widget',
+                    selector: 'axp-switch-widget',
                     template: `<ax-switch [ngModel]="this.getValue()" [disabled]="disabled()" [color]="color()" (ngModelChange)="onModelChange($event)"></ax-switch>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5543,11 +5583,12 @@ var toggleWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPToggleWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPToggleWidgetPrintComponent, 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: AXPToggleWidgetPrintComponent, isStandalone: true, selector: "axp-swith-widget", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPToggleWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-swith-widget',
                     template: ``,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6099,7 +6140,7 @@ class AXPGalleryWidgetViewComponent extends AXPWidgetComponent {
               <ax-loading></ax-loading>
               <ax-placeholder>
                 <div class="ax-w-96 ax-h-72 ax-gap-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-border ax-rounded-lg">
-                  <ax-icon class="fa-solid fa-circle-exclamation ax-text-3xl"> </ax-icon>
+                  <ax-icon class="fa-solid fa-circle-exclamation ax-text-2xl"> </ax-icon>
                   <span>Connection Error!</span>
                 </div>
               </ax-placeholder>
@@ -6152,7 +6193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
               <ax-loading></ax-loading>
               <ax-placeholder>
                 <div class="ax-w-96 ax-h-72 ax-gap-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-border ax-rounded-lg">
-                  <ax-icon class="fa-solid fa-circle-exclamation ax-text-3xl"> </ax-icon>
+                  <ax-icon class="fa-solid fa-circle-exclamation ax-text-2xl"> </ax-icon>
                   <span>Connection Error!</span>
                 </div>
               </ax-placeholder>
@@ -6258,7 +6299,7 @@ class AXPGalleryWidgetEditComponent extends AXPWidgetComponent {
             <ax-loading></ax-loading>
             <ax-placeholder>
               <div class="ax-w-96 ax-h-72 ax-gap-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-border ax-rounded-lg">
-                <ax-icon class="fa-solid fa-circle-exclamation ax-text-3xl"> </ax-icon>
+                <ax-icon class="fa-solid fa-circle-exclamation ax-text-2xl"> </ax-icon>
                 <span>Connection Error!</span>
               </div>
             </ax-placeholder>
@@ -6316,7 +6357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             <ax-loading></ax-loading>
             <ax-placeholder>
               <div class="ax-w-96 ax-h-72 ax-gap-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-border ax-rounded-lg">
-                <ax-icon class="fa-solid fa-circle-exclamation ax-text-3xl"> </ax-icon>
+                <ax-icon class="fa-solid fa-circle-exclamation ax-text-2xl"> </ax-icon>
                 <span>Connection Error!</span>
               </div>
             </ax-placeholder>
@@ -6991,8 +7032,7 @@ class AXPBlockWidgetDesignerComponent extends AXPContainerWidgetComponent {
         const cls = {};
         //
         cls[`ax-w-full`] = true;
-        cls[`ax-border`] = true;
-        cls[`ax-border-dashed`] = true;
+        cls[`ax-widget-outline`] = true;
         //
         cls[`ax-flex`] = true;
         cls[`ax-gap-${this.gap()}`] = true;
@@ -7025,8 +7065,8 @@ class AXPBlockWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @for (node of children(); track $index) {
     <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-    <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    <axp-designer-add-widget-mini-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-mini-button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7036,11 +7076,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @for (node of children(); track $index) {
     <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-    <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-button>
+    <axp-designer-add-widget-mini-button class="ax-flex-1 ax-self-center ax-place-self-end"></axp-designer-add-widget-mini-button>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPBlockWidgetDesignerComponent
@@ -7063,24 +7103,33 @@ var blockWidgetDesigner_component = /*#__PURE__*/Object.freeze({
 class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.backgroundColor = computed(() => this.options()["backgroundColor"]);
-        this.cssClass = computed(() => this.options()["cssClass"]);
-        this.flexAlign = computed(() => this.options()["flexAlign"]?.id);
-        this.flexJustify = computed(() => this.options()["flexJustify"]?.id);
-        this.gap = computed(() => this.options()["gap"] ?? 0);
+        this.backgroundColor = computed(() => this.options()['backgroundColor']);
+        this.cssClass = computed(() => this.options()['cssClass']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
     }
     get __class() {
         const cls = {};
         //
-        cls[`ax-flex`] = true;
-        cls[`ax-flex-col`] = true;
         cls[`ax-w-full`] = true;
-        cls[`ax-gap-${this.gap}`] = true;
-        if (this.flexAlign()) {
-            cls[this.flexAlign()] = true;
+        //
+        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.flexJustify()) {
-            cls[this.flexJustify()] = true;
+        if (this.flexDirection()) {
+            cls[this.flexDirection()] = true;
         }
         return cls;
     }
@@ -7092,7 +7141,13 @@ 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) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container
+      axp-widget-renderer
+      [node]="node"
+      [index]="index"
+      [parentNode]="this"
+      [mode]="this.mode"
+    ></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -7102,7 +7157,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-block-widget',
                     template: `
     @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container
+      axp-widget-renderer
+      [node]="node"
+      [index]="index"
+      [parentNode]="this"
+      [mode]="this.mode"
+    ></ng-container>
     }
   `,
                     standalone: true,
@@ -7130,6 +7191,7 @@ const AXPBlockWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'container',
     properties: [
+        AXP_NAME_PROPERTY,
         AXP_FONT_SIZE_PROPERTY,
         cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
         ...AXP_LAYOUT_FLEX_PROPERTIES
@@ -7163,7 +7225,7 @@ 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) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -7173,7 +7235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'axp-page-widget',
                     template: `
     @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [mode]="this.mode"></ng-container>
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
   `,
                     standalone: true,
@@ -7202,7 +7264,21 @@ const AXPPageWidget = {
     properties: [
         AXP_FONT_SIZE_PROPERTY,
         AXP_THEME_PROPERTY,
-        AXP_BG_COLOR_PROPERTY
+        AXP_BG_COLOR_PROPERTY,
+        createBooleanProperty({
+            name: "hasHeader",
+            path: 'options.hasHeader',
+            title: "Header",
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+        }),
+        createBooleanProperty({
+            name: "hasFooter",
+            path: 'options.hasFooter',
+            title: "Footer",
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+        })
     ],
     components: {
         view: {
@@ -7215,7 +7291,7 @@ const AXPPageWidget = {
             component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-widgets-page-widget-designer.component-6BMZ0qRw.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-page-widget-designer.component-BL_EAwUs.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
         },
     },
 };
@@ -7266,18 +7342,31 @@ var repeaterWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.rows = signal([]);
         this.disabled = computed(() => this.options()["disabled"]);
         this.hasControls = computed(() => this.options()["hasControls"]);
-    }
-    ngAfterViewInit() {
-        this.rows.set(this.getValue() ?? []);
+        this.rows = computed(() => {
+            return this.convertValueToArray() ?? [];
+        });
     }
     handleAddItemClick() {
         this.addNew();
     }
+    handleRemoveItemClick(i) {
+        this.removeItem(i);
+    }
     addNew() {
-        this.rows.update((prev) => [...prev, {}]);
+        const newValue = [...(this.convertValueToArray() ?? []), {}];
+        this.setValue(newValue);
+    }
+    removeItem(index) {
+        const currentArray = [...this.convertValueToArray()];
+        currentArray.splice(index, 1);
+        this.setValue(currentArray);
+    }
+    convertValueToArray() {
+        return this.getValue() ?
+            Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()] :
+            [];
     }
     api() {
         return {
@@ -7288,7 +7377,7 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPRepeaterWidgetEditComponent, isStandalone: true, selector: "axp-repeater-widget", usesInheritance: true, ngImport: i0, template: `
    @if(hasControls())
     {
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center">
       @for(row of rows();let i=$index; track i)
       {
       <div class="ax-col-span-11">
@@ -7298,13 +7387,17 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        (onClick)="handleRemoveItemClick(i)"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
       }
+      @empty {
+        <ng-container [ngTemplateOutlet]="empty" ></ng-container>
+      }    
       <ax-button
-          [text]="'Add New'"
+          [text]="rows().length ? 'Start Adding Items':'Add Your First Item'"
           look="twotone"
           [disabled]="disabled()"
           (onClick)="handleAddItemClick()"
@@ -7321,12 +7414,21 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
       {
         <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
       }
+      @empty {
+        <ng-container [ngTemplateOutlet]="empty" ></ng-container>
+      }    
     }
-    <ng-template #tpl let-index>   
+    <ng-template #tpl let-index="index">   
       @for (node of children();track $index) 
       {
       <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="index" [mode]="this.mode"></ng-container>
-      }    
+      }
+    
+    </ng-template>
+    <ng-template #empty>
+      <div class="ax-col-start-1 ax-col-end-10  ax-text-sm ax-text-gray-400">
+        You haven't added any items yet. Click “Start Adding Items” to get started!
+      </div>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -7337,7 +7439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     template: `
    @if(hasControls())
     {
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center">
       @for(row of rows();let i=$index; track i)
       {
       <div class="ax-col-span-11">
@@ -7347,13 +7449,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        (onClick)="handleRemoveItemClick(i)"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
       }
+      @empty {
+        <ng-container [ngTemplateOutlet]="empty" ></ng-container>
+      }    
       <ax-button
-          [text]="'Add New'"
+          [text]="rows().length ? 'Start Adding Items':'Add Your First Item'"
           look="twotone"
           [disabled]="disabled()"
           (onClick)="handleAddItemClick()"
@@ -7370,12 +7476,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       {
         <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{index:i}"></ng-container>
       }
+      @empty {
+        <ng-container [ngTemplateOutlet]="empty" ></ng-container>
+      }    
     }
-    <ng-template #tpl let-index>   
+    <ng-template #tpl let-index="index">   
       @for (node of children();track $index) 
       {
       <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="index" [mode]="this.mode"></ng-container>
-      }    
+      }
+    
+    </ng-template>
+    <ng-template #empty>
+      <div class="ax-col-start-1 ax-col-end-10  ax-text-sm ax-text-gray-400">
+        You haven't added any items yet. Click “Start Adding Items” to get started!
+      </div>
     </ng-template>
   `,
                     standalone: true,
@@ -7432,14 +7547,14 @@ class AXPRepeaterWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @if(hasControls())
     {
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <div class="ax-col-span-11 ax-border-dashed ax-border">
+      <div class="ax-col-span-11">
         <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
       </div>
       <ax-button
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
@@ -7463,10 +7578,10 @@ class AXPRepeaterWidgetDesignerComponent extends AXPContainerWidgetComponent {
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode"> </ng-container>
       }
       @empty {
-       <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end axp-empty-space ax-block ax-p-0 " ></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7476,14 +7591,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @if(hasControls())
     {
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <div class="ax-col-span-11 ax-border-dashed ax-border">
+      <div class="ax-col-span-11">
         <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
       </div>
       <ax-button
         [disabled]="disabled()"
         look="twotone"
         color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
       >
         <ax-icon icon="fa-regular fa-xmark"></ax-icon>
       </ax-button>
@@ -7507,13 +7622,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode"> </ng-container>
       }
       @empty {
-       <axp-designer-add-widget-button class="ax-flex-1 ax-self-center ax-place-self-end axp-empty-space ax-block ax-p-0 " ></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
       }
     </ng-template>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPRepeaterWidgetDesignerComponent
@@ -7565,6 +7680,197 @@ const AXPRepeaterWidget = {
     },
 };
 
+const AXP_TEMPLATE_WIDGET_PROVIDER = new InjectionToken('AXP_TEMPLATE_WIDGET_PROVIDER');
+class AXPTemplateWidgetProviderService {
+    constructor() {
+        this.providers = inject(AXP_TEMPLATE_WIDGET_PROVIDER, { optional: true });
+    }
+    async items(query) {
+        if (Array.isArray(this.providers)) {
+            const result = [];
+            for (const provider of this.providers) {
+                const items = await provider.items(query);
+                if (items) {
+                    result.push(...items);
+                }
+            }
+            return result;
+        }
+        else {
+            return [];
+        }
+    }
+    async get(id) {
+        if (Array.isArray(this.providers)) {
+            for (const provider of this.providers) {
+                const node = await provider.get(id);
+                if (node) {
+                    return node;
+                }
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetProviderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetProviderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AXPTemplateWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super();
+        this.templateProvider = inject(AXPTemplateWidgetProviderService);
+        this.templateId = computed(() => this.options()["templateId"]);
+        this.nodeToRender = signal(null);
+        //
+        effect(async () => {
+            const node = await this.templateProvider.get(this.templateId());
+            if (node) {
+                this.nodeToRender.set(node);
+            }
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPTemplateWidgetViewComponent, isStandalone: true, selector: "axp-template-widget", usesInheritance: true, ngImport: i0, template: `
+    @if(nodeToRender())
+    {
+      <ng-container
+          axp-widget-renderer
+          [node]="nodeToRender()!"
+          [parentNode]="this"
+          [mode]="this.mode"
+      >
+      </ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-template-widget',
+                    template: `
+    @if(nodeToRender())
+    {
+      <ng-container
+          axp-widget-renderer
+          [node]="nodeToRender()!"
+          [parentNode]="this"
+          [mode]="this.mode"
+      >
+      </ng-container>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule]
+                }]
+        }], ctorParameters: () => [] });
+
+var templateWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPTemplateWidgetViewComponent: AXPTemplateWidgetViewComponent
+});
+
+class AXPTemplateWidgetDesignerComponent extends AXPContainerWidgetComponent {
+    constructor() {
+        super();
+        this.templateProvider = inject(AXPTemplateWidgetProviderService);
+        this.designerService = inject(AXPDesignerService);
+        this.templateId = computed(() => this.options()["templateId"]);
+        this.nodeToRender = signal(null);
+        //
+        effect(async () => {
+            const node = await this.templateProvider.get(this.templateId());
+            if (node) {
+                this.nodeToRender.set(node);
+            }
+            else {
+                this.nodeToRender.set(null);
+            }
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPTemplateWidgetDesignerComponent, isStandalone: true, selector: "ng-component", providers: [
+            {
+                provide: AXPContainerWidgetComponent, useExisting: AXPContainerWidgetComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+   @if(nodeToRender())
+    {
+      <div >
+        <ng-container axp-widget-designer-renderer
+            [node]="nodeToRender()!"
+            [parentNode]="this"
+            [mode]="this.mode"
+        >
+        </ng-container>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+   @if(nodeToRender())
+    {
+      <div >
+        <ng-container axp-widget-designer-renderer
+            [node]="nodeToRender()!"
+            [parentNode]="this"
+            [mode]="this.mode"
+        >
+        </ng-container>
+      </div>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective],
+                    providers: [
+                        {
+                            provide: AXPContainerWidgetComponent, useExisting: AXPContainerWidgetComponent
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+var templateWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPTemplateWidgetDesignerComponent: AXPTemplateWidgetDesignerComponent
+});
+
+const AXPTemplateWidget = {
+    name: "template",
+    title: "Template",
+    type: 'container',
+    icon: "fa-solid fa-square",
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    visible: false,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        createStringProperty({ name: "options.templateId", title: "Template", group: AXP_BEHAVIOR_PROPERTY_GROUP })
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
+        },
+        edit: {
+            component: () => import('./acorex-platform-widgets-template-widget-edit.component-gvAh-gH1.mjs').then((c) => c.AXPTemplateWidgetEditComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return templateWidgetDesigner_component; }).then((c) => c.AXPTemplateWidgetDesignerComponent),
+        },
+    }
+};
+
 class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -7576,12 +7882,11 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     }
     get __class() {
         const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-flex-1`] = true;
+        cls[`ax-inline-block`] = 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @if(this.content()){
     <ax-qrcode
       [content]="this.content()"
@@ -7597,6 +7902,7 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPQrcodeWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-qrcode-widget',
                     template: `
     @if(this.content()){
     <ax-qrcode
@@ -7686,12 +7992,13 @@ const AXPQrcodeWidget = {
 
 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "axp-color-box-widget", usesInheritance: true, ngImport: i0, template: `{{ getValue() }}`, 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() }}`,
+                    selector: 'axp-color-box-widget',
+                    template: `{{ getValue() }}`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -7719,7 +8026,7 @@ class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPColorBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPColorBoxWidgetEditComponent, isStandalone: true, selector: "axp-color-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-color-box [disabled]="disabled()" [readonly]="readonly()" [ngModel]="getValue()" [placeholder]="placeholder()" (onValueChanged)="handleValueChanged($event)">
       @for (validation of validationRules(); track $index) {
           <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
@@ -7733,6 +8040,7 @@ class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-color-box-widget',
                     template: `
     <ax-color-box [disabled]="disabled()" [readonly]="readonly()" [ngModel]="getValue()" [placeholder]="placeholder()" (onValueChanged)="handleValueChanged($event)">
       @for (validation of validationRules(); track $index) {
@@ -7778,17 +8086,36 @@ var colorBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPColorBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.rgba = computed(() => AXColorUtil.toString(this.rawValue, 'rgba'));
+        this.clipboard = inject(AXPClipBoardService);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{rawValue}}`, 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: AXPColorBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    <div class="ax-size-4 ax-rounded-full ax-border" [style.backgroundColor]="rgba()"></div>
+    <span>{{ rawValue }}</span>
+    <i
+      (click)="clipboard.copy('Color', rawValue)"
+      class="fa-solid fa-copy ax-text-neutral-400 dark:hover:ax-text-neutral-100 hover:ax-text-neutral-900 group-hover:ax-visible ax-invisible"
+    ></i>
+  </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: AXPColorBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{rawValue}}`,
+                    template: `<div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    <div class="ax-size-4 ax-rounded-full ax-border" [style.backgroundColor]="rgba()"></div>
+    <span>{{ rawValue }}</span>
+    <i
+      (click)="clipboard.copy('Color', rawValue)"
+      class="fa-solid fa-copy ax-text-neutral-400 dark:hover:ax-text-neutral-100 hover:ax-text-neutral-900 group-hover:ax-visible ax-invisible"
+    ></i>
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: ['rawValue']
+                    inputs: ['rawValue'],
                 }]
         }] });
 
@@ -7799,12 +8126,12 @@ var colorBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPColorBoxWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{rawValue()}}`, 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: AXPColorBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{getValue()}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{rawValue()}}`,
+                    template: `{{getValue()}}`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -7834,7 +8161,7 @@ const AXPColorBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-Bb3aXCNZ.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-DIvi0BtT.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return colorBoxWidgetView_component; }).then((c) => c.AXPColorBoxWidgetViewComponent),
@@ -7882,7 +8209,7 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
     <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>
+      <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$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 }); }
@@ -7895,7 +8222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     <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>
+      <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
   `,
@@ -7919,10 +8246,11 @@ class AXPFormFieldWidgetDesignerComponent extends AXPContainerWidgetComponent {
         this.label = computed(() => this.options()["label"]);
     }
     get __class() {
-        const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-w-full`] = true;
-        return cls;
+        return {
+            'ax-widget-container': true,
+            'ax-block': true,
+            'ax-w-full': true
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPFormFieldWidgetDesignerComponent, isStandalone: true, selector: "axp-form-field-widget", host: { properties: { "class": "this.__class" } }, providers: [
@@ -7936,10 +8264,10 @@ class AXPFormFieldWidgetDesignerComponent extends AXPContainerWidgetComponent {
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
      }
      @empty {
-       <axp-designer-add-widget-button class="axp-empty-space ax-block ax-p-0 "></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
      }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$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: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetButtonComponent, selector: "axp-designer-add-widget-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$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: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7952,13 +8280,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
      }
      @empty {
-       <axp-designer-add-widget-button class="axp-empty-space ax-block ax-p-0 "></axp-designer-add-widget-button>
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
      }
     </ax-form-field>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetButtonComponent],
+                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
                     providers: [
                         {
                             provide: AXPContainerWidgetComponent, useExisting: AXPFormFieldWidgetDesignerComponent
@@ -7981,7 +8309,11 @@ const AXPFormFieldWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'container',
     icon: 'fa-solid fa-pen-field',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_LABEL_PROPERTY],
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_LABEL_PROPERTY
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return formFieldWidgetView_component; }).then((c) => c.AXPFormFieldWidgetViewComponent),
@@ -8006,10 +8338,10 @@ class AXPGridWidgetViewComponent extends AXPWidgetComponent {
         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: "17.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridWidgetViewComponent, isStandalone: true, selector: "axp-grid-layout-widget", 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>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -8017,10 +8349,11 @@ class AXPGridWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-layout-widget',
                     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>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `,
@@ -8068,7 +8401,7 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
     //     // const gridstack = (await import('gridstack')).GridStack;
     //     // const cols = this.cols();
     //     // const rows = this.rows();
-    //     // debugger
+    //     // 
     //     // // Initialize the grid with responsive options
     //     // gridstack.init({
     //     //   cellHeight: 80,
@@ -8097,11 +8430,11 @@ class AXPGridWidgetDesignerComponent extends AXPContainerWidgetComponent {
         });
     }
     get __class() {
-        const cls = {};
-        //
-        cls[`ax-block`] = true;
-        cls[`ax-w-full`] = true;
-        return cls;
+        return {
+            'ax-widget-container': true,
+            'ax-block': true,
+            'ax-w-full': true
+        };
     }
     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: [
@@ -8237,23 +8570,24 @@ class AXPGridItemWidgetViewComponent extends AXPContainerWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridItemWidgetViewComponent, isStandalone: true, selector: "axp-grid-layout-item-widget", host: { properties: { "class": "this.__class" } }, providers: [
             {
                 provide: AXPContainerWidgetComponent,
                 useExisting: AXPGridItemWidgetViewComponent,
             },
         ], usesInheritance: true, ngImport: i0, template: `
     @for (child of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-layout-item-widget',
                     template: `
     @for (child of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="child" [parentNode]="this" [mode]="this.mode"> </ng-container>
+    <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
   `,
                     standalone: true,
@@ -8294,7 +8628,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 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']);
@@ -8304,12 +8637,10 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
         this.flexDirection = computed(() => this.options()['flexDirection']?.id);
         this.gap = computed(() => this.options()['gap'] ?? 0);
     }
-    async handleSlotClick() {
-        await this.designerService.showPicker(this.node);
-    }
     get __class() {
         const cls = {};
         //
+        cls[`ax-widget-container`] = true;
         cls[`ax-flex`] = true;
         cls[`ax-gap-${this.gap()}`] = true;
         //
@@ -8353,13 +8684,9 @@ class AXPGridItemWidgetDesignerComponent extends AXPContainerWidgetComponent {
     @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>
-    </div>
+      <axp-designer-add-widget-mini-button  ></axp-designer-add-widget-mini-button>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridItemWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -8369,11 +8696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
     @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>
-    </div>
+      <axp-designer-add-widget-mini-button  ></axp-designer-add-widget-mini-button>
     }
   `,
                     standalone: true,
@@ -8382,7 +8705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         CommonModule,
                         AXPLayoutBuilderModule,
                         AXPWidgetDesignerRendererDirective,
-                        AXPDesignerAddWidgetButtonComponent,
+                        AXPDesignerAddWidgetMiniButtonComponent,
                         AXPDesignerGridDrawerComponent,
                     ],
                     providers: [
@@ -8438,10 +8761,10 @@ class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
         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: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPGridRowWidgetViewComponent, isStandalone: true, selector: "axp-grid-row-widget", 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>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -8449,10 +8772,11 @@ class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-grid-row-widget',
                     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>
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
   `,
@@ -8518,6 +8842,7 @@ class AXPGridRowWidgetDesignerComponent extends AXPContainerWidgetComponent {
     get __class() {
         const cls = {};
         //
+        cls[`ax-widget-container`] = true;
         cls[`ax-block`] = true;
         cls[`ax-w-full`] = true;
         return cls;
@@ -8633,6 +8958,7 @@ const AXPTextBlockWidget = {
     group: AXP_WIDGETS_LAYOUT_GROUP,
     type: 'view',
     properties: [
+        AXP_NAME_PROPERTY,
         {
             name: 'content',
             title: 'Content',
@@ -8672,6 +8998,7 @@ class AXPWidgetsModule {
                 widgets: [
                     AXPDocumentWidget,
                     //
+                    AXPTemplateWidget,
                     AXPBlockWidget,
                     AXPPageWidget,
                     AXPRepeaterWidget,
@@ -8714,6 +9041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             widgets: [
                                 AXPDocumentWidget,
                                 //
+                                AXPTemplateWidget,
                                 AXPBlockWidget,
                                 AXPPageWidget,
                                 AXPRepeaterWidget,
@@ -8757,5 +9085,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, plainTextDefaultProperty };
+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, AXPTemplateWidget, AXPTemplateWidgetDesignerComponent, AXPTemplateWidgetProviderService, AXPTemplateWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEMPLATE_WIDGET_PROVIDER, 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