@acorex/platform 18.0.14 → 18.0.16

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

@@ -1,35 +1,113 @@
-import * as i3$1 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXP_WIDGET_TOKEN, AXPContainerWidgetComponent, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, Injector, NgZone, ElementRef, input, effect, Component, ChangeDetectionStrategy, HostBinding, HostListener, ViewEncapsulation, model, output, EventEmitter, untracked, Output, ViewChild } from '@angular/core';
-import * as i3 from '@acorex/components/skeleton';
-import { AXSkeletonModule } from '@acorex/components/skeleton';
-import { AXUnsubscriber } from '@acorex/core/utils';
-import * as i2 from '@angular/cdk/portal';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import { merge, cloneDeep, sortBy, set, get, capitalize, unionBy, isArray, isNil, isEmpty } from 'lodash-es';
-import { Subject, first, merge as merge$1 } from 'rxjs';
-import { AXPopupService } from '@acorex/components/popup';
-import * as i2$1 from '@acorex/components/button';
+import { model, output, computed, signal, Component, ChangeDetectionStrategy, HostListener, HostBinding, Injectable, inject, ViewEncapsulation, input, EventEmitter, effect, untracked, Output, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
+import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2$2 from '@acorex/components/decorators';
+import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i3 from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN } from '@acorex/platform/layout/builder';
+import { AXPopupService } from '@acorex/components/popup';
+import { merge, cloneDeep, sortBy, set, get, capitalize, unionBy, isArray, isNil, isEmpty } from 'lodash-es';
+import { Subject, first, merge as merge$1 } from 'rxjs';
+import { AXFileService } from '@acorex/core/file';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import * as i5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
-import * as i3$2 from '@acorex/components/drawer';
+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 i2$3 from '@acorex/components/menu';
+import * as i2$2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i2$4 from '@acorex/components/tabs';
+import * as i2$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i1$1 from '@acorex/components/breadcrumbs';
-import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import * as i1$2 from '@acorex/components/collapse';
+import * as i1$3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@acorex/components/collapse';
 import { AXCollapseModule } from '@acorex/components/collapse';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i1$2 from '@acorex/components/breadcrumbs';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+
