@acorex/platform 18.2.0 → 18.2.2

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

@@ -3,13 +3,14 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$3 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPContainerWidgetComponent, AXP_WIDGETS_GROUPS, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN } from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPContainerWidgetComponent, AXP_WIDGETS_GROUPS, AXPWidgetDataSourceProviderService, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN } from '@acorex/platform/layout/builder';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, input, output, HostBinding, model, HostListener, EventEmitter, effect, untracked, Output, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
+import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, HostBinding, model, HostListener, EventEmitter, untracked, Output, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
+import { AXToastService } from '@acorex/components/toast';
 import { AXFileService } from '@acorex/core/file';
-import { merge, cloneDeep, sortBy, set, get, orderBy, capitalize, unionBy, isArray, isNil, isEmpty } from 'lodash-es';
+import { merge, cloneDeep, assign, get, sortBy, set, orderBy, capitalize, unionBy, isArray, isNil, isEmpty } from 'lodash-es';
 import { Subject, first, merge as merge$1 } from 'rxjs';
 import * as i2$1 from '@acorex/components/common';
 import { AXCommonModule } from '@acorex/components/common';
@@ -29,7 +30,7 @@ import * as i3$1 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i6$1 from '@acorex/components/dropdown-button';
+import * as i5 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import * as i2$2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
@@ -224,41 +225,107 @@ 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 AXPDesignerConnector {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerConnector }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerConnector, decorators: [{
+            type: Injectable
+        }] });
+
+const AXP_DESIGNER_COPY_MENU = {
+    text: 'Copy',
+    name: 'copy',
+    icon: 'fa-solid fa-copy',
+    suffix: {
+        text: 'Ctrl+C',
+    },
+};
+const AXP_DESIGNER_CLONE_MENU = {
+    text: 'Clone',
+    name: 'clone',
+    icon: 'fa-solid fa-clone',
+    suffix: {
+        text: 'Ctrl+D',
+    },
+};
+const AXP_DESIGNER_CUT_MENU = {
+    text: 'Cut',
+    name: 'cut',
+    icon: 'fa-solid fa-cut',
+    suffix: {
+        text: 'Ctrl+X',
+    },
+};
+const AXP_DESIGNER_PASTE_MENU = {
+    text: 'Paste',
+    name: 'paste',
+    icon: 'fa-solid fa-paste',
+    suffix: {
+        text: 'Ctrl+V',
+    },
+};
+const AXP_DESIGNER_ADD_WIDGET_MENU = {
+    text: 'Add Widget',
+    name: 'add-widget',
+    icon: 'fa-solid fa-plus',
+};
+const AXP_DESIGNER_DELETE_WIDGET_MENU = {
+    text: 'Remove Widget',
+    name: 'remove-widget',
+    icon: 'fa-solid fa-trash',
+};
+const AXP_DESIGNER_SAVE_AS_WIDGET_MENU = {
+    text: 'Save As...',
+    name: 'save-as',
+    icon: 'fa-solid fa-save',
+};
+function cloneWidgetMenu(item, options) {
+    return assign(cloneDeep(item), options);
 }
 
 class AXPDesignerService {
+    #ef;
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.toastService = inject(AXToastService);
         this.fileService = inject(AXFileService);
         this.loadingService = inject(AXLoadingDialogService);
         this.widgetRegisteryService = inject(AXPWidgetRegistryService);
+        this.connector = inject(AXPDesignerConnector);
         this.channel = new BroadcastChannel('livePreviewChannel');
         this.document = signal(this.createDoc());
         this.currentPageIndex = signal(0);
         this.currentPage = signal(this.document().children?.[0]);
         this.commandManager = inject(CommandManager);
         this.clipboard = signal(null);
-        this.canCutCopy = computed(() => this.selectedNode() != null && this.selectedNode()?.name != 'page');
+        //
+        this.canCutCopy = computed(() => this.selectedNode() != null && this.selectedNode()?.type != 'page-layout');
+        this.canDelete = computed(() => this.selectedNode() != null && this.selectedNode()?.type != 'page-layout');
+        this.canInsert = computed(() => this.selectedNode() != null && this.selectedNodeConfig().type == 'container');
         this.canPaste = computed(() => this.clipboard() != null);
+        //
         this.history = computed(() => this.commandManager.history());
         this.canUndo = computed(() => this.commandManager.canUndo());
         this.canRedo = computed(() => this.commandManager.canRedo());
+        //
+        this.canSave = computed(() => this.templateId() != null);
         this.breadcrumbs = computed(() => {
             return this.selectedNode() ? this.findBreadcrumbs(this.currentPage(), this.selectedNode()) ?? [] : [];
         });
         this.selectedNode = signal(null);
+        this.selectedNodeConfig = computed(() => get(this.selectedNode(), '__meta__.config'));
         this._focusedNode = null;
         this.focusedNode = () => this._focusedNode;
-        this.mode = signal(AXPDesignerModes.Design);
         this.size = signal('xl');
         this.onSelected = new Subject();
         this.onRefresh = new Subject();
         this.onUpdate = new Subject();
         this.onFocused = new Subject();
+        this.templateId = signal(null);
+        this.#ef = effect(() => {
+            this.refresh({ widget: this.currentPage() });
+        }, { allowSignalWrites: true });
         this.channelCallback = (message) => {
             if (message.data.action == 'designer-preview-loaded') {
                 this.updatePreview();
@@ -314,7 +381,7 @@ class AXPDesignerService {
         // Return undefined if no match is found
         return undefined;
     }
-    async showPicker(currentNode) {
+    async showPicker(currentNode = this.selectedNode()) {
         const com = await Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent);
         const result = await this.popupService.open(com, {
             title: 'Widget Gallery',
@@ -375,11 +442,11 @@ class AXPDesignerService {
     }
     goToPage(index) {
         this.currentPageIndex.set(index);
-        setTimeout(() => {
-            this.currentPage.set(this.document().children?.[this.currentPageIndex()]);
-            this.select({ widget: this.currentPage() });
-            this.updatePreview();
-        });
+        //setTimeout(() => {
+        this.currentPage.set(this.document().children?.[this.currentPageIndex()]);
+        this.select({ widget: this.currentPage() });
+        //this.updatePreview();
+        //});
     }
     reRenderPage() {
         this.currentPage.set({ ...this.currentPage() });
@@ -458,7 +525,7 @@ class AXPDesignerService {
         this.select({ widget: cloned });
         return cloned;
     }
-    removeWidget(node) {
+    removeWidget(node = this.selectedNode()) {
         if (node.type === 'document-layout' ||
             (node.type === 'page-layout' && (this.document().children?.length ?? 1) == 1)) {
             console.error('Cannot remove the page node.');
@@ -540,15 +607,15 @@ class AXPDesignerService {
         return node;
     }
     copy(widget = this.selectedNode()) {
-        if (!widget)
-            return;
-        this.clipboard.set(cloneDeep(widget)); // Use lodash's cloneDeep to ensure a deep copy
+        if (this.canCutCopy()) {
+            this.clipboard.set(cloneDeep(widget)); // Use lodash's cloneDeep to ensure a deep copy
+        }
     }
     cut(widget = this.selectedNode()) {
-        if (!widget)
-            return;
-        this.copy(widget); // Copy the widget to the clipboard
-        this.removeWidget(widget); // Reuse the removeWidget method which should handle undo internally
+        if (this.canCutCopy()) {
+            this.copy(widget); // Copy the widget to the clipboard
+            this.removeWidget(widget); // Reuse the removeWidget method which should handle undo internally
+        }
     }
     clone(widget = this.selectedNode()) {
         if (!widget)
@@ -593,8 +660,23 @@ class AXPDesignerService {
             this.select({ widget: newNode }); // Select the newly pasted node
         });
     }
-    export() {
-        const json = this.removeMetaProp(this.document());
+    async save() {
+        if (this.templateId()) {
+            const content = this.export();
+            await this.connector.save(this.templateId(), { json: content });
+            this.toastService.success('Your changes saved successfully');
+        }
+        else {
+            this.downloadJson();
+        }
+    }
+    async saveAs(node = this.document()) {
+        const content = this.export(node);
+        await this.connector.saveAs({ json: content });
+        this.toastService.success('Your changes saved successfully');
+    }
+    export(node = this.document()) {
+        const json = this.removeMetaProp(node);
         return JSON.stringify(json);
     }
     downloadJson() {
@@ -616,54 +698,69 @@ class AXPDesignerService {
         URL.revokeObjectURL(url);
         document.body.removeChild(a);
     }
+    async loadById(id) {
+        try {
+            const content = await this.connector.load(id);
+            this.templateId.set(id);
+            if (content) {
+                await this.loadByContent(content);
+            }
+        }
+        catch (error) {
+            this.toastService.danger(error.message);
+        }
+    }
     async importJSon() {
         const files = await this.fileService.choose({ multiple: false, accept: 'application/json' });
         if (files && files.length) {
             const file = files[0];
             const content = await file.text();
-            const rootNode = JSON.parse(content);
-            const totalNode = this.countTotalNodes(rootNode);
-            const processedNodes = { count: 0 };
-            const button = {
-                text: 'Cancel',
-                autofocus: true,
-                color: 'primary',
-                onClick: (e) => {
-                    dialog.close();
-                },
-            };
-            const dialog = this.loadingService.show({
-                mode: 'determinate',
-                title: 'Import Json File',
-                progressColor: 'primary',
-                text: 'Processing json file',
-                status: `0 of ${totalNode}`,
-                buttons: [button],
+            await this.loadByContent(content);
+        }
+    }
+    async loadByContent(content) {
+        const rootNode = JSON.parse(content);
+        const totalNode = this.countTotalNodes(rootNode);
+        const processedNodes = { count: 0 };
+        const button = {
+            text: 'Cancel',
+            autofocus: true,
+            color: 'primary',
+            onClick: (e) => {
+                dialog.close();
+            },
+        };
+        const dialog = this.loadingService.show({
+            mode: 'determinate',
+            title: 'Loading Content',
+            progressColor: 'primary',
+            text: 'Processing content',
+            status: `0 of ${totalNode}`,
+            buttons: [button],
+        });
+        try {
+            const root = await this.addMetaToNodes(rootNode, processedNodes, (count) => {
+                dialog.setProgressValue(Math.ceil((count / totalNode) * 100));
+                dialog.setProgressStatus(`${count} of ${totalNode}`);
             });
-            try {
-                const root = await this.addMetaToNodes(rootNode, processedNodes, (count) => {
-                    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.setProgressValue(100);
-                setTimeout(() => {
-                    this.reRenderPage();
-                    dialog.close();
-                }, 1000);
-            }
-            catch (error) {
-                dialog.setProgressColor('danger');
-                dialog.setProgressText(error instanceof Error ? error.message : 'Cannot process json file');
-                button.text = 'Close';
-                button.color = 'danger';
-            }
+            const page = root.children?.[0];
+            this.document.set(root);
+            this.currentPage.set(page);
+            dialog.setProgressColor('success');
+            dialog.setProgressText('Content loaded successfully');
+            button.text = 'Okay';
+            button.color = 'success';
+            dialog.setProgressValue(100);
+            setTimeout(() => {
+                this.reRenderPage();
+                dialog.close();
+            }, 500);
+        }
+        catch (error) {
+            dialog.setProgressColor('danger');
+            dialog.setProgressText(error instanceof Error ? error.message : 'Cannot load content');
+            button.text = 'Close';
+            button.color = 'danger';
         }
     }
     countTotalNodes(node) {
@@ -721,6 +818,56 @@ class AXPDesignerService {
     openPreviewWindow() {
         window.open('/forms/preview', '_blank');
     }
+    getContextMenuItems() {
+        const items = [];
+        //       
+        if (this.canInsert()) {
+            items.push(cloneWidgetMenu(AXP_DESIGNER_ADD_WIDGET_MENU, {
+                disabled: !this.canInsert(), break: true
+            }));
+        }
+        //
+        items.push(cloneWidgetMenu(AXP_DESIGNER_CLONE_MENU, { disabled: !this.canCutCopy() }));
+        items.push(cloneWidgetMenu(AXP_DESIGNER_CUT_MENU, { disabled: !this.canCutCopy() }));
+        items.push(cloneWidgetMenu(AXP_DESIGNER_COPY_MENU, { disabled: !this.canCutCopy() }));
+        items.push(cloneWidgetMenu(AXP_DESIGNER_PASTE_MENU, { disabled: !this.canPaste(), break: true }));
+        //
+        items.push(cloneWidgetMenu(AXP_DESIGNER_DELETE_WIDGET_MENU, { disabled: !this.canDelete(), break: true }));
+        //
+        items.push(cloneWidgetMenu(AXP_DESIGNER_SAVE_AS_WIDGET_MENU));
+        return items;
+    }
+    executeCommand(name, data) {
+        switch (name) {
+            case AXP_DESIGNER_ADD_WIDGET_MENU.name: {
+                this.showPicker();
+                break;
+            }
+            //
+            case AXP_DESIGNER_DELETE_WIDGET_MENU.name: {
+                this.removeWidget();
+                break;
+            }
+            //
+            case AXP_DESIGNER_CLONE_MENU.name: {
+                this.clone();
+                break;
+            }
+            case AXP_DESIGNER_CUT_MENU.name: {
+                this.cut();
+                break;
+            }
+            case AXP_DESIGNER_COPY_MENU.name: {
+                this.copy();
+                break;
+            }
+            case AXP_DESIGNER_PASTE_MENU.name: {
+                this.paste();
+                break;
+            }
+            //
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerService }); }
 }
@@ -894,7 +1041,7 @@ class AXPDesignerGridDrawerComponent {
             </tr>
         </tbody>
     </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-color-border-default),var(--tw-border-opacity));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-color-border-default),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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-color-border-default),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-color-border-default),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
             type: Component,
@@ -918,7 +1065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             </tr>
         </tbody>
     </table>
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], 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-color-border-default),var(--tw-border-opacity));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-color-border-default),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity))}\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], 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-color-border-default),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-color-border-default),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity, 1))}\n"] }]
         }], propDecorators: { handleMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
@@ -1012,7 +1159,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         this.close({ widgets: this.selectedWidgets() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n    <div>\n        <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n            @for(w of tabs;track $index)\n            {\n            <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\"\n                [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n            }\n        </ax-tabs>\n    </div>\n    <div class=\"ax-overflow-auto\" #content>\n        <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all \" #sticky=\"axpSticky\"\n            [axpSticky]=\"'ax-bg-surface ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n            <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n                [axAutoFocus]=\"true\">\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                <div (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-100 dark:hover:ax-bg-primary-800 ax-cursor-pointer\"\n                    [class.ax-bg-primary-100]=\"isWidgetSelected(w)\">\n                    <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-neutral-200 ax-text-neutral-500 ax-bg-on-surface  group-hover:ax-bg-primary-200\"\n                        [class.ax-bg-primary-200]=\"isWidgetSelected(w)\">\n                        <i [ngClass]=\"w.icon\" class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n                            [class.ax-text-primary-700]=\"isWidgetSelected(w)\"></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-text-neutral-500 ax-rotate-45\"></i>\n                                }\n                                @else {\n                                <i\n                                    class=\"fa-light fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                                }\n                            </div>\n                        </div>\n                        <span class=\"ax-text-xs ax-text-neutral-400 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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n            @if(pinnedList().length)\n            {\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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n@if(selectedWidgets().length)\n{\n<ax-footer>\n    <ax-suffix>\n        <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n            (onClick)=\"handleConfirmSelection()\"></ax-button>\n    </ax-suffix>\n</ax-footer>\n}", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-500),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity))}\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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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", "delayTime"], 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n    <div>\n        <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n            @for(w of tabs;track $index)\n            {\n            <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\"\n                [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n            }\n        </ax-tabs>\n    </div>\n    <div class=\"ax-overflow-auto\" #content>\n        <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all \" #sticky=\"axpSticky\"\n            [axpSticky]=\"'ax-bg-surface ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n            <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n                [axAutoFocus]=\"true\">\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                <div (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-100 dark:hover:ax-bg-primary-800 ax-cursor-pointer\"\n                    [class.ax-bg-primary-100]=\"isWidgetSelected(w)\">\n                    <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-neutral-200 ax-text-neutral-500 ax-bg-on-surface  group-hover:ax-bg-primary-200\"\n                        [class.ax-bg-primary-200]=\"isWidgetSelected(w)\">\n                        <i [ngClass]=\"w.icon\" class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n                            [class.ax-text-primary-700]=\"isWidgetSelected(w)\"></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-text-neutral-500 ax-rotate-45\"></i>\n                                }\n                                @else {\n                                <i\n                                    class=\"fa-light fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                                }\n                            </div>\n                        </div>\n                        <span class=\"ax-text-xs ax-text-neutral-400 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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n            @if(pinnedList().length)\n            {\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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n@if(selectedWidgets().length)\n{\n<ax-footer>\n    <ax-suffix>\n        <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n            (onClick)=\"handleConfirmSelection()\"></ax-button>\n    </ax-suffix>\n</ax-footer>\n}", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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", "delayTime"], 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: "18.2.0", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
@@ -1025,7 +1172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXTabsModule,
                         AXSearchBoxModule,
                         AXPStickyDirective,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n    <div>\n        <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n            @for(w of tabs;track $index)\n            {\n            <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\"\n                [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n            }\n        </ax-tabs>\n    </div>\n    <div class=\"ax-overflow-auto\" #content>\n        <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all \" #sticky=\"axpSticky\"\n            [axpSticky]=\"'ax-bg-surface ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n            <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n                [axAutoFocus]=\"true\">\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                <div (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-100 dark:hover:ax-bg-primary-800 ax-cursor-pointer\"\n                    [class.ax-bg-primary-100]=\"isWidgetSelected(w)\">\n                    <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-neutral-200 ax-text-neutral-500 ax-bg-on-surface  group-hover:ax-bg-primary-200\"\n                        [class.ax-bg-primary-200]=\"isWidgetSelected(w)\">\n                        <i [ngClass]=\"w.icon\" class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n                            [class.ax-text-primary-700]=\"isWidgetSelected(w)\"></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-text-neutral-500 ax-rotate-45\"></i>\n                                }\n                                @else {\n                                <i\n                                    class=\"fa-light fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                                }\n                            </div>\n                        </div>\n                        <span class=\"ax-text-xs ax-text-neutral-400 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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n            @if(pinnedList().length)\n            {\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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n@if(selectedWidgets().length)\n{\n<ax-footer>\n    <ax-suffix>\n        <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n            (onClick)=\"handleConfirmSelection()\"></ax-button>\n    </ax-suffix>\n</ax-footer>\n}", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-500),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity))}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n    <div>\n        <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n            @for(w of tabs;track $index)\n            {\n            <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\"\n                [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n            }\n        </ax-tabs>\n    </div>\n    <div class=\"ax-overflow-auto\" #content>\n        <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all \" #sticky=\"axpSticky\"\n            [axpSticky]=\"'ax-bg-surface ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n            <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n                [axAutoFocus]=\"true\">\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                <div (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-100 dark:hover:ax-bg-primary-800 ax-cursor-pointer\"\n                    [class.ax-bg-primary-100]=\"isWidgetSelected(w)\">\n                    <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-neutral-200 ax-text-neutral-500 ax-bg-on-surface  group-hover:ax-bg-primary-200\"\n                        [class.ax-bg-primary-200]=\"isWidgetSelected(w)\">\n                        <i [ngClass]=\"w.icon\" class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n                            [class.ax-text-primary-700]=\"isWidgetSelected(w)\"></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-text-neutral-500 ax-rotate-45\"></i>\n                                }\n                                @else {\n                                <i\n                                    class=\"fa-light fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                                }\n                            </div>\n                        </div>\n                        <span class=\"ax-text-xs ax-text-neutral-400 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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n            @if(pinnedList().length)\n            {\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                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n@if(selectedWidgets().length)\n{\n<ax-footer>\n    <ax-suffix>\n        <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n            (onClick)=\"handleConfirmSelection()\"></ax-button>\n    </ax-suffix>\n</ax-footer>\n}", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity, 1))}\n"] }]
         }] });
 
 var widgetPicker_component = /*#__PURE__*/Object.freeze({
@@ -1037,7 +1184,8 @@ class AXPWidgetPropertyViewerComponent {
     constructor() {
         this.widget = input.required();
         this.widgetRegistryService = inject(AXPWidgetRegistryService);
-        this.connector = inject(AXPDesignerConnectorAbstract);
+        this.connector = inject(AXPDesignerConnector);
+        this.dataSourceProvider = inject(AXPWidgetDataSourceProviderService);
         this.currentTabIndex = signal(0);
         this.config = signal(null);
         this.allPoperties = [];
@@ -1127,8 +1275,8 @@ class AXPWidgetPropertyViewerComponent {
     handleCollapsedChange(group, collapsed) {
         this.groupCollapsedStates.set(group, collapsed);
     }
-    getDataSourceNames() {
-        return this.connector.getDataSourcesNames();
+    async getDataSourceNames() {
+        return (await this.dataSourceProvider.items()).map(c => ({ id: c.name, title: c.title }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\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=\"blank\">\n                @for( group of groups();track $index){\n                <ax-collapse [caption]=\"group.title\" look=\"solid\" [(isCollapsed)]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name,$event)\">\n                    <div class=\"ax-flex ax-flex-col ax-divide-y\">\n                        @for( p of group.props;track $index){\n                        <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2 first:ax-pt-0 last:ax-pb-0\">\n                            <span class=\"ax-font-semibold\">{{p.title}}</span>\n                            @if(p.schema.interface)\n                            {\n                            <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </ax-collapse>\n                }\n            </ax-collapse-group>\n        </div>\n    </div>\n</axp-widgets-container>", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$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$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1168,10 +1316,10 @@ class AXPWidgetDesignerRendererDirective {
         this.service.onSelected.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             this.zone.runOutsideAngular(() => {
                 if (this.isCurrentWidget(c.widget)) {
-                    this.select();
+                    this.applySelectedStyle();
                 }
                 else {
-                    this.unselect();
+                    this.removeSelectedStyle();
                 }
             });
         });
@@ -1191,17 +1339,21 @@ class AXPWidgetDesignerRendererDirective {
             }
         });
         //
-        effect(async () => {
-            await this.loadComponent();
-        }, { allowSignalWrites: true });
+    }
+    // Detect input changes
+    ngOnChanges(changes) {
+        if (changes['mode'] || changes['node']) {
+            // Check if either 'mode' or 'node' has changed
+            this.loadComponent();
+        }
     }
     async loadComponent() {
         this.viewContainerRef.clear();
         this.isLoading.set(true);
         this.config = this.widgetRegistery.resolve(this.node().type);
         //
-        const props = this.config?.components[this.mode()]?.properties
-            ?.filter((c) => c.schema.defaultValue)
+        const props = [...(this.config?.properties ?? []), ...(this.config?.components[this.mode()]?.properties ?? [])]
+            ?.filter((c) => c.schema.defaultValue != null)
             .map((c) => ({ [c.name]: c.schema.defaultValue }))
             .reduce((acc, curr) => {
             return { ...acc, ...curr };
@@ -1232,21 +1384,23 @@ class AXPWidgetDesignerRendererDirective {
         //
         this.instance.onReady.pipe(first()).subscribe(() => {
             const host = this.hostElement();
-            host.classList.add("axp-widget-host");
+            set(host, '__meta__.renderer', this);
+            set(host, '__meta__.instance', this.instance);
+            host.classList.add('axp-widget-host');
             if (this.mode() == 'designer') {
                 host.addEventListener('mouseover', (e) => {
                     e.stopPropagation();
                     this.addOverlay();
-                    this.service.focus({ widget: this.node() });
+                    this.focus();
                 });
                 host.addEventListener('mouseleave', (e) => {
                     e.stopPropagation();
                     this.removeOverlay();
-                    this.service.focus({ widget: null });
+                    this.blur();
                 });
                 host.addEventListener('click', (e) => {
                     e.stopPropagation();
-                    this.select();
+                    this.applySelectedStyle();
                     this.service.select({ widget: this.node() });
                 });
                 this.service.register({
@@ -1259,10 +1413,20 @@ class AXPWidgetDesignerRendererDirective {
         });
     }
     select() {
+        this.service.select({ widget: this.node() });
+        this.applySelectedStyle();
+    }
+    focus() {
+        this.service.focus({ widget: this.node() });
+    }
+    blur() {
+        this.service.focus({ widget: null });
+    }
+    applySelectedStyle() {
         this.hostElement()?.classList.add('axp-state-selected');
         this.hostElement()?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
-    unselect() {
+    removeSelectedStyle() {
         this.hostElement()?.classList.remove('axp-state-selected');
     }
     addOverlay() {
@@ -1273,18 +1437,17 @@ class AXPWidgetDesignerRendererDirective {
                 if (this.hostElement().querySelector('.axp-widget-overlay') || this.config?.type == 'container') {
                     return;
                 }
-                ;
                 this.overlay = document.createElement('div');
                 this.overlay.classList.add('axp-widget-overlay');
                 this.overlay.addEventListener('click', (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    this.service.select({ widget: this.node() });
+                    this.select();
                 });
                 this.overlay.addEventListener('mouseleave', (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    this.service.focus({ widget: null });
+                    this.blur();
                 });
                 this.hostElement().appendChild(this.overlay);
             }
@@ -1318,27 +1481,12 @@ class AXPWidgetDesignerRendererDirective {
         });
         this.instance?.setOptions(this.mergedOptions());
     }
-    async onKeydownHandler(event) {
-        if (this.service.selectedNode() && this.isCurrentWidget(this.service.selectedNode()) && event.target == document.body) {
-            // handle delete
-            if (event.key == "Delete") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.service.removeWidget(this.node());
-            }
-            //
-            // handle delete
-            if (this.config?.type == 'container' && event.key == "Insert") {
-                this.service.showPicker(this.node());
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDesignerRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: AXUnsubscriber,
             },
-        ], ngImport: i0 }); }
+        ], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDesignerRendererDirective, decorators: [{
             type: Directive,
@@ -1351,45 +1499,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class AXPDesignerBoardComponent {
-    constructor() {
-        this.context = {};
-        this.elementRef = inject((ElementRef));
-        this.breakpointMap = {
-            'sm': 640,
-            'md': 768,
-            'lg': 1024,
-            'xl': 1280,
-            'xxl': 1536
-        };
-        this.ctx = effect(() => {
-            const mode = this.service.mode();
-            this.context = {};
-        });
-        this.service = inject(AXPDesignerService);
-        this.width = computed(() => {
-            switch (this.service.size()) {
-                case 'sm':
-                    return '340px';
-                case 'md':
-                case 'lg':
-                    return '768px';
-                default:
-                    return '100%';
-            }
-        });
-        this.ef = effect(() => {
-            this.removeCustomClass();
-            if (this.service.size() != 'xl') {
-                this.applyResponsiveStyles(this.service.size());
-            }
-        });
-    }
     // Unified method to extract media queries and create a custom class
     applyResponsiveStyles(breakpoint) {
         const minWidth = get(this.breakpointMap, breakpoint);
@@ -1417,10 +1529,10 @@ class AXPDesignerBoardComponent {
     }
     createCustomClass(className, styles, breakpoint) {
         const styleSheet = document.createElement('style');
-        styleSheet.setAttribute("data-screen", breakpoint);
+        styleSheet.setAttribute('data-screen', breakpoint);
         // Construct a pure CSS string, dynamically replacing the breakpoint prefix
-        let styleString = "";
-        styles.forEach(style => {
+        let styleString = '';
+        styles.forEach((style) => {
             // Replace any prefixed classes like 'lg:' or 'md:' dynamically
             const dynamicPrefix = new RegExp(`\\.${breakpoint}\\\\:`, 'g');
             styleString += `.${className} ${style.replace(dynamicPrefix, '.')}`; // Replace the breakpoint prefix
@@ -1430,11 +1542,62 @@ class AXPDesignerBoardComponent {
         this.elementRef.nativeElement.appendChild(styleSheet);
     }
     removeCustomClass() {
-        this.elementRef.nativeElement.querySelectorAll('style').forEach(s => s.remove());
+        this.elementRef.nativeElement.querySelectorAll('style').forEach((s) => s.remove());
+    }
+    /**
+     *
+     */
+    constructor() {
+        this.context = {};
+        this.elementRef = inject((ElementRef));
+        this.breakpointMap = {
+            sm: 640,
+            md: 768,
+            lg: 1024,
+            xl: 1280,
+            xxl: 1536,
+        };
+        this.service = inject(AXPDesignerService);
+        this.width = computed(() => {
+            switch (this.service.size()) {
+                case 'sm':
+                    return '340px';
+                case 'md':
+                case 'lg':
+                    return '768px';
+                default:
+                    return '100%';
+            }
+        });
+        this.ef = effect(() => {
+            this.removeCustomClass();
+            if (this.service.size() != 'xl') {
+                this.applyResponsiveStyles(this.service.size());
+            }
+        });
+        this.service.onRefresh.subscribe(() => {
+            this.contextMenu?.refresh();
+        });
     }
     handleContextChanged(e) {
         console.log(e);
     }
+    handleContextMenuOpening(e) {
+        const renderer = get(e.targetElement, '__meta__.renderer');
+        renderer.select();
+        const items = this.service.getContextMenuItems();
+        if (items.length) {
+            e.items.push(...items);
+        }
+        else {
+            e.canceled = true;
+        }
+    }
+    handleContextMenuItemClick(e) {
+        if (e.item.name) {
+            this.service.executeCommand(e.item.name);
+        }
+    }
     get __style() {
         const cls = {};
         cls[`width`] = this.width();
@@ -1451,16 +1614,15 @@ 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\" (onChanged)=\"handleContextChanged($event)\">\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: i1$3.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" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\" (onChanged)=\"handleContextChanged($event)\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu\n  class=\"ax-dark\"\n  #contextMenu\n  [target]=\"'.axp-widget-host'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleContextMenuOpening($event)\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n>\n</ax-context-menu>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.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"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.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: "18.2.0", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        AXPLayoutBuilderModule,
-                        AXPWidgetDesignerRendererDirective
-                    ], template: "<axp-widgets-container [context]=\"context\" (onChanged)=\"handleContextChanged($event)\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode().id\"></ng-container>\n</axp-widgets-container>" }]
-        }], propDecorators: { __style: [{
+            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXMenuModule], template: "<axp-widgets-container [context]=\"context\" (onChanged)=\"handleContextChanged($event)\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu\n  class=\"ax-dark\"\n  #contextMenu\n  [target]=\"'.axp-widget-host'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleContextMenuOpening($event)\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n>\n</ax-context-menu>\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextMenu: [{
+                type: ViewChild,
+                args: ['contextMenu']
+            }], __style: [{
                 type: HostBinding,
                 args: ['style']
             }], __class: [{
@@ -1473,7 +1635,7 @@ class AXPDesignerBreadcrumbsComponent {
         this.service = inject(AXPDesignerService);
     }
     getTitle(node) {
-        return get(node, "__meta__.config.title");
+        return get(node, '__meta__.config.title');
     }
     handleClick(node) {
         this.service.select({ widget: node });
@@ -1483,43 +1645,38 @@ class AXPDesignerBreadcrumbsComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerBreadcrumbsComponent, isStandalone: true, selector: "axp-designer-breadcrumbs", ngImport: i0, template: `
-        <ax-breadcrumbs class="ax-text-white">
-            @for( b of service.breadcrumbs();track $index){
-                <ax-breadcrumbs-item>
-                    <a   (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{getTitle(b)}}</a>
-                </ax-breadcrumbs-item>
-            }
-            <ng-template #divider>
-                <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$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ax-breadcrumbs>
+      @for( b of service.breadcrumbs();track $index){
+      <ax-breadcrumbs-item>
+        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) }}</a>
+      </ax-breadcrumbs-item>
+      }
+      <ng-template #divider>
+        <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$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.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: "18.2.0", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-breadcrumbs',
                     template: `
-        <ax-breadcrumbs class="ax-text-white">
-            @for( b of service.breadcrumbs();track $index){
-                <ax-breadcrumbs-item>
-                    <a   (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{getTitle(b)}}</a>
-                </ax-breadcrumbs-item>
-            }
-            <ng-template #divider>
-                <i class="ax-icon ax-icon-chevron-right"></i>
-            </ng-template>
-        </ax-breadcrumbs>
-    `,
+    <ax-breadcrumbs>
+      @for( b of service.breadcrumbs();track $index){
+      <ax-breadcrumbs-item>
+        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) }}</a>
+      </ax-breadcrumbs-item>
+      }
+      <ng-template #divider>
+        <i class="ax-icon ax-icon-chevron-right"></i>
+      </ng-template>
+    </ax-breadcrumbs>
+  `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [
-                        CommonModule,
-                        AXPLayoutBuilderModule,
-                        AXBreadcrumbsModule,
-                        AXDecoratorModule
-                    ],
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXBreadcrumbsModule, AXDecoratorModule],
                 }]
         }] });
 
@@ -1534,22 +1691,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{ standalone: true, 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>" }]
         }], ctorParameters: () => [] });
 
-class AXPDesignerConnectorAbstract {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerConnectorAbstract, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerConnectorAbstract }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerConnectorAbstract, decorators: [{
-            type: Injectable
-        }] });
-
 class AXPDesignerDataSourcesComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
-        this.connector = inject(AXPDesignerConnectorAbstract);
+        this.dataSourceProvider = inject(AXPWidgetDataSourceProviderService);
         this.list = signal([]);
     }
     async ngOnInit() {
-        this.list.set(await this.connector.getDataSourcesNames());
+        const items = (await this.dataSourceProvider.items()).map(c => ({ name: c.name, title: c.title }));
+        this.list.set(items);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerDataSourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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=\"ghost\" class=\"ax-xs\" title=\"Add New Data Source\">\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-sub-title, 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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1655,6 +1805,15 @@ class AXPDesignerHeaderMenuComponent {
         this.service = inject(AXPDesignerService);
     }
     handleKeyboardEvent(event) {
+        debugger;
+        if (event.code == 'Delete' && this.service.canDelete()) {
+            event.preventDefault();
+            this.service.removeWidget();
+        }
+        if (event.code == 'Insert' && this.service.canInsert()) {
+            event.preventDefault();
+            this.service.showPicker();
+        }
         if (event.shiftKey && event.target == document.body) {
             switch (event.code) {
                 case 'KeyN':
@@ -1663,10 +1822,17 @@ class AXPDesignerHeaderMenuComponent {
                     break;
             }
         }
-        //
-        if (event.ctrlKey && event.target == document.body) {
-            console.log(event.code);
+        if (event.ctrlKey) {
             switch (event.code) {
+                case 'KeyS':
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        this.service.saveAs();
+                    }
+                    else {
+                        this.service.save();
+                    }
+                    break;
                 case 'KeyR':
                     event.preventDefault();
                     if (event.shiftKey) {
@@ -1676,13 +1842,22 @@ class AXPDesignerHeaderMenuComponent {
                         this.service.openPreviewDialog();
                     }
                     break;
+            }
+        }
+        //
+        if (event.ctrlKey && event.target == document.body) {
+            switch (event.code) {
                 case 'KeyZ':
-                    event.preventDefault();
-                    this.service.undo();
+                    if (this.service.canUndo()) {
+                        event.preventDefault();
+                        this.service.undo();
+                    }
                     break;
                 case 'KeyY':
-                    event.preventDefault();
-                    this.service.redo();
+                    if (this.service.canRedo()) {
+                        event.preventDefault();
+                        this.service.redo();
+                    }
                     break;
                 case 'KeyC':
                     if (this.service.canCutCopy()) {
@@ -1713,7 +1888,7 @@ class AXPDesignerHeaderMenuComponent {
         }
     }
     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", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\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> Shift+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> 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.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-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+F5</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", "hasArrow"], outputs: ["onItemClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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-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", "hasArrow"], outputs: ["onItemClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
@@ -1721,7 +1896,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'\" [hasArrow]=\"false\">\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> Shift+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> 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.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-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+F5</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'\" [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']]
@@ -1733,17 +1908,17 @@ class AXPDesignerViewSizeToolbarComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", 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="ghost" look="twotone" [selection]="'single'">
-            <ax-button-group-item [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
-              <ax-icon class="fa-light fa-desktop"></ax-icon>
-            </ax-button-group-item>
-            <ax-button-group-item [selected]="size() == 'lg'" [data]="'lg'" (onClick)="size.set('lg')">
-              <ax-icon class="fa-light fa-tablet"></ax-icon>
-            </ax-button-group-item>
-            <ax-button-group-item [selected]="size() == 'sm'" [data]="'sm'" (onClick)="size.set('sm')">
-              <ax-icon class="fa-light fa-mobile"></ax-icon>
-            </ax-button-group-item>
-        </ax-button-group>
+      <ax-button-group color="ghost" look="twotone" [selection]="'single'">
+          <ax-button-group-item [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
+            <ax-icon class="fa-light fa-desktop"></ax-icon>
+          </ax-button-group-item>
+          <ax-button-group-item [selected]="size() == 'lg'" [data]="'lg'" (onClick)="size.set('lg')">
+            <ax-icon class="fa-light fa-tablet"></ax-icon>
+          </ax-button-group-item>
+          <ax-button-group-item [selected]="size() == 'sm'" [data]="'sm'" (onClick)="size.set('sm')">
+            <ax-icon class="fa-light fa-mobile"></ax-icon>
+          </ax-button-group-item>
+      </ax-button-group>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i1$5.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: "18.2.0", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
@@ -1758,17 +1933,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXMenuModule,
                     ],
                     template: `
-        <ax-button-group color="ghost" look="twotone" [selection]="'single'">
-            <ax-button-group-item [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
-              <ax-icon class="fa-light fa-desktop"></ax-icon>
-            </ax-button-group-item>
-            <ax-button-group-item [selected]="size() == 'lg'" [data]="'lg'" (onClick)="size.set('lg')">
-              <ax-icon class="fa-light fa-tablet"></ax-icon>
-            </ax-button-group-item>
-            <ax-button-group-item [selected]="size() == 'sm'" [data]="'sm'" (onClick)="size.set('sm')">
-              <ax-icon class="fa-light fa-mobile"></ax-icon>
-            </ax-button-group-item>
-        </ax-button-group>
+      <ax-button-group color="ghost" look="twotone" [selection]="'single'">
+          <ax-button-group-item [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
+            <ax-icon class="fa-light fa-desktop"></ax-icon>
+          </ax-button-group-item>
+          <ax-button-group-item [selected]="size() == 'lg'" [data]="'lg'" (onClick)="size.set('lg')">
+            <ax-icon class="fa-light fa-tablet"></ax-icon>
+          </ax-button-group-item>
+          <ax-button-group-item [selected]="size() == 'sm'" [data]="'sm'" (onClick)="size.set('sm')">
+            <ax-icon class="fa-light fa-mobile"></ax-icon>
+          </ax-button-group-item>
+      </ax-button-group>
     `
                 }]
         }] });
@@ -1776,13 +1951,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 class AXPLayoutDesignerComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
+        this.id = input();
         this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null);
         this.service.onUpdate.subscribe((e) => {
             this.propertyViewer.update(e.values);
         });
     }
-    changeMode(mode) {
-        this.service.mode.set(AXPDesignerModes[mode]);
+    ngOnInit() {
+        if (this.id()) {
+            this.service.loadById(this.id());
+        }
     }
     get __styles() {
         const styles = {};
@@ -1790,7 +1968,7 @@ class AXPLayoutDesignerComponent {
         return styles;
     }
     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: { 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 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-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-xs 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-xs ax-items-center ax-justify-end\">\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\n                  (onClick)=\"changeMode('Design')\"\n                  text=\"Designer\"\n                  name=\"designer\"\n                  [selected]=\"service.mode().id == 'designer'\"\n                >\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"changeMode('View')\"\n                  text=\"View\"\n                  name=\"view\"\n                  [selected]=\"service.mode().id == 'view'\"\n                >\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"changeMode('Edit')\"\n                  text=\"Edit\"\n                  name=\"edit\"\n                  [selected]=\"service.mode().id == 'edit'\"\n                >\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"outline\"\n            text=\"Preview\"\n            class=\"ax-xs\"\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\">\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-bg-[#f3f3fe] ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-white ax-shadow-md\"> </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 .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}.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-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}.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-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;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 .axp-page-widget-header,.axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}.axp-designer-board .axp-page-widget-header:hover,.axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}.axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}.axp-designer-board .axp-page-widget-footer{margin-top:.5rem}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$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"], 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", "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", "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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", 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-surface ax-border-e ax-xs 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.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 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-xs 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-xs ax-items-center ax-justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"outline\"\n            text=\"Preview\"\n            class=\"ax-xs\"\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\">\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\">\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\">\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\">\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-[#f3f3fe] ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-white ax-shadow-md\"> </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 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-w-80 ax-border-s ax-dark\" 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{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-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}.axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}.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-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}.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-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;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 .axp-page-widget-header,.axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}.axp-designer-board .axp-page-widget-header:hover,.axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}.axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}.axp-designer-board .axp-page-widget-footer{margin-top:.5rem}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)}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:rgba(var(--ax-color-neutral-700),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"], 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", "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", "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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -1814,7 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXButtonGroupModule,
                         AXDropdownModule,
                         AXDropdownButtonModule,
-                    ], 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-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-xs 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-xs ax-items-center ax-justify-end\">\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\n                  (onClick)=\"changeMode('Design')\"\n                  text=\"Designer\"\n                  name=\"designer\"\n                  [selected]=\"service.mode().id == 'designer'\"\n                >\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"changeMode('View')\"\n                  text=\"View\"\n                  name=\"view\"\n                  [selected]=\"service.mode().id == 'view'\"\n                >\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"changeMode('Edit')\"\n                  text=\"Edit\"\n                  name=\"edit\"\n                  [selected]=\"service.mode().id == 'edit'\"\n                >\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"outline\"\n            text=\"Preview\"\n            class=\"ax-xs\"\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\">\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-bg-[#f3f3fe] ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-white ax-shadow-md\"> </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 .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}.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-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}.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-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;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 .axp-page-widget-header,.axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}.axp-designer-board .axp-page-widget-header:hover,.axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}.axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}.axp-designer-board .axp-page-widget-footer{margin-top:.5rem}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\">\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 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.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 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-xs 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-xs ax-items-center ax-justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"outline\"\n            text=\"Preview\"\n            class=\"ax-xs\"\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\">\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\">\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\">\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\">\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-[#f3f3fe] ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-white ax-shadow-md\"> </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 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-w-80 ax-border-s ax-dark\" 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{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-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}.axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}.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-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}.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-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;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 .axp-page-widget-header,.axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}.axp-designer-board .axp-page-widget-header:hover,.axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}.axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}.axp-designer-board .axp-page-widget-footer{margin-top:.5rem}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)}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:rgba(var(--ax-color-neutral-700),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"] }]
         }], ctorParameters: () => [], propDecorators: { propertyViewer: [{
                 type: ViewChild,
                 args: [AXPWidgetPropertyViewerComponent, { static: true }]
@@ -1823,15 +2001,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 args: ['style']
             }] } });
 
