@acorex/platform 19.4.15 → 20.0.0

package/fesm2022/acorex-platform-layout-designer.mjs

@@ -125,7 +125,7 @@ class UpdateWidgetCommand {
         return `Updated widget ${this.widget.name}`;
     }
     icon() {
-        return `fa-solid fa-pen-to-square`;
+        return `fa-solid fa-pen`;
     }
     getExecutionSelection() {
         return this.widget; // Focus the widget after it's updated
@@ -219,10 +219,10 @@ class CommandManager {
         this.undoStack.set([]);
         this.currentIndex.set(-1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CommandManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CommandManager, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommandManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommandManager, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CommandManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CommandManager, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -230,10 +230,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         }] });
 
 class AXPDesignerConnector {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerConnector }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerConnector }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerConnector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerConnector, decorators: [{
             type: Injectable
         }] });
 
@@ -341,10 +341,10 @@ class AXPWidgetPickerService {
             meta: c.meta,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetPickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1003,10 +1003,10 @@ class AXPDesignerService {
         this.eventService.unsubscribe(AXPDesignerMessageKeys.Loaded);
         this.eventService.unsubscribe(AXPDesignerMessageKeys.PreviewWindow);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1019,8 +1019,8 @@ class AXPDesignerAddWidgetButtonComponent {
         e.nativeEvent.stopPropagation();
         await this.designerService.showPicker(this.parent.node);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
     <div class="ax-container">
       <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
         <ax-icon icon="fa-solid fa-plus"></ax-icon>
@@ -1028,7 +1028,7 @@ class AXPDesignerAddWidgetButtonComponent {
     </div>
   `, isInline: true, styles: ["axp-designer-add-widget-button .ax-container{margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-add-widget-button', template: `
     <div class="ax-container">
@@ -1047,8 +1047,8 @@ class AXPDesignerAddWidgetLineButtonComponent {
     handleClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AXPDesignerAddWidgetLineButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-line-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: AXPDesignerAddWidgetLineButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-line-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
    <div class="ax-flex ax-items-center ax-py-4 ax-text-xs">
       <div class="ax-flex-grow ax-border-t-2 ax-border-dashed ax-border-surface"></div>
       <div class="ax-mx-2 ax-sm ">
@@ -1060,7 +1060,7 @@ class AXPDesignerAddWidgetLineButtonComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-add-widget-line-button',
@@ -1104,8 +1104,8 @@ class AXPDesignerAddWidgetMiniButtonComponent {
         cls[`ax-w-full`] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDesignerAddWidgetMiniButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-mini-button", outputs: { onClick: "onClick" }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPDesignerAddWidgetMiniButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-mini-button", outputs: { onClick: "onClick" }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
     <div class="axp-empty-space">
       <div
         class="ax-m-auto ax-py-4 ax-px-8 ax-text-primary-500 hover:ax-text-primary-700 ax-cursor-pointer"
@@ -1116,7 +1116,7 @@ class AXPDesignerAddWidgetMiniButtonComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-add-widget-mini-button',
@@ -1167,8 +1167,8 @@ class AXPDesignerGridDrawerComponent {
             "--cols-width": `${this.colsCount() == 0 ? 0 : (100 / this.colsCount())}%`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "style": "this.__style" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "style": "this.__style" } }, ngImport: i0, template: `
    <table class="table-picker" >
         <tbody>
             @for(r of rows();track $index)
@@ -1190,7 +1190,7 @@ class AXPDesignerGridDrawerComponent {
     </table>
   `, isInline: true, styles: [":host table{width:100%;border-collapse:collapse;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:2.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-grid-drawer', template: `
    <table class="table-picker" >
@@ -1315,10 +1315,10 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
     handleConfirmSelection() {
         this.close({ widgets: this.selectedWidgets() });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-flex ax-flex-col ax-h-[95vh]\"\n  [ngClass]=\"{ 'lg:ax-h-[75vh]': maxVisibleWidgets() > 10, 'lg:ax-h-[50vh]': maxVisibleWidgets() <= 10 }\"\n>\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs();track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <ng-template #itemTpl let-w>\n        @let isSelected= isWidgetSelected(w);\n        <div\n          (click)=\"handleClick($event, w)\"\n          class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer\"\n          [class.ax-bg-primary-lightest]=\"isSelected\"\n          [class.ax-text-primary-on-lightest]=\"isSelected\"\n          [class.ax-border-primary-lightest]=\"isSelected\"\n        >\n          <div\n            class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n            [class.ax-bg-primary-light]=\"isSelected\"\n            [class.ax-text-primary-on-light]=\"isSelected\"\n            [class.ax-border-primary-light]=\"isSelected\"\n            [class.ax-surface]=\"!isSelected\"\n          >\n            <i [ngClass]=\"w.icon\" class=\"ax-text-lg\"></i>\n          </div>\n          <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n            <div class=\"ax-flex ax-items-center ax-gap-2\">\n              <div class=\"ax-font-semibold ax-text-sm\">{{ w.title }}</div>\n              <div (click)=\"handlePinClick($event, w)\">\n                @if (w.pinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                }\n              </div>\n            </div>\n            <span class=\"ax-text-xs ax-truncate\">\n              {{ w.description }}\n            </span>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of pinnedList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of regularList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-flex ax-flex-col ax-h-[95vh]\"\n  [ngClass]=\"{ 'lg:ax-h-[75vh]': maxVisibleWidgets() > 10, 'lg:ax-h-[50vh]': maxVisibleWidgets() <= 10 }\"\n>\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs();track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <ng-template #itemTpl let-w>\n        @let isSelected= isWidgetSelected(w);\n        <div\n          (click)=\"handleClick($event, w)\"\n          class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer\"\n          [class.ax-bg-primary-lightest]=\"isSelected\"\n          [class.ax-text-primary-on-lightest]=\"isSelected\"\n          [class.ax-border-primary-lightest]=\"isSelected\"\n        >\n          <div\n            class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n            [class.ax-bg-primary-light]=\"isSelected\"\n            [class.ax-text-primary-on-light]=\"isSelected\"\n            [class.ax-border-primary-light]=\"isSelected\"\n            [class.ax-surface]=\"!isSelected\"\n          >\n            <i [ngClass]=\"w.icon\" class=\"ax-text-lg\"></i>\n          </div>\n          <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n            <div class=\"ax-flex ax-items-center ax-gap-2\">\n              <div class=\"ax-font-semibold ax-text-sm\">{{ w.title }}</div>\n              <div (click)=\"handlePinClick($event, w)\">\n                @if (w.pinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                }\n              </div>\n            </div>\n            <span class=\"ax-text-xs ax-truncate\">\n              {{ w.description }}\n            </span>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of pinnedList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of regularList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -1443,10 +1443,10 @@ class AXPWidgetPropertyViewerComponent {
         }));
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i2$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i2$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i2$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i2$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onChanged: [{
@@ -1679,10 +1679,10 @@ class AXPWidgetDesignerRendererDirective {
         });
         this.instance?.setOptions(this.mergedOptions());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetDesignerRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.10", type: AXPWidgetDesignerRendererDirective, isStandalone: true, selector: "[axp-widget-designer-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetDesignerRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: AXPWidgetDesignerRendererDirective, isStandalone: true, selector: "[axp-widget-designer-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWidgetDesignerRendererDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetDesignerRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-designer-renderer]',
@@ -1869,12 +1869,12 @@ class AXPDesignerBoardComponent {
         cls[`axp-preview-${this.service.size()}`] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$3.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$3.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXMenuModule], template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>" }]
+            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXMenuModule], template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>" }]
         }], ctorParameters: () => [], propDecorators: { contextMenu: [{
                 type: ViewChild,
                 args: ['contextMenu']
@@ -1899,8 +1899,8 @@ class AXPDesignerBreadcrumbsComponent {
     handleMouseOver(node) {
         this.service.focus({ widget: node });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerBreadcrumbsComponent, isStandalone: true, selector: "axp-designer-breadcrumbs", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerBreadcrumbsComponent, isStandalone: true, selector: "axp-designer-breadcrumbs", ngImport: i0, template: `
     <ax-breadcrumbs>
       @for( b of service.breadcrumbs();track $index){
       <ax-breadcrumbs-item>
@@ -1911,9 +1911,9 @@ class AXPDesignerBreadcrumbsComponent {
         <i class="ax-icon ax-icon-chevron-right"></i>
       </ng-template>
     </ax-breadcrumbs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$3.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$3.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$3.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$3.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-breadcrumbs',
@@ -1931,19 +1931,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXBreadcrumbsModule, AXDecoratorModule]
+                    imports: [AXPLayoutBuilderModule, AXBreadcrumbsModule, AXDecoratorModule]
                 }]
         }] });
 
 class AXPLayoutDesignerDrawerContentComponent {
     constructor() { }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, AXDecoratorModule], selector: 'axp-designer-drawer-content', template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ imports: [AXDecoratorModule], selector: 'axp-designer-drawer-content', template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: () => [] });
 
 class AXPDesignerDataSourcesComponent {
@@ -1974,13 +1974,12 @@ class AXPDesignerDataSourcesComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerDataSourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerDataSourcesComponent, isStandalone: true, selector: "axp-designer-data-sources", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>Data Sources</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"blank\" class=\"ax-sm\" title=\"Add New Data Source\" (onClick)=\"handleAddClick()\">\n            <ax-icon class=\"fa-light  fa-plus\"></ax-icon>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @if(list().length)\n        {\n        <ul class=\"axp-designer-drawer-list\">\n            @for (item of list(); track $index) {\n            <li>\n                <i class=\"ax-me-1 fa-solid fa-table\"></i>\n                {{ item.title }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">No data source found in the\n            document\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerDataSourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerDataSourcesComponent, isStandalone: true, selector: "axp-designer-data-sources", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>Data Sources</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"blank\" class=\"ax-sm\" title=\"Add New Data Source\" (onClick)=\"handleAddClick()\">\n            <ax-icon class=\"fa-light  fa-plus\"></ax-icon>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @if(list().length)\n        {\n        <ul class=\"axp-designer-drawer-list\">\n            @for (item of list(); track $index) {\n            <li>\n                <i class=\"ax-me-1 fa-solid fa-table\"></i>\n                {{ item.title }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">No data source found in the\n            document\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-data-sources', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
                         AXDecoratorModule,
                         AXButtonModule,
                         AXPLayoutDesignerDrawerContentComponent
@@ -1991,10 +1990,10 @@ class AXPDesignerHistoryComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>History</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"blank\" class=\"ax-sm\">\n            <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n            <ax-dropdown-panel class=\"ax-sm\">\n                <ax-button-item-list>\n                    <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n                </ax-button-item-list>\n            </ax-dropdown-panel>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @if(service.history().length)\n        {\n        <ul class=\"axp-designer-drawer-list\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.navigateTo($index)\" [class.ax-italic]=\"step.isFuture\"\n                [class.ax-text-neutral-400]=\"step.isFuture\" [class.ax-state-selected]=\"step.isCurrent\">\n                <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n                {{ step.description }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">\n            No changes have been made yet.\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>History</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"blank\" class=\"ax-sm\">\n            <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n            <ax-dropdown-panel class=\"ax-sm\">\n                <ax-button-item-list>\n                    <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n                </ax-button-item-list>\n            </ax-dropdown-panel>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @if(service.history().length)\n        {\n        <ul class=\"axp-designer-drawer-list\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.navigateTo($index)\" [class.ax-italic]=\"step.isFuture\"\n                [class.ax-text-neutral-400]=\"step.isFuture\" [class.ax-state-selected]=\"step.isCurrent\">\n                <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n                {{ step.description }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">\n            No changes have been made yet.\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-history', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -2043,29 +2042,28 @@ class AXPDesignerOutlineComponent {
         e.stopPropagation();
         this.service.focus({ widget: node });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>Outline</ax-title>\n\n    <ax-content body>\n        @if(root().children?.length)\n        {\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for( node of root().children;track $index)\n            {\n            <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n            </ng-container>\n            }\n        </ul>\n        <ng-template #sideMenu let-item>\n            <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\">\n                    <span class=\"ax-w-5 \">\n                        @if(item.children?.length)\n                        {\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                            (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n                        }\n                    </span>\n                    @let config = getConfig(item);\n                    <span class=\"ax-w-5\">\n                        @if(config.icon)\n                        {\n                        <i [ngClass]=\"config.icon\"></i>\n                        }\n                    </span>\n                    <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{config.title}} : {{item.name}}</span>\n                    <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2  ax-justify-end \">\n                        @if(config.type=='container')\n                        {\n                        <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n                        }\n                        @if(config.name!=\"page-layout\")\n                        {\n                        <i class=\"fa-light fa-xmark  hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n                        }\n                    </div>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n                    <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                        [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                    </ng-container>\n                </ul>\n                }\n            </li>\n        </ng-template>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">No widgets found in the page\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if(root().children?.length)\n      {\n      <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n        @for( node of root().children;track $index)\n          {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n          <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\">\n            <span class=\"ax-w-5 \">\n              @if(item.children?.length)\n                {\n                <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"ax-w-5\">\n              @if(config.icon)\n                {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{config.title}} : {{item.name}}</span>\n            <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2  ax-justify-end \">\n              @if(config.type=='container')\n                {\n                <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if(config.name!=\"page-layout\")\n                {\n                <i class=\"fa-light fa-xmark  hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if(item.children?.length && !isCollapsed(item)) {\n            <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\"\n                  [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    }\n    @else {\n    <div class=\"axp-designer-drawer-empty\">No widgets found in the page\n    </div>\n  }\n</ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         AXDecoratorModule,
                         AXPLayoutDesignerDrawerContentComponent
-                    ], template: "<axp-designer-drawer-content>\n\n    <ax-title>Outline</ax-title>\n\n    <ax-content body>\n        @if(root().children?.length)\n        {\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for( node of root().children;track $index)\n            {\n            <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n            </ng-container>\n            }\n        </ul>\n        <ng-template #sideMenu let-item>\n            <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\">\n                    <span class=\"ax-w-5 \">\n                        @if(item.children?.length)\n                        {\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                            (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n                        }\n                    </span>\n                    @let config = getConfig(item);\n                    <span class=\"ax-w-5\">\n                        @if(config.icon)\n                        {\n                        <i [ngClass]=\"config.icon\"></i>\n                        }\n                    </span>\n                    <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{config.title}} : {{item.name}}</span>\n                    <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2  ax-justify-end \">\n                        @if(config.type=='container')\n                        {\n                        <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n                        }\n                        @if(config.name!=\"page-layout\")\n                        {\n                        <i class=\"fa-light fa-xmark  hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n                        }\n                    </div>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n                    <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                        [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                    </ng-container>\n                </ul>\n                }\n            </li>\n        </ng-template>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">No widgets found in the page\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>" }]
+                    ], template: "<axp-designer-drawer-content>\n\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if(root().children?.length)\n      {\n      <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n        @for( node of root().children;track $index)\n          {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n          <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\">\n            <span class=\"ax-w-5 \">\n              @if(item.children?.length)\n                {\n                <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"ax-w-5\">\n              @if(config.icon)\n                {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{config.title}} : {{item.name}}</span>\n            <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2  ax-justify-end \">\n              @if(config.type=='container')\n                {\n                <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if(config.name!=\"page-layout\")\n                {\n                <i class=\"fa-light fa-xmark  hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if(item.children?.length && !isCollapsed(item)) {\n            <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\"\n                  [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    }\n    @else {\n    <div class=\"axp-designer-drawer-empty\">No widgets found in the page\n    </div>\n  }\n</ax-content>\n\n</axp-designer-drawer-content>" }]
         }], ctorParameters: () => [] });
 
 class AXPDesignerPagesComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content class=\"ax-text-on-lightest\">\n  <ax-title>Pages</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"ax-text-sm ax-p-2 ax-rounded ax-md ax-space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out hover:ax-bg-dark ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n        [class.ax-bg-darkest]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file ax-me-1\"></i>\n          Page {{ $index + 1 }}\n        </div>\n        <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:ax-text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No pages found in the document</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content class=\"ax-text-on-lightest\">\n  <ax-title>Pages</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"ax-text-sm ax-p-2 ax-rounded ax-md ax-space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out hover:ax-bg-dark ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n        [class.ax-bg-darkest]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file ax-me-1\"></i>\n          Page {{ $index + 1 }}\n        </div>\n        <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:ax-text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No pages found in the document</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-pages', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
                         AXPLayoutBuilderModule,
                         AXDecoratorModule,
                         AXButtonModule,
@@ -2159,12 +2157,12 @@ class AXPDesignerHeaderMenuComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$3.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$3.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$3.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$3.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, AXDecoratorModule, AXMenuModule], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>" }]
+            args: [{ imports: [AXDecoratorModule, AXMenuModule], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>" }]
         }], propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -2174,8 +2172,8 @@ class AXPDesignerViewSizeToolbarComponent {
     constructor() {
         this.size = model('xl');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AXPDesignerViewSizeToolbarComponent, isStandalone: true, selector: "axp-designer-view-sizes", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: AXPDesignerViewSizeToolbarComponent, isStandalone: true, selector: "axp-designer-view-sizes", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, ngImport: i0, template: `
     <ax-button-group [color]="'primary'" [selection]="'multiple'">
       <ax-button-group-item  [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
         <ax-icon class="fa-light fa-desktop fa-fw "></ax-icon>
@@ -2187,13 +2185,13 @@ class AXPDesignerViewSizeToolbarComponent {
         <ax-icon class="fa-light fa-mobile fa-fw "></ax-icon>
       </ax-button-group-item>
     </ax-button-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$4.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$4.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$4.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$4.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-view-sizes',
-                    imports: [CommonModule, AXButtonGroupModule, AXDecoratorModule, AXMenuModule],
+                    imports: [AXButtonGroupModule, AXDecoratorModule, AXMenuModule],
                     template: `
     <ax-button-group [color]="'primary'" [selection]="'multiple'">
       <ax-button-group-item  [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
@@ -2230,10 +2228,10 @@ class AXPLayoutDesignerComponent {
         styles[`direction`] = 'ltr';
         return styles;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [widget]=\"service.selectedNode()!\"\n        style=\"--ax-sys-size-base: 1.875rem\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\"\n        class=\"ax-w-1/4\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [widget]=\"service.selectedNode()!\"\n        style=\"--ax-sys-size-base: 1.875rem\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\"\n        class=\"ax-w-1/4\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-layout-designer', encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
@@ -2305,14 +2303,14 @@ class AXPLayoutDesignerPreviewViewerComponent {
     ngOnDestroy() {
         this.eventService.unsubscribe(AXPDesignerMessageKeys.Preview);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", providers: [AXUnsubscriber], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", providers: [AXUnsubscriber], ngImport: i0, template: `
     <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
       <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
     </axp-widgets-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-layout-builder-viewer',
@@ -2322,7 +2320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     </axp-widgets-container>
   `,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    imports: [AXPLayoutBuilderModule],
                     providers: [AXUnsubscriber],
                 }]
         }], ctorParameters: () => [] });
@@ -2356,8 +2354,8 @@ class AXPLayoutDesignerPreviewFrameComponent {
         cls['ax-overflow-auto'] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AXPLayoutDesignerPreviewFrameComponent, isStandalone: true, selector: "axp-layout-preview-frame", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: AXPLayoutDesignerPreviewFrameComponent, isStandalone: true, selector: "axp-layout-preview-frame", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
     <div
       class="ax-flex-1 lg:ax-rounded-lg ax-bg-white lg:ax-shadow-md   ax-p-2"
       [style.width]="width()"
@@ -2372,7 +2370,7 @@ class AXPLayoutDesignerPreviewFrameComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-layout-preview-frame',
@@ -2439,20 +2437,19 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
     async handleCollapsedChange(value) {
         await this.settings.scope(AXPPlatformScope.User).set(this.jsonSettingsKey, !value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-layout-preview', encapsulation: ViewEncapsulation.None, imports: [
-                        CommonModule,
                         AXButtonModule,
                         AXButtonGroupModule,
                         AXDrawerModule,
                         AXDecoratorModule,
                         AXJsonViewerModule,
                         AXPLayoutDesignerPreviewFrameComponent,
-                        AXPDesignerViewSizeToolbarComponent,
+                        AXPDesignerViewSizeToolbarComponent
                     ], template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>" }]
         }], ctorParameters: () => [] });