+class AXPDesignerGridDrawerComponent {
+    constructor() {
+        this.rowsCount = model(5, { alias: "rows" });
+        this.colsCount = model(12, { alias: "columns" });
+        this.onSelect = output();
+        this.rows = computed(() => Array.from({ length: this.rowsCount() }).map((v, index) => index + 1));
+        this.columns = computed(() => Array.from({ length: this.colsCount() }).map((v, index) => index + 1));
+        this.rangeR = signal(0);
+        this.rangeC = signal(0);
+    }
+    handleMouseHover(r, c) {
+        this.rangeR.set(r);
+        this.rangeC.set(c);
+    }
+    handleClick(r, c) {
+        this.onSelect.emit({ rows: r, cols: c });
+    }
+    handleMouseLeave(event) {
+        this.rangeR.set(0);
+        this.rangeC.set(0);
+    }
+    get __style() {
+        return {
+            "--cols-width": `${this.colsCount() == 0 ? 0 : (100 / this.colsCount())}%`
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "style": "this.__style" } }, ngImport: i0, template: `
+   <table class="table-picker" >
+        <tbody>
+            @for(r of rows();track $index)
+            {
+            <tr >
+                @for(c of columns();track $index)
+                {
+                    <td (mouseenter)="handleMouseHover(r,c)"  [class.picked]="c<=rangeC() && r<=rangeR()" (click)="handleClick(r,c)">
+                    </td>
+                }
+            </tr>
+            }
+            <tr>
+                <td [attr.colspan]="columns().length" class="ax-text-center">
+                    <small >{{rangeC()}}*{{rangeR()}}</small>
+                </td>
+            </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-grid-drawer', template: `
+   <table class="table-picker" >
+        <tbody>
+            @for(r of rows();track $index)
+            {
+            <tr >
+                @for(c of columns();track $index)
+                {
+                    <td (mouseenter)="handleMouseHover(r,c)"  [class.picked]="c<=rangeC() && r<=rangeR()" (click)="handleClick(r,c)">
+                    </td>
+                }
+            </tr>
+            }
+            <tr>
+                <td [attr.colspan]="columns().length" class="ax-text-center">
+                    <small >{{rangeC()}}*{{rangeR()}}</small>
+                </td>
+            </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"] }]
+        }], propDecorators: { handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
 
 // AddWidgetCommand
 class AddWidgetCommand {
@@ -216,6 +294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 class AXPDesignerService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.fileService = inject(AXFileService);
+        this.loadingService = inject(AXLoadingDialogService);
         this.widgetRegisteryService = inject(AXPWidgetRegistryService);
         this.document = signal(this.createDoc());
         this.currentPageIndex = signal(0);
@@ -284,7 +364,7 @@ class AXPDesignerService {
         return undefined;
     }
     async showPicker(currentNode) {
-        const com = await import('./acorex-platform-layout-designer-widget-picker.component-DXgcm-fP.mjs').then((c) => c.AXPDesignerWidgetPickerComponent);
+        const com = await import('./acorex-platform-layout-designer-widget-picker.component-BZryrCyh.mjs').then((c) => c.AXPDesignerWidgetPickerComponent);
         const result = await this.popupService.open(com, {
             title: 'Widget Gallery',
             size: 'md',
@@ -302,13 +382,19 @@ class AXPDesignerService {
         }
         return widgets;
     }
+    new() {
+        this.commandManager.clear();
+        this.document.set(this.createDoc());
+        this.currentPage.set(this.document().children?.[0]);
+        this.reRenderPage();
+    }
     createDoc() {
         const doc = {
             type: AXPWidgetsCatalog.document,
             children: [this.createPage()],
             name: 'document',
         };
-        set(doc, '__meta__.id', Math.random() * Math.pow(10, 18));
+        set(doc, '__meta__.id', this.generateUniqueId());
         return doc;
     }
     createPage() {
@@ -318,7 +404,7 @@ class AXPDesignerService {
             children: [],
             name: 'page-layout1',
         };
-        set(page, '__meta__.id', Math.random() * Math.pow(10, 18));
+        set(page, '__meta__.id', this.generateUniqueId());
         set(page, '__meta__.config', config);
         return page;
     }
@@ -345,6 +431,9 @@ class AXPDesignerService {
     }
     reRenderPage() {
         this.currentPage.set({ ...this.currentPage() });
+        setTimeout(() => {
+            this.refresh({ widget: this.currentPage() });
+        });
     }
     findWidgetById(root, id) {
         if (get(root, '__meta__.id') === id) {
@@ -378,7 +467,7 @@ class AXPDesignerService {
             let current = node;
             while (current) {
                 const config = this.widgetRegisteryService.resolve(current.type);
-                if (config && config.container) {
+                if (config && config.type == 'container') {
                     return current;
                 }
                 current = this.findParent(get(current, '__meta__.id')); // Use findParent to navigate upwards
@@ -389,7 +478,7 @@ class AXPDesignerService {
             if (node.children) {
                 for (const child of node.children) {
                     const config = this.widgetRegisteryService.resolve(child.type);
-                    if (config && config.container) {
+                    if (config && config.type == 'container') {
                         return child;
                     }
                     const foundContainer = this.findNearestContainer(child, false); // Continue searching downwards
@@ -410,7 +499,7 @@ class AXPDesignerService {
         this.commandManager.executeCommand(new AddWidgetCommand(cloned, currentNode, currentNode));
         //
         cloned.name = this.generateUniqueName(node.type);
-        set(cloned, '__meta__.id', Math.random() * Math.pow(10, 18));
+        set(cloned, '__meta__.id', this.generateUniqueId());
         set(cloned, '__meta__.config', config);
         //
         this.reRenderPage();
@@ -463,10 +552,11 @@ class AXPDesignerService {
     clearHistory() {
         this.commandManager.clear();
     }
-    formatOutputJSON(obj, nodeName) {
+    removeMetaProp(obj) {
+        const nodeName = '__meta__';
         // Check if the object is an array
         if (Array.isArray(obj)) {
-            return obj.map((item) => this.formatOutputJSON(item, nodeName));
+            return obj.map((item) => this.removeMetaProp(item));
         }
         else if (typeof obj === 'object' && obj !== null) {
             // Create a new object to store the result
@@ -474,7 +564,7 @@ class AXPDesignerService {
             for (let key in obj) {
                 // Only add the key if it's not the nodeName we want to remove
                 if (key !== nodeName) {
-                    newObj[key] = this.formatOutputJSON(obj[key], nodeName);
+                    newObj[key] = this.removeMetaProp(obj[key]);
                 }
             }
             return newObj;
@@ -482,6 +572,22 @@ class AXPDesignerService {
         // If the value is not an object or array, return it as is
         return obj;
     }
+    async addMetaToNodes(node, processedNodes, progressCallback) {
+        // Apply your meta logic here
+        const config = this.widgetRegisteryService.resolve(node.type);
+        //
+        set(node, '__meta__.id', this.generateUniqueId());
+        set(node, '__meta__.config', config);
+        //
+        // Increment the processed node count and update the progress dialog
+        processedNodes.count++;
+        progressCallback(processedNodes.count);
+        // Recursively process child nodes using Promise.all
+        if (node.children && node.children.length > 0) {
+            node.children = await Promise.all(node.children.map(async (child) => await this.addMetaToNodes(child, processedNodes, progressCallback)));
+        }
+        return node;
+    }
     copy(widget = this.selectedNode()) {
         if (!widget)
             return;
@@ -519,8 +625,15 @@ class AXPDesignerService {
         if (!nearestContainer.children) {
             nearestContainer.children = [];
         }
-        newNode.name = this.generateUniqueName(newNode.type);
-        set(newNode, '__meta__.id', Math.random() * Math.pow(10, 18)); // Ensure a unique ID
+        //
+        const setNameId = (node) => {
+            set(node, 'name', this.generateUniqueName(node.type));
+            set(node, '__meta__.id', this.generateUniqueId());
+            node.children?.forEach(n => {
+                setNameId(n);
+            });
+        };
+        setNameId(newNode);
         //
         this.commandManager.executeCommand(new AddWidgetCommand(newNode, nearestContainer, nearestContainer));
         //
@@ -530,10 +643,10 @@ class AXPDesignerService {
         });
     }
     export() {
-        const json = this.formatOutputJSON(this.document(), '__meta__');
+        const json = this.removeMetaProp(this.document());
         return JSON.stringify(json);
     }
-    download() {
+    downloadJson() {
         // Convert the object to a JSON string
         const jsonStr = this.export();
         // Create a blob object from the JSON string
@@ -552,11 +665,65 @@ class AXPDesignerService {
         URL.revokeObjectURL(url);
         document.body.removeChild(a);
     }
-    /**
-     * Generates a well-formed, unique name for a new widget node based on its type.
-     * @param type The type of the widget (e.g., 'textBox', 'numberBox').
-     * @returns A unique name for the widget (e.g., 'textBox1', 'numberBox2').
-     */
+    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
+                ]
+            });
+            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";
+            }
+        }
+    }
+    countTotalNodes(node) {
+        let count = 1; // Count the current node
+        if (node.children && node.children.length > 0) {
+            count += node.children.reduce((sum, child) => sum + this.countTotalNodes(child), 0);
+        }
+        return count;
+    }
     generateUniqueName(type) {
         // Normalize the type to follow camelCase convention
         const baseName = type.charAt(0).toLowerCase() + type.slice(1);
@@ -572,11 +739,9 @@ class AXPDesignerService {
         }
         return uniqueName;
     }
-    /**
-     * Collects all existing widget names from the widget tree.
-     * @param node The current node being inspected.
-     * @param names A set to store existing names.
-     */
+    generateUniqueId() {
+        return Math.random() * Math.pow(10, 18);
+    }
     collectAllNames(node, names) {
         if (node.name) {
             names.add(node.name);
@@ -588,7 +753,7 @@ class AXPDesignerService {
         }
     }
     async openPreview() {
-        const com = await import('./acorex-platform-layout-designer-preview.component-xkvSLydm.mjs').then((c) => c.AXPLayoutDesignerPreviewComponent);
+        const com = await import('./acorex-platform-layout-designer-preview.component-CaRHf4x_.mjs').then((c) => c.AXPLayoutDesignerPreviewComponent);
         await this.popupService.open(com, {
             header: false,
             size: 'full',
@@ -605,7 +770,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }] });
 
-class AXPWidgetDesignerRendererComponent {
+class AXPDesignerAddWidgetButtonComponent {
+    constructor() {
+        this.designerService = inject(AXPDesignerService);
+        this.parent = inject(AXPContainerWidgetComponent);
+    }
+    async handleClick(e) {
+        e.nativeEvent.stopPropagation();
+        await this.designerService.showPicker(this.parent.node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
+    <div class="ax-container">
+      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
+        <ax-icon icon="fa-solid fa-plus"></ax-icon>
+      </ax-button>
+    </div>
+  `, isInline: true, styles: ["axp-designer-add-widget-button .ax-container{margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-add-widget-button', template: `
+    <div class="ax-container">
+      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
+        <ax-icon icon="fa-solid fa-plus"></ax-icon>
+      </ax-button>
+    </div>
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule], encapsulation: ViewEncapsulation.None, styles: ["axp-designer-add-widget-button .ax-container{margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:.5rem}\n"] }]
+        }] });
+
+class AXPWidgetPropertyViewerComponent {
+    constructor() {
+        this.widget = input.required();
+        this.widgetRegistryService = inject(AXPWidgetRegistryService);
+        this.connector = inject(AXPDesignerConnectorAbstract);
+        this.currentTabIndex = signal(0);
+        this.config = signal(null);
+        this.allPoperties = [];
+        this.tabs = signal([]);
+        this.groups = computed(() => {
+            return this.tabs().length ? this.tabs()[this.currentTabIndex()].groups : [];
+        });
+        this.groupCollapsedStates = new Map();
+        this.onChanged = new EventEmitter();
+        this.context = signal({});
+        this.initialContext = {};
+        this.functions = {
+            getDataSourceNames: this.getDataSourceNames.bind(this)
+        };
+        effect(() => {
+            if (!this.widget())
+                return;
+            const config = this.widgetRegistryService.resolve(this.widget()?.type);
+            if (config) {
+                this.initialContext = {};
+                this.config.set(config);
+                this.fillTabs();
+            }
+            else {
+                console.error(`Invalid widget name: ${this.widget()}`);
+            }
+        }, { allowSignalWrites: true });
+    }
+    update(values) {
+        this.context.set(merge(cloneDeep(this.context()), values));
+    }
+    fillTabs() {
+        const tabs = [
+            {
+                name: 'general',
+                title: 'General',
+                groups: [],
+            },
+        ];
+        Object.entries(this.config()?.components ?? {}).forEach((c) => {
+            if (c[1].component != null && c[1].properties?.length) {
+                tabs.push({ name: c[0], title: capitalize(c[0]), groups: [] });
+            }
+        });
+        ///
+        this.allPoperties = [];
+        ///
+        tabs.forEach((tab) => {
+            const props = tab.name == 'general'
+                ? this.config()?.properties ?? []
+                : ((this.config()?.components)[tab.name]?.properties ?? []).filter((c) => c.visible);
+            //
+            this.allPoperties.push(...props);
+            tab.groups = unionBy(sortBy(props.map((pg) => ({
+                isCollapsed: !!this.groupCollapsedStates.get(pg.group.name),
+                name: pg.group.name,
+                title: pg.group.title,
+                props: sortBy(props.filter((p) => p.group.name == pg.group.name), 'title'),
+            })), 'title'), 'name');
+        });
+        this.tabs.set(tabs.filter((c) => c.groups.length));
+        //
+        this.initialContext = this.allPoperties
+            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) || (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
+            .reduce((acc, c) => {
+            set(acc, c.schema.interface.path, c.schema.defaultValue);
+            return acc;
+        }, {});
+        //
+        untracked(() => {
+            this.context.set(merge(cloneDeep(this.initialContext), this.widget()));
+            this.onChanged.emit({ values: this.context(), mode: 'init' });
+        });
+    }
+    handleContextChange(e) {
+        untracked(() => {
+            this.context.set(e.data);
+            this.onChanged.emit({ values: this.context(), mode: e.init ? 'init' : 'update' });
+        });
+    }
+    handleTabChange(event) {
+        const indx = event.index;
+        if (this.currentTabIndex() != indx) {
+            this.currentTabIndex.set(indx);
+        }
+    }
+    handleCollapsedChange(group, collapsed) {
+        this.groupCollapsedStates.set(group, collapsed);
+    }
+    getDataSourceNames() {
+        return this.connector.getDataSourcesNames();
+    }
+    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                            <axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </axp-widget-renderer>\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$1.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$1.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "component", type: i3.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], 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                            <axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </axp-widget-renderer>\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"] }]
+        }], ctorParameters: () => [], propDecorators: { onChanged: [{
+                type: Output
+            }] } });
+
+class AXPWidgetDesignerRendererDirective {
     /**
      * @ignore
      */
@@ -617,12 +918,12 @@ class AXPWidgetDesignerRendererComponent {
         this.zone = inject(NgZone);
         this.isLoading = signal(true);
         this.service = inject(AXPDesignerService);
-        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
         this.parentNode = input();
         this.index = input();
         this.mode = input.required();
         this.node = input.required();
-        this.hostElement = () => this.elementRef.nativeElement;
+        this.hostElement = () => this.instance?.host;
         this.isCurrentWidget = (w) => get(w, '__meta__.id') == get(this.node(), '__meta__.id');
         this.service.onUpdate.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             if (this.isCurrentWidget(c.widget)) {
@@ -633,10 +934,10 @@ class AXPWidgetDesignerRendererComponent {
         this.service.onSelected.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             this.zone.runOutsideAngular(() => {
                 if (this.isCurrentWidget(c.widget)) {
-                    this.hostElement()?.classList.add('axp-state-selected');
+                    this.select();
                 }
                 else {
-                    this.hostElement()?.classList.remove('axp-state-selected');
+                    this.unselect();
                 }
             });
         });
@@ -661,6 +962,8 @@ class AXPWidgetDesignerRendererComponent {
         }, { allowSignalWrites: true });
     }
     async loadComponent() {
+        //console.log('loadComponent', this.node().type);
+        this.viewContainerRef.clear();
         this.isLoading.set(true);
         this.config = this.widgetRegistery.resolve(this.node().type);
         //
@@ -689,28 +992,28 @@ class AXPWidgetDesignerRendererComponent {
             ],
         });
         var com = await this.config?.components[this.mode()]?.component();
-        this.portal = new ComponentPortal(com, null, token);
-        this.isLoading.set(false);
-    }
-    async handleAttached(portalOutletRef) {
-        portalOutletRef = portalOutletRef;
-        this.instance = portalOutletRef.instance;
+        this.instance = this.viewContainerRef.createComponent(com, { injector: token }).instance;
         this.instance.parent = this.parentNode();
         this.instance.index = this.index();
         this.instance.mode = this.mode();
         //
         this.instance.onReady.pipe(first()).subscribe(() => {
-            if (this.mode() == 'designer') {
-                this.hostElement()?.addEventListener('mouseover', (e) => {
+            const host = this.hostElement();
+            host.classList.add("axp-widget-host");
+            if (this.mode() == 'designer' && host) {
+                host.addEventListener('mouseover', (e) => {
                     e.stopPropagation();
+                    this.addOverlay();
                     this.service.focus({ widget: this.node() });
                 });
-                this.hostElement()?.addEventListener('mouseleave', (e) => {
+                host.addEventListener('mouseleave', (e) => {
                     e.stopPropagation();
+                    this.removeOverlay();
                     this.service.focus({ widget: null });
                 });
-                this.hostElement()?.addEventListener('click', (e) => {
+                host.addEventListener('click', (e) => {
                     e.stopPropagation();
+                    this.select();
                     this.service.select({ widget: this.node() });
                 });
                 this.service.register({
@@ -722,13 +1025,22 @@ class AXPWidgetDesignerRendererComponent {
             }
         });
     }
+    select() {
+        this.hostElement()?.classList.add('axp-state-selected');
+        this.hostElement()?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    unselect() {
+        this.hostElement()?.classList.remove('axp-state-selected');
+    }
     addOverlay() {
         this.zone.runOutsideAngular(() => {
             if (this.hostElement()) {
                 this.hostElement()?.classList.add('axp-state-hover');
                 //
-                if (this.hostElement().querySelector('.axp-widget-overlay') || this.config?.container)
+                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) => {
@@ -746,7 +1058,6 @@ class AXPWidgetDesignerRendererComponent {
         });
     }
     removeOverlay() {
-        //console.log('remove', this.node().type);
         this.zone.runOutsideAngular(() => {
             if (this.hostElement()) {
                 this.hostElement()?.classList.remove('axp-state-hover');
@@ -774,14 +1085,8 @@ class AXPWidgetDesignerRendererComponent {
         });
         this.instance?.setOptions(this.mergedOptions());
     }
-    get __class() {
-        if (this.instance instanceof AXPContainerWidgetComponent) {
-            return this.instance.outerClass();
-        }
-        return null;
-    }
     async onKeydownHandler(event) {
-        if (this.service.selectedNode() && this.isCurrentWidget(this.service.selectedNode())) {
+        if (this.service.selectedNode() && this.isCurrentWidget(this.service.selectedNode()) && event.target == document.body) {
             // handle delete
             if (event.key == "Delete") {
                 event.preventDefault();
@@ -790,55 +1095,30 @@ class AXPWidgetDesignerRendererComponent {
             }
             //
             // handle delete
-            if (this.config?.container && event.key == "Insert") {
+            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: AXPWidgetDesignerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPWidgetDesignerRendererComponent, 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)" }, properties: { "class": "this.__class" }, classAttribute: "axp-widget-host" }, providers: [
+    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: [
             {
                 provide: AXUnsubscriber,
             },
-        ], ngImport: i0, template: `
-    @if(mergedOptions().isVisible!=false) { @if(isLoading()){
-    <ax-skeleton [animated]="true" class="ax-w-full  lg:ax-w-[50%] ax-h-8 ax-rounded"></ax-skeleton>
-    } @else {
-    <ng-container *ngTemplateOutlet="tt"></ng-container>
-    } }
-    <ng-template #tt>
-      <ng-template [cdkPortalOutlet]="portal" (attached)="handleAttached($event)"></ng-template>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDesignerRendererComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDesignerRendererDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'axp-widget-designer-renderer',
-                    template: `
-    @if(mergedOptions().isVisible!=false) { @if(isLoading()){
-    <ax-skeleton [animated]="true" class="ax-w-full  lg:ax-w-[50%] ax-h-8 ax-rounded"></ax-skeleton>
-    } @else {
-    <ng-container *ngTemplateOutlet="tt"></ng-container>
-    } }
-    <ng-template #tt>
-      <ng-template [cdkPortalOutlet]="portal" (attached)="handleAttached($event)"></ng-template>
-    </ng-template>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[axp-widget-designer-renderer]',
                     standalone: true,
-                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
                     providers: [
                         {
                             provide: AXUnsubscriber,
                         },
                     ],
-                    host: { class: 'axp-widget-host' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }], onKeydownHandler: [{
+        }], ctorParameters: () => [], propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -915,125 +1195,36 @@ class AXPDesignerBoardComponent {
     removeCustomClass() {
         this.elementRef.nativeElement.querySelectorAll('style').forEach(s => s.remove());
     }
-    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", ngImport: i0, template: "<div class=\"axp-designer-board axp-state-design axp-preview-{{service.size()}}\" [style.width]=\"width()\">\n    <axp-widgets-container [(context)]=\"context\">\n        <axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode()\">\n        </axp-widget-designer-renderer>\n    </axp-widgets-container>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "component", type: AXPWidgetDesignerRendererComponent, selector: "axp-widget-designer-renderer", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    get __style() {
+        const cls = {};
+        cls[`width`] = this.width();
+        return cls;
+    }
+    get __class() {
+        const cls = {};
+        cls[`axp-designer-board`] = true;
+        cls[`axp-state-design`] = true;
+        cls['ax-h-full'] = true;
+        cls['ax-overflow-auto'] = true;
+        cls[`axp-preview-${this.service.size()}`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, ngImport: i0, template: "<axp-widgets-container [(context)]=\"context\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode()\"></ng-container>\n</axp-widgets-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 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,
-                        AXPWidgetDesignerRendererComponent
-                    ], template: "<div class=\"axp-designer-board axp-state-design axp-preview-{{service.size()}}\" [style.width]=\"width()\">\n    <axp-widgets-container [(context)]=\"context\">\n        <axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode()\">\n        </axp-widget-designer-renderer>\n    </axp-widgets-container>\n</div>" }]
-        }] });
-
-class AXPDesignerAddWidgetButtonComponent {
-    constructor() {
-        this.designerService = inject(AXPDesignerService);
-        this.parent = inject(AXPContainerWidgetComponent);
-    }
-    async handleClick(e) {
-        e.nativeEvent.stopPropagation();
-        await this.designerService.showPicker(this.parent.node);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
-    <div class="ax-container">
-      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
-        <ax-icon icon="fa-solid fa-plus"></ax-icon>
-      </ax-button>
-    </div>
-  `, isInline: true, styles: ["axp-designer-add-widget-button .ax-container{margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-designer-add-widget-button', template: `
-    <div class="ax-container">
-      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
-        <ax-icon icon="fa-solid fa-plus"></ax-icon>
-      </ax-button>
-    </div>
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule], encapsulation: ViewEncapsulation.None, styles: ["axp-designer-add-widget-button .ax-container{margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:.5rem}\n"] }]
-        }] });
-
-class AXPDesignerGridDrawerComponent {
-    constructor() {
-        this.rowsCount = model(5, { alias: "rows" });
-        this.colsCount = model(12, { alias: "columns" });
-        this.onSelect = output();
-        this.rows = computed(() => Array.from({ length: this.rowsCount() }).map((v, index) => index + 1));
-        this.columns = computed(() => Array.from({ length: this.colsCount() }).map((v, index) => index + 1));
-        this.rangeR = signal(0);
-        this.rangeC = signal(0);
-    }
-    handleMouseHover(r, c) {
-        this.rangeR.set(r);
-        this.rangeC.set(c);
-    }
-    handleClick(r, c) {
-        this.onSelect.emit({ rows: r, cols: c });
-    }
-    handleMouseLeave(event) {
-        this.rangeR.set(0);
-        this.rangeC.set(0);
-    }
-    get __style() {
-        return {
-            "--cols-width": `${this.colsCount() == 0 ? 0 : (100 / this.colsCount())}%`
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "style": "this.__style" } }, ngImport: i0, template: `
-   <table class="table-picker" >
-        <tbody>
-            @for(r of rows();track $index)
-            {
-            <tr >
-                @for(c of columns();track $index)
-                {
-                    <td (mouseenter)="handleMouseHover(r,c)"  [class.picked]="c<=rangeC() && r<=rangeR()" (click)="handleClick(r,c)">
-                    </td>
-                }
-            </tr>
-            }
-            <tr>
-                <td [attr.colspan]="columns().length" class="ax-text-center">
-                    <small >{{rangeC()}}*{{rangeR()}}</small>
-                </td>
-            </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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-designer-grid-drawer', template: `
-   <table class="table-picker" >
-        <tbody>
-            @for(r of rows();track $index)
-            {
-            <tr >
-                @for(c of columns();track $index)
-                {
-                    <td (mouseenter)="handleMouseHover(r,c)"  [class.picked]="c<=rangeC() && r<=rangeR()" (click)="handleClick(r,c)">
-                    </td>
-                }
-            </tr>
-            }
-            <tr>
-                <td [attr.colspan]="columns().length" class="ax-text-center">
-                    <small >{{rangeC()}}*{{rangeR()}}</small>
-                </td>
-            </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"] }]
-        }], propDecorators: { handleMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave', ['$event']]
-            }], __style: [{
+                        AXPWidgetDesignerRendererDirective
+                    ], template: "<axp-widgets-container [(context)]=\"context\">\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"service.mode()\"></ng-container>\n</axp-widgets-container>" }]
+        }], propDecorators: { __style: [{
                 type: HostBinding,
                 args: ['style']
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class AXPDesignerBreadcrumbsComponent {
@@ -1061,7 +1252,7 @@ class AXPDesignerBreadcrumbsComponent {
                 <i class="ax-icon ax-icon-chevron-right"></i>
             </ng-template>
         </ax-breadcrumbs>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$1.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$1.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$2.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$2.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,
@@ -1091,20 +1282,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
-class AXPDesignerHeaderMenuComponent {
+class AXPLayoutDesignerDrawerContentComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
+            type: Component,
+            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.list = signal([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item text=\"Home\">\n        <ax-menu-item text=\"New\"></ax-menu-item>\n        <ax-menu-item text=\"Export\">\n            <ax-menu-item text=\"Download JSON\" (onClick)=\"service.download()\">\n            </ax-menu-item>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item text=\"Edit\">\n        <ax-menu-item text=\"Undo\" [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-left\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Z\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item text=\"Redo\" [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-right\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n        <ax-menu-item text=\"Cut\" [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-cut\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+X\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item text=\"Copy\" [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-copy\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+C\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item text=\"Paste\" [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-paste\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+V\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item text=\"Help\">\n        <ax-menu-item text=\"About\"></ax-menu-item>\n    </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.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$3.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["disabled", "text", "active"], outputs: ["activeChange", "onClick"] }, { kind: "component", type: i2$3.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "truncateMenu"] }] }); }
+    async ngOnInit() {
+        this.list.set(await this.connector.getDataSourcesNames());
+    }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
+            args: [{ selector: 'axp-designer-data-sources', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         AXDecoratorModule,
-                        AXMenuModule,
-                    ], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item text=\"Home\">\n        <ax-menu-item text=\"New\"></ax-menu-item>\n        <ax-menu-item text=\"Export\">\n            <ax-menu-item text=\"Download JSON\" (onClick)=\"service.download()\">\n            </ax-menu-item>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item text=\"Edit\">\n        <ax-menu-item text=\"Undo\" [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-left\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Z\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item text=\"Redo\" [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-right\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n        <ax-menu-item text=\"Cut\" [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-cut\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+X\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item text=\"Copy\" [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-copy\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+C\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item text=\"Paste\" [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-paste\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+V\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item text=\"Help\">\n        <ax-menu-item text=\"About\"></ax-menu-item>\n    </ax-menu-item>\n</ax-menu>" }]
+                        AXButtonModule,
+                        AXPLayoutDesignerDrawerContentComponent
+                    ], 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>" }]
+        }] });
+
+class AXPDesignerHistoryComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>History</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"ghost\" class=\"ax-xs\">\n            <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n            <ax-dropdown-panel class=\"ax-xs\">\n                <ax-button-item-list>\n                    <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n                </ax-button-item-list>\n            </ax-dropdown-panel>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @if(service.history().length)\n        {\n        <ul class=\"axp-designer-drawer-list\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.navigateTo($index)\" [class.ax-italic]=\"step.isFuture\"\n                [class.ax-text-neutral-400]=\"step.isFuture\" [class.ax-state-selected]=\"step.isCurrent\">\n                <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n                {{ step.description }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">\n            No changes have been made yet.\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-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: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-history', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXPLayoutDesignerDrawerContentComponent
+                    ], template: "<axp-designer-drawer-content>\n\n    <ax-title>History</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"ghost\" class=\"ax-xs\">\n            <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n            <ax-dropdown-panel class=\"ax-xs\">\n                <ax-button-item-list>\n                    <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n                </ax-button-item-list>\n            </ax-dropdown-panel>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @if(service.history().length)\n        {\n        <ul class=\"axp-designer-drawer-list\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.navigateTo($index)\" [class.ax-italic]=\"step.isFuture\"\n                [class.ax-text-neutral-400]=\"step.isFuture\" [class.ax-state-selected]=\"step.isCurrent\">\n                <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n                {{ step.description }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">\n            No changes have been made yet.\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>" }]
         }] });
 
 class AXPDesignerOutlineComponent {
@@ -1146,142 +1380,49 @@ class AXPDesignerOutlineComponent {
         this.service.focus({ widget: node });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72\">\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\">\n            <span class=\"ax-font-semibold\">Outline</span>\n        </div>\n        <ax-close-button></ax-close-button>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        @if(root().children?.length)\n        {\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for( node of root().children;track $index)\n            {\n            <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n            </ng-container>\n            }\n        </ul>\n        <ng-template #sideMenu let-item>\n            <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm\">\n                    <span class=\"ax-w-5\">\n                        @if(item.children?.length)\n                        {\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                            (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n                        }\n                    </span>\n                    @let config = getConfig(item);\n                    <span class=\"ax-w-5\">\n                        @if(config.icon)\n                        {\n                        <i [ngClass]=\"config.icon\"></i>\n                        }\n                    </span>\n                    <span class=\"ax-truncate\">{{config.title}} : {{item.name}}</span>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n                    <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                        [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                    </ng-container>\n                </ul>\n                }\n            </li>\n        </ng-template>\n        }\n        @else {\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No widgets found in the page\n        </div>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>Outline</ax-title>\n\n    <ax-content body>\n        @if(root().children?.length)\n        {\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for( node of root().children;track $index)\n            {\n            <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n            </ng-container>\n            }\n        </ul>\n        <ng-template #sideMenu let-item>\n            <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\">\n                    <span class=\"ax-w-5 \">\n                        @if(item.children?.length)\n                        {\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                            (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n                        }\n                    </span>\n                    @let config = getConfig(item);\n                    <span class=\"ax-w-5\">\n                        @if(config.icon)\n                        {\n                        <i [ngClass]=\"config.icon\"></i>\n                        }\n                    </span>\n                    <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{config.title}} : {{item.name}}</span>\n                    <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2  ax-justify-end \">\n                        @if(config.type=='container')\n                        {\n                        <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n                        }\n                        @if(config.name!=\"page-layout\")\n                        {\n                        <i class=\"fa-light fa-xmark  hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n                        }\n                    </div>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n                    <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                        [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                    </ng-container>\n                </ul>\n                }\n            </li>\n        </ng-template>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">No widgets found in the page\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXPLayoutBuilderModule, AXDecoratorModule], template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72\">\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\">\n            <span class=\"ax-font-semibold\">Outline</span>\n        </div>\n        <ax-close-button></ax-close-button>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        @if(root().children?.length)\n        {\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for( node of root().children;track $index)\n            {\n            <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n            </ng-container>\n            }\n        </ul>\n        <ng-template #sideMenu let-item>\n            <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm\">\n                    <span class=\"ax-w-5\">\n                        @if(item.children?.length)\n                        {\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                            (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n                        }\n                    </span>\n                    @let config = getConfig(item);\n                    <span class=\"ax-w-5\">\n                        @if(config.icon)\n                        {\n                        <i [ngClass]=\"config.icon\"></i>\n                        }\n                    </span>\n                    <span class=\"ax-truncate\">{{config.title}} : {{item.name}}</span>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n                    <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                        [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                    </ng-container>\n                </ul>\n                }\n            </li>\n        </ng-template>\n        }\n        @else {\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No widgets found in the page\n        </div>\n        }\n    </div>\n</div>" }]
+            args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXPLayoutDesignerDrawerContentComponent
+                    ], template: "<axp-designer-drawer-content>\n\n    <ax-title>Outline</ax-title>\n\n    <ax-content body>\n        @if(root().children?.length)\n        {\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for( node of root().children;track $index)\n            {\n            <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\">\n            </ng-container>\n            }\n        </ul>\n        <ng-template #sideMenu let-item>\n            <li (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\">\n                    <span class=\"ax-w-5 \">\n                        @if(item.children?.length)\n                        {\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"isCollapsed(item)\"\n                            (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n                        }\n                    </span>\n                    @let config = getConfig(item);\n                    <span class=\"ax-w-5\">\n                        @if(config.icon)\n                        {\n                        <i [ngClass]=\"config.icon\"></i>\n                        }\n                    </span>\n                    <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{config.title}} : {{item.name}}</span>\n                    <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2  ax-justify-end \">\n                        @if(config.type=='container')\n                        {\n                        <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n                        }\n                        @if(config.name!=\"page-layout\")\n                        {\n                        <i class=\"fa-light fa-xmark  hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n                        }\n                    </div>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n                    <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                        [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                    </ng-container>\n                </ul>\n                }\n            </li>\n        </ng-template>\n        }\n        @else {\n        <div class=\"axp-designer-drawer-empty\">No widgets found in the page\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>" }]
         }], ctorParameters: () => [] });
 