+class AXPDesignerModes {
+    static { this.View = { id: 'view', title: 'View' }; }
+    static { this.Design = { id: 'designer', title: 'Designer' }; }
+    static { this.Edit = { id: 'edit', title: 'Edit' }; }
+}
+
 class AXPLayoutDesignerPreviewViewerComponent {
     constructor() {
         this.context = {};
         this.document = signal({ type: AXPWidgetsCatalog.document });
         this.currentPageIndex = signal(0);
+        this.connector = inject(AXPDesignerConnector);
+        this.dataSourceProvider = inject(AXPWidgetDataSourceProviderService);
         this.currentPage = computed(() => {
             return (this.document().children?.[this.currentPageIndex()] ?? { type: AXPWidgetsCatalog.pageLayout });
         });
         this.channel = new BroadcastChannel('livePreviewChannel');
+        this.functions = {
+            getDataSourceNames: this.getDataSources.bind(this),
+        };
         this.channel.addEventListener('message', (message) => {
             if (message.data.action == 'designer-preview') {
                 this.document.set(message.data.document);
@@ -1854,6 +2043,9 @@ class AXPLayoutDesignerPreviewViewerComponent {
             context: this.context,
         });
     }
+    async getDataSources(name) {
+        return await this.dataSourceProvider.get(name);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", ngImport: i0, template: `
     <axp-widgets-container [(context)]="context" (onChanged)="handleContextChanged($event)">
@@ -1955,7 +2147,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         this.settings = inject(AXPSettingsService);
         this.initialSize = 'xl';
         this.isDialogWindow = false;
-        this.jsonSettingsKey = "forms:preview:json";
+        this.jsonSettingsKey = 'forms:preview:json';
         this.jsonViewCollapsed = signal(true);
         this.size = signal(this.initialSize);
         this.channel = new BroadcastChannel('livePreviewChannel');
@@ -1963,6 +2155,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         //
         this.channel.addEventListener('message', (message) => {
             if (message.data.action == 'designer-preview-context') {
+                //TODO: json viewer bug
                 this.context.set(message.data.context);
             }
         });
@@ -2019,5 +2212,5 @@ var preview_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnectorAbstract, AXPDesignerGridDrawerComponent, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPWidgetDesignerRendererDirective, AXPWidgetPropertyViewerComponent };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerGridDrawerComponent, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPWidgetDesignerRendererDirective, AXPWidgetPropertyViewerComponent, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, cloneWidgetMenu };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map