@acorex/platform 18.1.0 → 18.1.1

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

@@ -6,11 +6,11 @@ import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i3 from '@acorex/platform/layout/builder';
 import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN } from '@acorex/platform/layout/builder';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
+import { AXFileService } from '@acorex/core/file';
 import { merge, cloneDeep, sortBy, set, get, capitalize, unionBy, isArray, isNil, isEmpty } from 'lodash-es';
 import { Subject, first, merge as merge$1 } from 'rxjs';
-import { AXFileService } from '@acorex/core/file';
-import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import * as i5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i3$1 from '@acorex/components/drawer';
@@ -291,6 +291,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
+class AXPDesignerModes {
+    static { this.View = { id: 'view', title: 'View' }; }
+    static { this.Design = { id: 'designer', title: 'Designer' }; }
+    static { this.Edit = { id: 'edit', title: 'Edit' }; }
+}
+
 class AXPDesignerService {
     constructor() {
         this.popupService = inject(AXPopupService);
@@ -313,7 +319,7 @@ class AXPDesignerService {
         this.selectedNode = signal(null);
         this._focusedNode = null;
         this.focusedNode = () => this._focusedNode;
-        this.mode = signal('designer');
+        this.mode = signal(AXPDesignerModes.Design);
         this.size = signal('xl');
         this.onSelected = new Subject();
         this.onRefresh = new Subject();
@@ -509,7 +515,8 @@ class AXPDesignerService {
         return cloned;
     }
     removeWidget(node) {
-        if (node.type === 'document-layout' || (node.type === 'page-layout' && (this.document().children?.length ?? 1) == 1)) {
+        if (node.type === 'document-layout' ||
+            (node.type === 'page-layout' && (this.document().children?.length ?? 1) == 1)) {
             console.error('Cannot remove the page node.');
             return; // Prevent removing the root page node or document
         }
@@ -629,7 +636,7 @@ class AXPDesignerService {
         const setNameId = (node) => {
             set(node, 'name', this.generateUniqueName(node.type));
             set(node, '__meta__.id', this.generateUniqueId());
-            node.children?.forEach(n => {
+            node.children?.forEach((n) => {
                 setNameId(n);
             });
         };
@@ -674,7 +681,7 @@ class AXPDesignerService {
             const totalNode = this.countTotalNodes(rootNode);
             const processedNodes = { count: 0 };
             const button = {
-                text: "Cancel",
+                text: 'Cancel',
                 autofocus: true,
                 color: 'primary',
                 onClick: (e) => {
@@ -683,26 +690,24 @@ class AXPDesignerService {
             };
             const dialog = this.loadingService.show({
                 mode: 'determinate',
-                title: "Import Json File",
+                title: 'Import Json File',
                 progressColor: 'primary',
-                text: "Processing json file",
+                text: 'Processing json file',
                 status: `0 of ${totalNode}`,
-                buttons: [
-                    button
-                ]
+                buttons: [button],
             });
             try {
                 const root = await this.addMetaToNodes(rootNode, processedNodes, (count) => {
-                    dialog.setProgressValue(Math.ceil(count / totalNode * 100));
+                    dialog.setProgressValue(Math.ceil((count / totalNode) * 100));
                     dialog.setProgressStatus(`${count} of ${totalNode}`);
                 });
                 const page = root.children?.[0];
                 this.document.set(root);
                 this.currentPage.set(page);
-                dialog.setProgressColor("success");
-                dialog.setProgressText("Json file processed successfully");
-                button.text = "Okay";
-                button.color = "success";
+                dialog.setProgressColor('success');
+                dialog.setProgressText('Json file processed successfully');
+                button.text = 'Okay';
+                button.color = 'success';
                 dialog.setProgressValue(100);
                 setTimeout(() => {
                     this.reRenderPage();
@@ -710,10 +715,10 @@ class AXPDesignerService {
                 }, 1000);
             }
             catch (error) {
-                dialog.setProgressColor("danger");
-                dialog.setProgressText(error instanceof Error ? error.message : "Cannot process json file");
-                button.text = "Close";
-                button.color = "danger";
+                dialog.setProgressColor('danger');
+                dialog.setProgressText(error instanceof Error ? error.message : 'Cannot process json file');
+                button.text = 'Close';
+                button.color = 'danger';
             }
         }
     }
@@ -1210,7 +1215,7 @@ class AXPDesignerBoardComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, ngImport: i0, template: "<axp-widgets-container [(context)]=\"context\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode()\"></ng-container>\n</axp-widgets-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, ngImport: i0, template: "<axp-widgets-container [(context)]=\"context\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode().id\"></ng-container>\n</axp-widgets-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
@@ -1218,7 +1223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         CommonModule,
                         AXPLayoutBuilderModule,
                         AXPWidgetDesignerRendererDirective
-                    ], template: "<axp-widgets-container [(context)]=\"context\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode()\"></ng-container>\n</axp-widgets-container>" }]
+                    ], template: "<axp-widgets-container [(context)]=\"context\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode().id\"></ng-container>\n</axp-widgets-container>" }]
         }], propDecorators: { __style: [{
                 type: HostBinding,
                 args: ['style']
@@ -1414,7 +1419,7 @@ class AXPDesignerHeaderMenuComponent {
         this.service = inject(AXPDesignerService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item>\n        <ax-text>Home</ax-text>\n        <ax-menu-item (onClick)=\"service.new()\">\n            <ax-text>New</ax-text>\n            <ax-suffix>\n                <ax-text>\n                    Shift+N\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\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>\n                    Ctrl+Z\n                </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>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\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>\n                    Ctrl+X\n                </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>\n                    Ctrl+C\n                </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>\n                    Ctrl+V\n                </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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items"], outputs: ["onItemClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item>\n        <ax-text>Home</ax-text>\n        <ax-menu-item (onClick)=\"service.new()\">\n            <ax-text>New</ax-text>\n            <ax-suffix>\n                <ax-text>\n                    Shift+N\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\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>\n                    Ctrl+Z\n                </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>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\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>\n                    Ctrl+X\n                </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>\n                    Ctrl+C\n                </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>\n                    Ctrl+V\n                </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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items"], outputs: ["onItemClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
@@ -1422,7 +1427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         CommonModule,
                         AXDecoratorModule,
                         AXMenuModule,
-                    ], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item>\n        <ax-text>Home</ax-text>\n        <ax-menu-item (onClick)=\"service.new()\">\n            <ax-text>New</ax-text>\n            <ax-suffix>\n                <ax-text>\n                    Shift+N\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\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>\n                    Ctrl+Z\n                </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>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\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>\n                    Ctrl+X\n                </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>\n                    Ctrl+C\n                </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>\n                    Ctrl+V\n                </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>" }]
+                    ], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item>\n        <ax-text>Home</ax-text>\n        <ax-menu-item (onClick)=\"service.new()\">\n            <ax-text>New</ax-text>\n            <ax-suffix>\n                <ax-text>\n                    Shift+N\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\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>\n                    Ctrl+Z\n                </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>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\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>\n                    Ctrl+X\n                </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>\n                    Ctrl+C\n                </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>\n                    Ctrl+V\n                </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>" }]
         }] });
 
 class AXPLayoutDesignerComponent {
@@ -1433,6 +1438,9 @@ class AXPLayoutDesignerComponent {
             this.propertyViewer.update(e.values);
         });
     }