-class AXPWidgetPropertyViewerComponent {
-    constructor() {
-        this.widget = input.required();
-        this.widgetRegistryService = inject(AXPWidgetRegistryService);
-        this.currentTabIndex = signal(0);
-        this.config = signal(null);
-        this.allPoperties = [];
-        this.tabs = signal([]);
-        this.groups = computed(() => {
-            return this.tabs().length ? this.tabs()[this.currentTabIndex()].groups : [];
-        });
-        this.onChanged = new EventEmitter();
-        this.context = signal({});
-        this.initialContext = {};
-        effect(() => {
-            if (!this.widget())
-                return;
-            const config = this.widgetRegistryService.resolve(this.widget()?.type);
-            if (config) {
-                this.initialContext = {};
-                this.config.set(config);
-                this.fillTabs();
-            }
-            else {
-                console.error(`Invalid widget name: ${this.widget()}`);
-            }
-        }, { allowSignalWrites: true });
-    }
-    update(values) {
-        this.context.set(merge(cloneDeep(this.context()), values));
-    }
-    fillTabs() {
-        const tabs = [
-            {
-                name: 'general',
-                title: 'General',
-                groups: [],
-            },
-        ];
-        Object.entries(this.config()?.components ?? {}).forEach((c) => {
-            if (c[1].component != null && c[1].properties?.length) {
-                tabs.push({ name: c[0], title: capitalize(c[0]), groups: [] });
-            }
-        });
-        ///
-        this.allPoperties = [];
-        ///
-        tabs.forEach((tab) => {
-            const props = tab.name == 'general'
-                ? this.config()?.properties ?? []
-                : ((this.config()?.components)[tab.name]?.properties ?? []).filter((c) => c.visible);
-            //
-            this.allPoperties.push(...props);
-            tab.groups = unionBy(sortBy(props.map((pg) => ({
-                isCollapsed: false,
-                name: pg.group.name,
-                title: pg.group.title,
-                props: sortBy(props.filter((p) => p.group.name == pg.group.name), 'title'),
-            })), 'title'), 'name');
-        });
-        this.tabs.set(tabs.filter((c) => c.groups.length));
-        //
-        this.initialContext = this.allPoperties
-            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) || (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
-            .reduce((acc, c) => {
-            set(acc, c.schema.interface.path, c.schema.defaultValue); // Use lodash's set
-            return acc;
-        }, {});
-        //
-        untracked(() => {
-            this.context.set(merge(cloneDeep(this.initialContext), this.widget()));
-            this.onChanged.emit({ values: this.context(), mode: 'init' });
-        });
-    }
-    handleContextChange(e) {
-        untracked(() => {
-            this.context.set(e.data);
-            this.onChanged.emit({ values: this.context(), mode: e.init ? 'init' : 'update' });
-        });
-    }
-    handleTabChange(event) {
-        const indx = event.index;
-        if (this.currentTabIndex() != indx) {
-            this.currentTabIndex.set(indx);
-        }
-    }
-    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)\">\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                    <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                            <axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </axp-widget-renderer>\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: i2$4.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$4.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "component", type: i3$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onChanged)=\"handleContextChange($event)\">\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                    <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                            <axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </axp-widget-renderer>\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"] }]
-        }], ctorParameters: () => [], propDecorators: { onChanged: [{
-                type: Output
-            }] } });
-
-class AXPDesignerHistoryComponent {
+class AXPDesignerPagesComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72\">\n    <!-- Header -->\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\">\n            <span class=\"ax-font-semibold\">History</span>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ax-button look=\"ghost\" class=\"ax-xs\">\n                <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n                <ax-dropdown-panel class=\"ax-xs\">\n                    <ax-button-item-list>\n                        <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n                    </ax-button-item-list>\n                </ax-dropdown-panel>\n            </ax-button>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n\n    <!-- History List or Empty State -->\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        @if(service.history().length)\n        {\n        <!-- History Items -->\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.navigateTo($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm\"\n                [class.ax-italic]=\"step.isFuture\" [class.ax-text-neutral-400]=\"step.isFuture\"\n                [class.ax-bg-neutral-700]=\"step.isCurrent\">\n                <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n                {{ step.description }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <!-- No History Found -->\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">\n            No changes have been made yet.\n        </div>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content>\n\n    <ax-title>Pages</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"ghost\" class=\"ax-xs\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n            <ax-icon class=\"fa-light  fa-file-circle-plus\"></ax-icon>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @let count = service.document().children?.length ?? 0;\n        @if(count)\n        {\n        <ul class=\"ax-text-white ax-text-sm ax-bg-gray-800 ax-p-2 ax-rounded-md ax-space-y-1\">\n            @for( page of service.document().children;track $index)\n            {\n            <li (click)=\"service.goToPage($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out hover:ax-bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n                [class.ax-bg-neutral-700]=\"$index==service.currentPageIndex()\">\n                <div>\n                    <i class=\"fa-light fa-file ax-me-1\"></i>\n                    Page {{$index + 1}}\n                </div>\n                <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2\">\n                    @if(count>1)\n                    {\n                    <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removePage($index)\"></i>\n                    }\n                    <i class=\"fa-light fa-clone  hover:ax-text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n                </div>\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No pages found in the document\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-designer-history', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'axp-designer-pages', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
+                        AXPLayoutBuilderModule,
                         AXDecoratorModule,
                         AXButtonModule,
-                        AXDropdownModule
-                    ], template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72\">\n    <!-- Header -->\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\">\n            <span class=\"ax-font-semibold\">History</span>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ax-button look=\"ghost\" class=\"ax-xs\">\n                <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n                <ax-dropdown-panel class=\"ax-xs\">\n                    <ax-button-item-list>\n                        <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n                    </ax-button-item-list>\n                </ax-dropdown-panel>\n            </ax-button>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n\n    <!-- History List or Empty State -->\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        @if(service.history().length)\n        {\n        <!-- History Items -->\n        <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.navigateTo($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm\"\n                [class.ax-italic]=\"step.isFuture\" [class.ax-text-neutral-400]=\"step.isFuture\"\n                [class.ax-bg-neutral-700]=\"step.isCurrent\">\n                <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n                {{ step.description }}\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <!-- No History Found -->\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">\n            No changes have been made yet.\n        </div>\n        }\n    </div>\n</div>" }]
+                        AXPLayoutDesignerDrawerContentComponent
+                    ], template: "<axp-designer-drawer-content>\n\n    <ax-title>Pages</ax-title>\n\n    <ax-content header>\n        <ax-button look=\"ghost\" class=\"ax-xs\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n            <ax-icon class=\"fa-light  fa-file-circle-plus\"></ax-icon>\n        </ax-button>\n    </ax-content>\n\n    <ax-content body>\n        @let count = service.document().children?.length ?? 0;\n        @if(count)\n        {\n        <ul class=\"ax-text-white ax-text-sm ax-bg-gray-800 ax-p-2 ax-rounded-md ax-space-y-1\">\n            @for( page of service.document().children;track $index)\n            {\n            <li (click)=\"service.goToPage($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out hover:ax-bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n                [class.ax-bg-neutral-700]=\"$index==service.currentPageIndex()\">\n                <div>\n                    <i class=\"fa-light fa-file ax-me-1\"></i>\n                    Page {{$index + 1}}\n                </div>\n                <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2\">\n                    @if(count>1)\n                    {\n                    <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removePage($index)\"></i>\n                    }\n                    <i class=\"fa-light fa-clone  hover:ax-text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n                </div>\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No pages found in the document\n        </div>\n        }\n    </ax-content>\n\n</axp-designer-drawer-content>" }]
         }] });
 
