@acorex/platform 18.0.12 → 18.0.13

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

@@ -1,147 +1,215 @@
 import * as i3$1 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXP_WIDGET_TOKEN, AXPLayoutBuilderModule, AXPContainerWidgetComponent } from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXP_WIDGET_TOKEN, AXPLayoutBuilderModule, AXPContainerWidgetComponent } 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, HostListener, ViewEncapsulation, NgModule, EventEmitter, untracked, Output } from '@angular/core';
+import { signal, computed, Injectable, inject, Injector, NgZone, ElementRef, input, effect, Component, ChangeDetectionStrategy, HostListener, ViewEncapsulation, model, output, HostBinding, 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 { cloneDeep, merge, sortBy, set, get, capitalize, unionBy, isArray, isNil, isEmpty } from 'lodash-es';
+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 { AXButtonModule } from '@acorex/components/button';
-import * as i1$1 from '@acorex/components/decorators';
+import * as i2$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i3$2 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
-import * as i6 from '@acorex/components/dropdown';
+import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i2$2 from '@acorex/components/menu';
+import * as i2$3 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i2$3 from '@acorex/components/tabs';
+import * as i2$4 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i1$2 from '@acorex/components/breadcrumbs';
+import * as i1$1 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import * as i1$3 from '@acorex/components/collapse';
+import * as i1$2 from '@acorex/components/collapse';
 import { AXCollapseModule } from '@acorex/components/collapse';
 
-class AXPObjectHistoryManager {
-    constructor() {
-        this.undoStack = signal([]); // Undo history as a signal
-        this.redoStack = signal([]); // Redo history as a signal
-        this._currentState = signal(null); // Current state as a signal
-        this.maxHistorySize = 50;
-        this.revertedIndex = null; // Track the index when reverting
-        this.currentState = this._currentState.asReadonly();
-        this.canUndo = computed(() => this.undoStack().length > 0);
-        this.canRedo = computed(() => this.redoStack().length > 0);
-        // Get the undo history for UI with disabled future states
-        this.history = computed(() => {
-            const undoHistory = this.undoStack();
-            return undoHistory.map((state, index) => ({
-                ...state,
-                index,
-                disabled: this.revertedIndex !== null && index > this.revertedIndex
-            }));
-        });
+// AddWidgetCommand
+class AddWidgetCommand {
+    constructor(widget, parent, previousSelection) {
+        this.widget = widget;
+        this.parent = parent;
+        this.previousSelection = previousSelection;
     }
-    // Save a new state and clear redo if necessary
-    saveState(newState, description) {
-        const newHistoryState = {
-            state: cloneDeep(newState),
-            date: new Date(),
-            description: description,
-        };
-        // Limit undo history size
-        if (this.undoStack().length >= this.maxHistorySize) {
-            this.undoStack.set(this.undoStack().slice(1)); // Remove oldest state
-        }
-        // Add the current state to the undo stack
-        //if (this._currentState()) {
-        this.undoStack.set([...this.undoStack(), this._currentState()]);
-        //}
-        // Set the new state as the current state
-        this._currentState.set(newHistoryState);
-        // Clear the redo stack if a new state is saved after undoing
-        if (this.revertedIndex !== null) {
-            this.redoStack.set([]);
-            this.revertedIndex = null; // Reset reverted index
+    execute() {
+        this.parent.children = this.parent.children || [];
+        this.parent.children.push(this.widget);
+    }
+    undo() {
+        this.parent.children = this.parent.children || [];
+        const index = this.parent.children.indexOf(this.widget);
+        if (index > -1) {
+            this.parent.children.splice(index, 1);
         }
     }
-    // Update the current state's last entry in the undo stack
-    updateState(newState) {
-        const lastStateIndex = this.undoStack().length - 1;
-        // Check if there is a valid state to update
-        if (lastStateIndex >= 0) {
-            const lastState = this.undoStack()[lastStateIndex];
-            // Update the state in the last history entry
-            const updatedState = {
-                ...lastState,
-                state: cloneDeep(newState),
-                date: new Date() // Update the date to reflect the change
-            };
-            // Update the undo stack with the modified state
-            const updatedUndoStack = [...this.undoStack()];
-            updatedUndoStack[lastStateIndex] = updatedState;
-            this.undoStack.set(updatedUndoStack);
-            // Also update the currentState to reflect the latest change
-            this._currentState.set(updatedState);
+    description() {
+        return `Added widget ${this.widget.name}`;
+    }
+    icon() {
+        return `fa-solid fa-square-plus`;
+    }
+    getExecutionSelection() {
+        return this.widget; // After executing, select the newly added widget
+    }
+    getUndoSelection() {
+        return this.previousSelection; // After undo, select the previously selected widget
+    }
+}
+class RemoveWidgetCommand {
+    constructor(widget, parent, previousSelection) {
+        this.widget = widget;
+        this.parent = parent;
+        this.previousSelection = previousSelection;
+        parent.children = parent.children || [];
+        this.index = parent.children.indexOf(widget); // Capture the index for undo purposes
+    }
+    execute() {
+        this.parent.children = this.parent.children || [];
+        this.index = this.parent.children.indexOf(this.widget); // Re-assert the index in case it has changed
+        this.parent.children.splice(this.index, 1);
+    }
+    undo() {
+        this.parent.children = this.parent.children || [];
+        this.parent.children.splice(this.index, 0, this.widget); // Reinsert at the original index
+    }
+    description() {
+        return `Removed widget ${this.widget.name}`;
+    }
+    icon() {
+        return `fa-solid fa-square-minus`;
+    }
+    getExecutionSelection() {
+        return this.previousSelection; // Typically the parent or a nearby sibling could be focused
+    }
+    getUndoSelection() {
+        return this.widget; // Select the widget itself when the operation is undone
+    }
+}
+class UpdateWidgetCommand {
+    constructor(widget, values, previousSelection) {
+        this.widget = widget;
+        this.newState = merge(cloneDeep(widget), values);
+        this.previousSelection = previousSelection;
+        this.previousState = cloneDeep(widget);
+    }
+    execute() {
+        merge(this.widget, this.newState);
+    }
+    undo() {
+        this.deepPruneAndRestore(this.widget, this.previousState);
+    }
+    description() {
+        return `Updated widget ${this.widget.name}`;
+    }
+    icon() {
+        return `fa-solid fa-pen-to-square`;
+    }
+    getExecutionSelection() {
+        return this.widget; // Focus the widget after it's updated
+    }
+    getUndoSelection() {
+        return this.previousSelection; // Restore the focus to where it was before the update
+    }
+    deepPruneAndRestore(current, original) {
+        Object.keys(current).forEach(key => {
+            if (original.hasOwnProperty(key)) {
+                if (typeof current[key] === 'object' && current[key] !== null && !(current[key] instanceof Array)) {
+                    this.deepPruneAndRestore(current[key], original[key]);
+                }
+            }
+            else {
+                delete current[key]; // Remove properties not present in original
+            }
+        });
+        // Restore the original properties
+        merge(current, original);
+    }
+}
+class CommandManager {
+    constructor() {
+        this.undoStack = signal([]);
+        this.currentIndex = signal(-1);
+        this.selectedNode = signal(null);
+        this.canUndo = computed(() => this.currentIndex() >= 0);
+        this.canRedo = computed(() => this.currentIndex() < this.undoStack().length - 1);
+        this.history = computed(() => this.undoStack().map((cmd, index) => ({
+            description: cmd.description(),
+            icon: cmd.icon(),
+            isPast: this.currentIndex() > index,
+            isFuture: this.currentIndex() < index,
+            isCurrent: this.currentIndex() == index
+        })));
+    }
+    executeCommand(command) {
+        // Check if the currentIndex is not at the end of the undoStack
+        if (this.currentIndex() !== this.undoStack().length - 1) {
+            // Remove all commands beyond the current index to discard the "future" commands
+            const newUndoStack = this.undoStack().slice(0, this.currentIndex() + 1);
+            this.undoStack.set(newUndoStack);
         }
+        command.execute();
+        this.undoStack.set([...this.undoStack(), command]); // Add the new command to the stack
+        this.currentIndex.set(this.undoStack().length - 1); // Update currentIndex to the end of the stack
+        this.selectedNode.set(command.getExecutionSelection()); // Update the selected node
     }
-    // Undo the last action and update the current state
     undo() {
-        if (this.undoStack().length > 0) {
-            const previousState = this.undoStack().pop(); // Get the last state
-            this.redoStack.set([...this.redoStack(), this._currentState()]); // Save current state to redo stack
-            this._currentState.set(previousState); // Revert to the previous state
-            this.revertedIndex = this.undoStack().length - 1; // Update reverted index
+        if (this.currentIndex() >= 0) {
+            const command = this.undoStack()[this.currentIndex()];
+            command.undo();
+            this.currentIndex.set(this.currentIndex() - 1);
+            if (this.currentIndex() >= 0) {
+                this.selectedNode.set(this.undoStack()[this.currentIndex()].getUndoSelection());
+            }
+            else {
+                this.selectedNode.set(null); // No selection if all commands are undone
+            }
         }
     }
-    // Redo the last undone action and update the current state
     redo() {
-        if (this.redoStack().length > 0) {
-            const nextState = this.redoStack().pop(); // Get the next state
-            this.undoStack.set([...this.undoStack(), this._currentState()]); // Save current state to undo stack
-            this._currentState.set(nextState); // Apply the redo state
-            this.revertedIndex = this.undoStack().length - 1; // Update reverted index
+        if (this.currentIndex() < this.undoStack().length - 1) {
+            this.currentIndex.set(this.currentIndex() + 1);
+            const command = this.undoStack()[this.currentIndex()];
+            command.execute();
+            this.selectedNode.set(command.getExecutionSelection());
         }
     }
-    // Revert to a specific state by index in the undo stack
-    revert(index) {
-        if (index < 0 || index >= this.undoStack().length) {
-            return; // Invalid index, do nothing
+    goToCommand(index) {
+        if (index < 0 || index >= this.undoStack().length || index === this.currentIndex()) {
+            return; // Out of bounds or already at the desired index
+        }
+        if (index > this.currentIndex()) {
+            // Need to redo until reaching the desired index
+            while (this.currentIndex() < index) {
+                this.redo();
+            }
+        }
+        else {
+            // Need to undo until reaching the desired index
+            while (this.currentIndex() > index) {
+                this.undo();
+            }
         }
-        const targetState = this.undoStack()[index];
-        const currentStateSnapshot = this._currentState(); // Save the current state for redo
-        // Move states after the reverted index to the redo stack
-        const statesToRedo = this.undoStack().slice(index + 1);
-        this.redoStack.set([currentStateSnapshot, ...statesToRedo]);
-        // Update the undo stack to the reverted point
-        this.undoStack.set(this.undoStack().slice(0, index + 1));
-        // Set the reverted state as the current state
-        this._currentState.set(targetState);
-        this.revertedIndex = index; // Track the reverted index
-    }
-    // Clear all history
+        // Optionally update any UI components or state here
+        this.selectedNode.set(this.undoStack()[this.currentIndex()].getExecutionSelection());
+    }
     clear() {
         this.undoStack.set([]);
-        this.redoStack.set([]);
-        this.revertedIndex = null;
-        this._currentState.set(null);
+        this.currentIndex.set(-1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPObjectHistoryManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPObjectHistoryManager, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CommandManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CommandManager, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPObjectHistoryManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CommandManager, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
         }] });
 
@@ -149,19 +217,20 @@ class AXPDesignerService {
     constructor() {
         this.popupService = inject(AXPopupService);
         this.widgetRegisteryService = inject(AXPWidgetRegistryService);
-        this.historyManager = inject((AXPObjectHistoryManager));
+        this.document = signal(this.createDoc());
+        this.currentPageIndex = signal(0);
+        this.currentPage = signal(this.document().children?.[0]);
+        this.commandManager = inject(CommandManager);
         this.clipboard = signal(null);
-        this.canCutCopy = computed(() => this.selectedNode() != null && this.selectedNode()?.name != "page");
-        this.canPaste = computed(() => (this.clipboard() != null));
-        this.history = computed(() => this.historyManager.history());
-        this.canUndo = computed(() => this.historyManager.canUndo());
-        this.canRedo = computed(() => this.historyManager.canRedo());
-        this.root = signal(this.createPage());
+        this.canCutCopy = computed(() => this.selectedNode() != null && this.selectedNode()?.name != 'page');
+        this.canPaste = computed(() => this.clipboard() != null);
+        this.history = computed(() => this.commandManager.history());
+        this.canUndo = computed(() => this.commandManager.canUndo());
+        this.canRedo = computed(() => this.commandManager.canRedo());
         this.breadcrumbs = computed(() => {
-            return this.selectedNode() ? this.findBreadcrumbs(this.root(), this.selectedNode()) ?? [] : [];
+            return this.selectedNode() ? this.findBreadcrumbs(this.currentPage(), this.selectedNode()) ?? [] : [];
         });
         this.selectedNode = signal(null);
-        this._lastSelectedNode = null;
         this._focusedNode = null;
         this.focusedNode = () => this._focusedNode;
         this.mode = signal('designer');
@@ -172,24 +241,19 @@ class AXPDesignerService {
         this.onFocused = new Subject();
     }
     register(command) {
-        if (!this._lastSelectedNode) {
-            this.select({ widget: command.widget });
-        }
-        else {
-            this.select({ widget: this._lastSelectedNode });
-        }
+        this.select({ widget: command.widget });
     }
     select(command) {
         this.selectedNode.set(command.widget);
-        this._lastSelectedNode = this.selectedNode();
         this.onSelected.next(command);
     }
     update(command) {
-        if (command.mode == 'update') {
-            this.historyManager.saveState(cloneDeep(this.root()), `Updated ${this.selectedNode()?.name}`);
+        const node = command.widget ?? this.selectedNode();
+        if (command.mode == 'update' && node) {
+            this.commandManager.executeCommand(new UpdateWidgetCommand(node, command.values, node));
         }
-        this.selectedNode.update(c => merge(this.selectedNode(), command.values));
-        this.onUpdate.next({ widget: this.selectedNode(), values: command.values });
+        this.selectedNode.update((c) => merge(node, command.values));
+        this.onUpdate.next({ widget: node, values: command.values });
     }
     focus(command) {
         if (this._focusedNode != command.widget) {
@@ -220,36 +284,68 @@ class AXPDesignerService {
         return undefined;
     }
     async showPicker(currentNode) {
-        const com = await import('./acorex-platform-layout-designer-widget-picker.component-DkZGbnkz.mjs').then(c => c.AXPDesignerWidgetPickerComponent);
+        const com = await import('./acorex-platform-layout-designer-widget-picker.component-CaMaBGON.mjs').then((c) => c.AXPDesignerWidgetPickerComponent);
         const result = await this.popupService.open(com, {
-            title: "Widget Gallery",
+            title: 'Widget Gallery',
             size: 'md',
             closeButton: true,
             data: {
-                widgets: sortBy(this.widgetRegisteryService.all().filter(c => c.visible != false), c => c.title)
-            }
+                widgets: sortBy(this.widgetRegisteryService.all().filter((c) => c.visible != false), (c) => c.title),
+            },
         });
         if ((result.data?.widgets ?? []).length) {
             const selected = result.data?.widgets;
-            selected.forEach(c => {
+            selected.forEach((c) => {
                 this.addWidget(currentNode, { type: c.name });
             });
         }
     }
+    createDoc() {
+        const doc = {
+            type: AXPWidgetsCatalog.document,
+            children: [this.createPage()],
+            name: 'document',
+        };
+        set(doc, '__meta__.id', Math.random() * Math.pow(10, 18));
+        return doc;
+    }
     createPage() {
-        const config = this.widgetRegisteryService.resolve('page');
+        const config = this.widgetRegisteryService.resolve('page-layout');
         const page = {
-            type: 'page',
+            type: 'page-layout',
             children: [],
-            name: "page",
+            name: 'page-layout1',
         };
         set(page, '__meta__.id', Math.random() * Math.pow(10, 18));
         set(page, '__meta__.config', config);
-        this.historyManager.saveState(page, "New");
         return page;
     }
+    addNewPage() {
+        this.addWidget(this.document(), this.createPage());
+        this.goToPage(this.currentPageIndex() + 1);
+    }
+    removePage(index) {
+        const page = this.document().children?.[index];
+        this.removeWidget(page);
+        this.goToPage(index - 1);
+    }
+    clonePage(index) {
+        const page = this.document().children?.[index];
+        this.clone(page);
+        this.goToPage((this.document().children?.length ?? 1) - 1);
+    }
+    goToPage(index) {
+        this.currentPageIndex.set(index);
+        setTimeout(() => {
+            this.currentPage.set(this.document().children?.[this.currentPageIndex()]);
+            this.select({ widget: this.currentPage() });
+        });
+    }
+    reRenderPage() {
+        this.currentPage.set({ ...this.currentPage() });
+    }
     findWidgetById(root, id) {
-        if (get(root, "__meta__.id") === id) {
+        if (get(root, '__meta__.id') === id) {
             return root; // Return the root if it matches the ID
         }
         if (!root.children)
@@ -262,10 +358,10 @@ class AXPDesignerService {
         }
         return null; // Node not found
     }
-    findParent(id, parent = this.root()) {
+    findParent(id, parent = this.currentPage()) {
         if (!parent.children)
             return null;
-        if (parent.children.some(child => get(child, "__meta__.id") === id)) {
+        if (parent.children.some((child) => get(child, '__meta__.id') === id)) {
             return parent; // Return this node as it's the parent of the node with the given ID
         }
         for (const child of parent.children) {
@@ -283,7 +379,7 @@ class AXPDesignerService {
                 if (config && config.container) {
                     return current;
                 }
-                current = this.findParent(get(current, "__meta__.id")); // Use findParent to navigate upwards
+                current = this.findParent(get(current, '__meta__.id')); // Use findParent to navigate upwards
             }
         }
         else {
@@ -307,76 +403,68 @@ class AXPDesignerService {
             return null;
         //
         const cloned = cloneDeep(node);
-        this.historyManager.saveState(cloneDeep(this.root()), `Added ${cloned.type}`);
-        //
-        if (!currentNode.children) {
-            currentNode.children = [];
-        }
         const config = this.widgetRegisteryService.resolve(node.type);
         //
+        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__.config', config);
         //
-        currentNode.children.push(cloned);
-        //
-        this.historyManager.updateState(this.root());
+        this.reRenderPage();
         //
         this.refresh({ widget: currentNode });
         this.select({ widget: cloned });
         return cloned;
     }
     removeWidget(node) {
-        if (node.type === "page") {
-            console.error("Cannot remove the page node.");
-            return; // Prevent removing the root page node
+        if (node.type === 'document-layout' || (node.type === 'page-layout' && (this.document().children?.length ?? 1) == 1)) {
+            console.error('Cannot remove the page node.');
+            return; // Prevent removing the root page node or document
         }
-        this.historyManager.saveState(cloneDeep(this.root()), `Removed ${node.name}`);
-        const nodeIdToRemove = get(node, "__meta__.id");
+        const nodeIdToRemove = get(node, '__meta__.id');
         if (!nodeIdToRemove) {
-            throw new Error("Node does not have a valid __meta__.id to identify it for removal.");
+            throw new Error('Node does not have a valid __meta__.id to identify it for removal.');
         }
         // Find the parent of the node to remove it
-        const parent = this.findParent(nodeIdToRemove, this.root());
+        const parent = this.findParent(nodeIdToRemove, this.document());
         if (!parent) {
-            throw new Error("Parent node not found. The node might be the root node or does not exist.");
-        }
-        const index = parent.children?.findIndex(child => get(child, "__meta__.id") === nodeIdToRemove) ?? -1;
-        if (index > -1) {
-            parent.children.splice(index, 1);
-            //
-            this.historyManager.updateState(this.root());
-            //
-            this.refresh({ widget: parent }); // Refresh the UI to reflect changes
-            this.select({ widget: parent }); // Select the parent node after removal
-        }
-        else {
-            throw new Error("Node to remove not found in the widget tree.");
+            throw new Error('Parent node not found. The node might be the root node or does not exist.');
         }
-    }
-    revertToChange(index) {
-        this.historyManager.revert(index);
-        this.root.set(this.historyManager.currentState()?.state);
-        this.refresh({ widget: this.root() });
+        const previousSelection = this.selectedNode(); // Capture the currently selected node before removal
+        const command = new RemoveWidgetCommand(node, parent, previousSelection);
+        this.commandManager.executeCommand(command);
+        this.refresh({ widget: parent }); // Refresh the UI to reflect changes
+        this.select({ widget: parent }); // Select the parent node after removal
+    }
+    navigateTo(index) {
+        this.commandManager.goToCommand(index);
+        this.reRenderPage();
+        const currentSelection = this.commandManager.selectedNode();
+        this.refresh({ widget: this.currentPage() });
+        this.select({ widget: currentSelection });
     }
     redo() {
-        if (this.historyManager.canRedo()) {
-            this.historyManager.redo();
-            this.root.set(this.historyManager.currentState()?.state);
-            this.refresh({ widget: this.root() });
-        }
+        this.commandManager.redo();
+        this.reRenderPage();
+        const currentSelection = this.commandManager.selectedNode();
+        this.refresh({ widget: this.currentPage() });
+        this.select({ widget: currentSelection });
     }
     undo() {
-        if (this.historyManager.canUndo()) {
-            this.historyManager.undo();
-            this.root.set(this.historyManager.currentState()?.state);
-            this.refresh({ widget: this.root() });
-        }
+        this.commandManager.undo();
+        this.reRenderPage();
+        const currentSelection = this.commandManager.selectedNode();
+        this.refresh({ widget: this.currentPage() });
+        this.select({ widget: currentSelection });
+    }
+    clearHistory() {
+        this.commandManager.clear();
     }
     formatOutputJSON(obj, nodeName) {
         // Check if the object is an array
         if (Array.isArray(obj)) {
-            return obj.map(item => this.formatOutputJSON(item, nodeName));
+            return obj.map((item) => this.formatOutputJSON(item, nodeName));
         }
         else if (typeof obj === 'object' && obj !== null) {
             // Create a new object to store the result
@@ -403,47 +491,57 @@ class AXPDesignerService {
         this.copy(widget); // Copy the widget to the clipboard
         this.removeWidget(widget); // Reuse the removeWidget method which should handle undo internally
     }
-    paste(parentNode = this.selectedNode() ?? this.root()) {
+    clone(widget = this.selectedNode()) {
+        if (!widget)
+            return;
+        this.copy(widget); // Copy the widget to the clipboard
+        if (widget.type == 'page-layout') {
+            this.paste(this.document());
+        }
+        else {
+            this.paste(widget);
+        }
+    }
+    paste(parentNode = this.selectedNode() ?? this.currentPage()) {
         if (!this.clipboard() || !this.selectedNode()) {
-            console.error("Clipboard is empty or no node is selected.");
+            console.error('Clipboard is empty or no node is selected.');
             return;
         }
         const newNode = cloneDeep(this.clipboard());
         const nearestContainer = this.findNearestContainer(parentNode, true);
         if (!nearestContainer) {
-            console.error("No suitable container found.");
+            console.error('No suitable container found.');
             return;
         }
         //
-        this.historyManager.saveState(newNode, `Pasted ${newNode.name}`); // Prepare for undo functionality
-        //
         if (!nearestContainer.children) {
             nearestContainer.children = [];
         }
-        set(newNode, "__meta__.id", Math.random() * Math.pow(10, 18)); // Ensure a unique ID
+        newNode.name = this.generateUniqueName(newNode.type);
+        set(newNode, '__meta__.id', Math.random() * Math.pow(10, 18)); // Ensure a unique ID
         //
-        nearestContainer.children.push(newNode); // Add the new node to the container
+        this.commandManager.executeCommand(new AddWidgetCommand(newNode, nearestContainer, nearestContainer));
         //
-        this.historyManager.updateState(this.root());
-        //
-        this.refresh({ widget: nearestContainer }); // Refresh the UI
-        this.select({ widget: newNode }); // Select the newly pasted node
+        setTimeout(() => {
+            this.refresh({ widget: nearestContainer }); // Refresh the UI
+            this.select({ widget: newNode }); // Select the newly pasted node
+        });
     }
     export() {
-        const json = this.formatOutputJSON(this.root(), "__meta__");
+        const json = this.formatOutputJSON(this.document(), '__meta__');
         return JSON.stringify(json);
     }
     download() {
         // Convert the object to a JSON string
         const jsonStr = this.export();
         // Create a blob object from the JSON string
-        const blob = new Blob([jsonStr], { type: "application/json" });
+        const blob = new Blob([jsonStr], { type: 'application/json' });
         // Create a URL for the blob object
         const url = URL.createObjectURL(blob);
         // Create a temporary <a> element to trigger the download
-        const a = document.createElement("a");
+        const a = document.createElement('a');
         a.href = url;
-        a.download = "export.json";
+        a.download = 'export.json';
         // Append the <a> element to the document body (necessary for some browsers)
         document.body.appendChild(a);
         // Trigger the download by clicking the <a> element
@@ -464,7 +562,7 @@ class AXPDesignerService {
         let uniqueName = `${baseName}${index}`;
         // Gather all existing names to check against
         const existingNames = new Set();
-        this.collectAllNames(this.root(), existingNames);
+        this.collectAllNames(this.document(), existingNames);
         // Increment the index until a unique name is found
         while (existingNames.has(uniqueName)) {
             index++;
@@ -487,6 +585,17 @@ class AXPDesignerService {
             }
         }
     }
+    async openPreview() {
+        const com = await import('./acorex-platform-layout-designer-widget-picker.component-CaMaBGON.mjs').then((c) => c.AXPDesignerWidgetPickerComponent);
+        await this.popupService.open(com, {
+            title: 'Widget Gallery',
+            size: 'full',
+            closeButton: true,
+            data: {
+                widgets: sortBy(this.widgetRegisteryService.all().filter((c) => c.visible != false), (c) => c.title),
+            },
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerService }); }
 }
@@ -541,7 +650,7 @@ class AXPWidgetDesignerRendererComponent {
         //
         this.service.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             if (this.isCurrentWidget(c.widget)) {
-                this.instance.setChildren(this.node().children ?? []);
+                this.instance?.setChildren(this.node().children ?? []);
             }
         });
         //
@@ -656,7 +765,7 @@ class AXPWidgetDesignerRendererComponent {
         });
     }
     applyOptions(values) {
-        if (this.node().defaultValue != null) {
+        if (this.instance && this.node().defaultValue != null) {
             this.instance.setValue(this.node().defaultValue);
         }
         this.mergedOptions.update((currentOptions) => {
@@ -796,40 +905,8 @@ class AXPDesignerBoardComponent {
     removeCustomClass() {
         this.elementRef.nativeElement.querySelectorAll('style').forEach(s => s.remove());
     }
-    handleKeyboardEvent(event) {
-        if (event.ctrlKey) {
-            switch (event.key.toLowerCase()) { // Convert the key to lowercase to ensure case insensitivity
-                case 'z':
-                    event.preventDefault(); // Prevent the browser's default undo action
-                    this.service.undo();
-                    break;
-                case 'y':
-                    event.preventDefault(); // Prevent the browser's default redo action
-                    this.service.redo();
-                    break;
-                case 'c':
-                    if (this.service.canCutCopy()) {
-                        event.preventDefault(); // Prevent the browser's default copy action
-                        this.service.copy();
-                    }
-                    break;
-                case 'x':
-                    if (this.service.canCutCopy()) {
-                        event.preventDefault(); // Prevent the browser's default cut action
-                        this.service.cut();
-                    }
-                    break;
-                case 'v':
-                    if (this.service.canPaste()) {
-                        event.preventDefault(); // Prevent the browser's default paste action
-                        this.service.paste();
-                    }
-                    break;
-            }
-        }
-    }
     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: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, 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.root()\" [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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
@@ -837,11 +914,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         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.root()\" [mode]=\"service.mode()\">\n        </axp-widget-designer-renderer>\n    </axp-widgets-container>\n</div>" }]
-        }], propDecorators: { handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+                    ], 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() {
@@ -854,37 +928,103 @@ class AXPDesignerAddWidgetButtonComponent {
     }
     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-mx-auto">
+    <div class="ax-container">
       <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'twotone'">
         <ax-icon icon="fa-solid fa-plus"></ax-icon>
       </ax-button>
     </div>
-  `, isInline: true, styles: ["axp-designer-add-widget-button .ax-container{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: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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-mx-auto">
+    <div class="ax-container">
       <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'twotone'">
         <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{display:flex;justify-content:center;padding:.5rem}\n"] }]
+  `, 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 AXPDesignerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerModule }); }
+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 >{{rangeR()}}*{{rangeC()}}</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: AXPDesignerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [],
-                    declarations: [],
-                }]
-        }] });
+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 >{{rangeR()}}*{{rangeC()}}</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']
+            }] } });
 
 class AXPDesignerBreadcrumbsComponent {
     constructor() {
@@ -911,7 +1051,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$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 }); }
+    `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -946,7 +1086,7 @@ class AXPDesignerHeaderMenuComponent {
         this.service = inject(AXPDesignerService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\">\n    <ax-menu-item 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: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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", "text", "active"], outputs: ["activeChange", "onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
@@ -961,12 +1101,17 @@ class AXPDesignerOutlineComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
         this.collapsedStates = new Map();
-        this.root = signal(this.service.root());
-        merge$1(this.service.onRefresh, this.service.onUpdate)
-            .subscribe(() => {
-            this.root.update(c => ({ ...this.service.root() }));
+        this.root = signal(this.getTree());
+        merge$1(this.service.onRefresh, this.service.onUpdate).subscribe(() => {
+            this.root.update((c) => ({ ...this.getTree() }));
         });
     }
+    getTree() {
+        return {
+            type: AXPWidgetsCatalog.document,
+            children: [this.service.currentPage()],
+        };
+    }
     toggleCollapse(node) {
         // Toggle the current state or set to true if undefined
         this.collapsedStates.set(node, !this.collapsedStates.get(node));
@@ -976,7 +1121,7 @@ class AXPDesignerOutlineComponent {
         return !!this.collapsedStates.get(node);
     }
     getConfig(node) {
-        return get(node, "__meta__.config");
+        return get(node, '__meta__.config');
     }
     handleClick(e, node) {
         e.stopPropagation();
@@ -991,15 +1136,11 @@ 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\n        @if(root().children?.length)\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( 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 class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700\"\n                (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-blue-200]=\"item === service.selectedNode()\"\n                    [class.ax-text-blue-900]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-p-1 ax-px-2\">\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>{{config.title}} : {{item.name}}</span>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-pl-5 ax-space-y-1\">\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: i1$1.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: "<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 }); }
 }
 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\n        @if(root().children?.length)\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( 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 class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700\"\n                (click)=\"handleClick($event,item)\" (mouseover)=\"handleMouseOver($event,item)\">\n                <div [class.ax-bg-blue-200]=\"item === service.selectedNode()\"\n                    [class.ax-text-blue-900]=\"item === service.selectedNode()\"\n                    class=\"ax-flex ax-flex-row ax-items-center ax-p-1 ax-px-2\">\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>{{config.title}} : {{item.name}}</span>\n                </div>\n                @if(item.children?.length && !isCollapsed(item)) {\n                <ul class=\"ax-pl-5 ax-space-y-1\">\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, 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>" }]
         }], ctorParameters: () => [] });
 
 class AXPWidgetPropertyViewerComponent {
@@ -1030,6 +1171,9 @@ class AXPWidgetPropertyViewerComponent {
             }
         }, { allowSignalWrites: true });
     }
+    update(values) {
+        this.context.set(merge(cloneDeep(this.context()), values));
+    }
     fillTabs() {
         const tabs = [
             {
@@ -1076,8 +1220,8 @@ class AXPWidgetPropertyViewerComponent {
     handleContextChange(e) {
         untracked(() => {
             this.context.set(e.data);
+            this.onChanged.emit({ values: this.context(), mode: e.init ? 'init' : 'update' });
         });
-        this.onChanged.emit({ values: this.context(), mode: 'update', });
     }
     handleTabChange(event) {
         const indx = event.index;
@@ -1086,7 +1230,7 @@ class AXPWidgetPropertyViewerComponent {
         }
     }
     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$3.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$3.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$3.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 }); }
+    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,
@@ -1100,23 +1244,84 @@ class AXPDesignerHistoryComponent {
         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        <ax-close-button></ax-close-button>\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-2 ax-p-2 ax-text-white ax-text-sm\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.revertToChange($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700\">\n                {{ step.description }} {{step.disabled}}\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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.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: 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 }); }
 }
 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,
-                    ], 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        <ax-close-button></ax-close-button>\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-2 ax-p-2 ax-text-white ax-text-sm\">\n            @for (step of service.history(); track $index) {\n            <li (click)=\"service.revertToChange($index)\"\n                class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700\">\n                {{ step.description }} {{step.disabled}}\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>" }]
+                        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>" }]
+        }] });
+
+class AXPDesignerPagesComponent {
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
+            type: Component,
+            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    <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>" }]
         }] });
 
 class AXPLayoutDesignerComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
         this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null);
+        this.service.onUpdate.subscribe((e) => {
+            this.propertyViewer.update(e.values);
+        });
+    }
+    handleKeyboardEvent(event) {
+        if (event.ctrlKey) {
+            switch (event.key.toLowerCase()) { // Convert the key to lowercase to ensure case insensitivity
+                case 'z':
+                    event.preventDefault(); // Prevent the browser's default undo action
+                    this.service.undo();
+                    break;
+                case 'y':
+                    event.preventDefault(); // Prevent the browser's default redo action
+                    this.service.redo();
+                    break;
+                case 'c':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault(); // Prevent the browser's default copy action
+                        this.service.copy();
+                    }
+                    break;
+                case 'd':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault(); // Prevent the browser's default copy action
+                        this.service.clone();
+                    }
+                    break;
+                case 'x':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault(); // Prevent the browser's default cut action
+                        this.service.cut();
+                    }
+                    break;
+                case 'v':
+                    if (this.service.canPaste()) {
+                        event.preventDefault(); // Prevent the browser's default paste action
+                        this.service.paste();
+                    }
+                    break;
+            }
+        }
     }
     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", providers: [AXPDesignerService], 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\">\n          <ax-icon class=\"fa-solid fa-plus ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\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\">\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          <ax-drawer #bd location=\"start\" mode=\"push\">\n            <ax-content>\n              <div class=\"ax-min-w-80 ax-h-full ax-overflow-auto ax-border-e\"></div>\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;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1);position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1)}.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%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}\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: "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"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3$2.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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: i6.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 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;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6}.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%;background:rgba(202,123,123,.39)}@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-400),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-400),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-400),50%) 0,rgba(var(--ax-color-primary-400),50%) 60%,transparent 0,transparent);background-size:6px 6px}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -1129,6 +1334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPDesignerOutlineComponent,
                         AXPDesignerHeaderMenuComponent,
                         AXPDesignerHistoryComponent,
+                        AXPDesignerPagesComponent,
                         AXTabsModule,
                         AXButtonModule,
                         AXDrawerModule,
@@ -1136,12 +1342,18 @@ 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\">\n          <ax-icon class=\"fa-solid fa-plus ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\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\">\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          <ax-drawer #bd location=\"start\" mode=\"push\">\n            <ax-content>\n              <div class=\"ax-min-w-80 ax-h-full ax-overflow-auto ax-border-e\"></div>\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;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1);position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1)}.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%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}\n"] }]
-        }] });
+                    ], 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;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6}.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%;background:rgba(202,123,123,.39)}@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-400),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-400),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-400),50%) 0,rgba(var(--ax-color-primary-400),50%) 60%,transparent 0,transparent);background-size:6px 6px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { propertyViewer: [{
+                type: ViewChild,
+                args: [AXPWidgetPropertyViewerComponent, { static: true }]
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerBoardComponent, AXPDesignerModule, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererComponent, AXPWidgetPropertyViewerComponent };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerBoardComponent, AXPDesignerGridDrawerComponent, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererComponent, AXPWidgetPropertyViewerComponent };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map