+    changeMode(mode) {
+        this.service.mode.set(AXPDesignerModes[mode]);
+    }
     handleKeyboardEvent(event) {
         if (event.shiftKey && event.target == document.body) {
             switch (event.key.toLowerCase()) {
@@ -1467,7 +1475,7 @@ class AXPLayoutDesignerComponent {
                     break;
                 case 'x':
                     if (this.service.canCutCopy()) {
-                        debugger;
+                        // debugger;
                         event.preventDefault();
                         this.service.cut();
                     }
@@ -1482,7 +1490,7 @@ class AXPLayoutDesignerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, 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 ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\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.png\" 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 color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" 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-surface ax-border-b  ax-flex ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-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\">\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\">\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\">\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\">\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-h-screen ax-bg-on-surface ax-flex ax-justify-center\">\n          <axp-designer-board> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\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-w-80 ax-border-s\" 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-py-2 ax-px-4 ax-border-b\">\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 [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.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%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}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))}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)}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))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-700),var(--tw-bg-opacity))}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))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.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"], 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: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "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", "collapsed", "closeOthers"], 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, 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 ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center\">\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.png\" 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 color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" 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-surface ax-border-b ax-flex ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button [text]=\"service.mode().title\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item (onClick)=\"changeMode('Design')\" text=\"Designer\" name=\"designer\"> </ax-button-item>\n                <ax-button-item (onClick)=\"changeMode('View')\" text=\"View\" name=\"view\"> </ax-button-item>\n                <ax-button-item (onClick)=\"changeMode('Edit')\" text=\"Edit\" name=\"edit\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-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\">\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\">\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\">\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\">\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-h-screen ax-bg-on-surface ax-flex ax-justify-center\">\n          <axp-designer-board> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-t ax-flex ax-items-center\">\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-w-80 ax-border-s\" 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-py-2 ax-px-4 ax-border-b\">\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        (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-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.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%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}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))}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)}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))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-700),var(--tw-bg-opacity))}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))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.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"], 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: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "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", "collapsed", "closeOthers"], 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -1504,7 +1512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXMenuModule,
                         AXButtonGroupModule,
                         AXDropdownModule,
-                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative  ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\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.png\" 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 color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" 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-surface ax-border-b  ax-flex ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-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\">\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\">\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\">\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\">\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-h-screen ax-bg-on-surface ax-flex ax-justify-center\">\n          <axp-designer-board> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\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-w-80 ax-border-s\" 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-py-2 ax-px-4 ax-border-b\">\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 [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.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%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}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))}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)}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))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-700),var(--tw-bg-opacity))}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))}\n"] }]
+                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center\">\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.png\" 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 color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" (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 color=\"ghost\" look=\"twotone\" 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-surface ax-border-b ax-flex ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button [text]=\"service.mode().title\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item (onClick)=\"changeMode('Design')\" text=\"Designer\" name=\"designer\"> </ax-button-item>\n                <ax-button-item (onClick)=\"changeMode('View')\" text=\"View\" name=\"view\"> </ax-button-item>\n                <ax-button-item (onClick)=\"changeMode('Edit')\" text=\"Edit\" name=\"edit\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-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\">\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\">\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\">\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\">\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-h-screen ax-bg-on-surface ax-flex ax-justify-center\">\n          <axp-designer-board> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-t ax-flex ax-items-center\">\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-w-80 ax-border-s\" 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-py-2 ax-px-4 ax-border-b\">\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        (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-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.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%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}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))}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)}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))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-700),var(--tw-bg-opacity))}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))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { propertyViewer: [{
                 type: ViewChild,
                 args: [AXPWidgetPropertyViewerComponent, { static: true }]
@@ -1517,5 +1525,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerConnectorAbstract, AXPDesignerGridDrawerComponent, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererDirective, AXPWidgetPropertyViewerComponent };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerConnectorAbstract, AXPDesignerGridDrawerComponent, AXPDesignerModes, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererDirective, AXPWidgetPropertyViewerComponent };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map