-class AXPDesignerPagesComponent {
+class AXPDesignerHeaderMenuComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72\">\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\">\n            <span class=\"ax-font-semibold\">Pages</span>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ax-button look=\"ghost\" class=\"ax-xs\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n                <ax-icon class=\"fa-light  fa-file-circle-plus\"></ax-icon>\n            </ax-button>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        @let count = service.document().children?.length ?? 0;\n        @if(count)\n        {\n        <ul class=\"ax-text-white ax-text-sm ax-bg-gray-800 ax-p-2 ax-rounded-md ax-space-y-1\">\n            @for( page of service.document().children;track $index)\n            {\n            <li (click)=\"service.goToPage($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n                [class.ax-bg-neutral-700]=\"$index==service.currentPageIndex()\">\n                <div>\n                    <i class=\"fa-light fa-file ax-me-1\"></i>\n                    Page {{$index + 1}}\n                </div>\n                <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2\">\n                    @if(count>1)\n                    {\n                    <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removePage($index)\"></i>\n                    }\n                    <i class=\"fa-light fa-clone  hover:ax-text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n                </div>\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No pages found in the document\n        </div>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: AXDropdownModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item>\n        <ax-text>Home</ax-text>\n        <ax-menu-item (onClick)=\"service.new()\">\n            <ax-text>New</ax-text>\n            <ax-suffix>\n                <ax-text>\n                    Shift+N\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item>\n            <ax-text>Export</ax-text>\n            <ax-menu-item (onClick)=\"service.downloadJson()\">\n                <ax-text>Download JSON</ax-text>\n            </ax-menu-item>\n        </ax-menu-item>\n        <ax-menu-item>\n            <ax-text>Import</ax-text>\n            <ax-menu-item (onClick)=\"service.importJSon()\">\n                <ax-text>Import JSON</ax-text>\n            </ax-menu-item>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n        <ax-text>Edit</ax-text>\n        <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n            <ax-text>Undo</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-left\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Z\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n            <ax-text>Redo</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-right\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n        <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n            <ax-text>Cut</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-cut\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+X\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n            <ax-text>Copy</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-copy\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+C\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n            <ax-text>Paste</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-paste\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+V\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n        <ax-text>Help</ax-text>\n        <ax-menu-item>\n            <ax-text>About</ax-text>\n        </ax-menu-item>\n    </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["disabled", "active", "arrowState"], outputs: ["activeChange", "onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-designer-pages', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ standalone: true, imports: [
                         CommonModule,
-                        AXPLayoutBuilderModule,
                         AXDecoratorModule,
-                        AXButtonModule,
-                        AXDropdownModule
-                    ], template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72\">\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\">\n            <span class=\"ax-font-semibold\">Pages</span>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ax-button look=\"ghost\" class=\"ax-xs\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n                <ax-icon class=\"fa-light  fa-file-circle-plus\"></ax-icon>\n            </ax-button>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        @let count = service.document().children?.length ?? 0;\n        @if(count)\n        {\n        <ul class=\"ax-text-white ax-text-sm ax-bg-gray-800 ax-p-2 ax-rounded-md ax-space-y-1\">\n            @for( page of service.document().children;track $index)\n            {\n            <li (click)=\"service.goToPage($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n                [class.ax-bg-neutral-700]=\"$index==service.currentPageIndex()\">\n                <div>\n                    <i class=\"fa-light fa-file ax-me-1\"></i>\n                    Page {{$index + 1}}\n                </div>\n                <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2\">\n                    @if(count>1)\n                    {\n                    <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removePage($index)\"></i>\n                    }\n                    <i class=\"fa-light fa-clone  hover:ax-text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n                </div>\n            </li>\n            }\n        </ul>\n        }\n        @else {\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-text-gray-300 ax-p-4\">No pages found in the document\n        </div>\n        }\n    </div>\n</div>" }]
+                        AXMenuModule,
+                    ], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item>\n        <ax-text>Home</ax-text>\n        <ax-menu-item (onClick)=\"service.new()\">\n            <ax-text>New</ax-text>\n            <ax-suffix>\n                <ax-text>\n                    Shift+N\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item>\n            <ax-text>Export</ax-text>\n            <ax-menu-item (onClick)=\"service.downloadJson()\">\n                <ax-text>Download JSON</ax-text>\n            </ax-menu-item>\n        </ax-menu-item>\n        <ax-menu-item>\n            <ax-text>Import</ax-text>\n            <ax-menu-item (onClick)=\"service.importJSon()\">\n                <ax-text>Import JSON</ax-text>\n            </ax-menu-item>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n        <ax-text>Edit</ax-text>\n        <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n            <ax-text>Undo</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-left\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Z\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n            <ax-text>Redo</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-rotate-right\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+Y\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n        <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n            <ax-text>Cut</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-cut\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+X\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n            <ax-text>Copy</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-copy\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+C\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n            <ax-text>Paste</ax-text>\n            <ax-prefix>\n                <ax-icon>\n                    <i class=\"fa-solid fa-paste\"></i>\n                </ax-icon>\n            </ax-prefix>\n            <ax-suffix>\n                <ax-text>\n                    Ctrl+V\n                </ax-text>\n            </ax-suffix>\n        </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n        <ax-text>Help</ax-text>\n        <ax-menu-item>\n            <ax-text>About</ax-text>\n        </ax-menu-item>\n    </ax-menu-item>\n</ax-menu>" }]
         }] });
 
 class AXPLayoutDesignerComponent {
@@ -1293,38 +1434,47 @@ class AXPLayoutDesignerComponent {
         });
     }
     handleKeyboardEvent(event) {
+        if (event.shiftKey && event.target == document.body) {
+            switch (event.key.toLowerCase()) {
+                case 'n':
+                    event.preventDefault();
+                    this.service.new();
+                    break;
+            }
+        }
+        //
         if (event.ctrlKey && event.target == document.body) {
-            switch (event.key.toLowerCase()) { // Convert the key to lowercase to ensure case insensitivity
+            switch (event.key.toLowerCase()) {
                 case 'z':
-                    event.preventDefault(); // Prevent the browser's default undo action
+                    event.preventDefault();
                     this.service.undo();
                     break;
                 case 'y':
-                    event.preventDefault(); // Prevent the browser's default redo action
+                    event.preventDefault();
                     this.service.redo();
                     break;
                 case 'c':
                     if (this.service.canCutCopy()) {
-                        event.preventDefault(); // Prevent the browser's default copy action
+                        event.preventDefault();
                         this.service.copy();
                     }
                     break;
                 case 'd':
                     if (this.service.canCutCopy()) {
-                        event.preventDefault(); // Prevent the browser's default copy action
+                        event.preventDefault();
                         this.service.clone();
                     }
                     break;
                 case 'x':
                     if (this.service.canCutCopy()) {
                         debugger;
-                        event.preventDefault(); // Prevent the browser's default cut action
+                        event.preventDefault();
                         this.service.cut();
                     }
                     break;
                 case 'v':
                     if (this.service.canPaste()) {
-                        event.preventDefault(); // Prevent the browser's default paste action
+                        event.preventDefault();
                         this.service.paste();
                     }
                     break;
@@ -1332,7 +1482,7 @@ class AXPLayoutDesignerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full 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-min-h-10 ax-bg-surface ax-border-b  ax-flex ax-flex-grow ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <div class=\"ax-h-full \">\n        <ax-drawer-container class=\"ax-w-full ax-h-full\">\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              Datasources\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\">\n            <axp-designer-board class=\"ax-h-full ax-bg-on-surface ax-flex ax-justify-center\"> </axp-designer-board>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{position:relative;display:block;cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;height:100%;width:100%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$2.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed", "closeOthers"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$2.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "selectionChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative  ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button color=\"ghost\" look=\"twotone\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1 \">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-b  ax-flex ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-h-screen ax-bg-on-surface ax-flex ax-justify-center\">\n          <axp-designer-board> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-700),var(--tw-bg-opacity))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed", "closeOthers"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "selectionChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -1345,6 +1495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPDesignerOutlineComponent,
                         AXPDesignerHeaderMenuComponent,
                         AXPDesignerHistoryComponent,
+                        AXPDesignerDataSourcesComponent,
                         AXPDesignerPagesComponent,
                         AXTabsModule,
                         AXButtonModule,
@@ -1353,7 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXMenuModule,
                         AXButtonGroupModule,
                         AXDropdownModule,
-                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full 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-min-h-10 ax-bg-surface ax-border-b  ax-flex ax-flex-grow ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <div class=\"ax-h-full \">\n        <ax-drawer-container class=\"ax-w-full ax-h-full\">\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              Datasources\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\">\n            <axp-designer-board class=\"ax-h-full ax-bg-on-surface ax-flex ax-justify-center\"> </axp-designer-board>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{position:relative;display:block;cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;height:100%;width:100%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}\n"] }]
+                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative  ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button color=\"ghost\" look=\"twotone\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1 \">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-b  ax-flex ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-h-screen ax-bg-on-surface ax-flex ax-justify-center\">\n          <axp-designer-board> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:#60a5fa;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover:not(.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected){outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#60a5fa}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}.axp-designer-board .grid-stack-item-content{color:#2c3e50;text-align:center;background-color:#18bc9c}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-700),var(--tw-bg-opacity))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { propertyViewer: [{
                 type: ViewChild,
                 args: [AXPWidgetPropertyViewerComponent, { static: true }]
@@ -1366,5 +1517,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerBoardComponent, AXPDesignerGridDrawerComponent, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererComponent, AXPWidgetPropertyViewerComponent };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerConnectorAbstract, AXPDesignerGridDrawerComponent, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererDirective, AXPWidgetPropertyViewerComponent };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map