@acorex/platform 18.0.10 → 18.0.11

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

@@ -1,14 +1,784 @@
-import * as i3 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import * as i3$1 from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, 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 { input, inject, signal, computed, effect, Component, NgModule } from '@angular/core';
-import { capitalize, unionBy, sortBy, isArray, isNil, isEmpty, merge, cloneDeep } from 'lodash-es';
-import * as i1 from '@acorex/components/collapse';
-import { AXCollapseModule } from '@acorex/components/collapse';
-import * as i2 from '@acorex/components/tabs';
+import { signal, computed, inject, Injectable, Injector, NgZone, ElementRef, input, effect, Component, ChangeDetectionStrategy, HostListener, ViewEncapsulation, HostBinding, NgModule, EventEmitter, untracked, Output } from '@angular/core';
+import * as i3 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i2 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { merge, sortBy, set, get, cloneDeep, 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 i1$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i3$2 from '@acorex/components/drawer';
+import { AXDrawerModule } from '@acorex/components/drawer';
+import * as i2$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import { CommonModule } from '@angular/common';
-import { AXPWidgetsModule } from '@acorex/platform/widgets';
+import * as i1$2 from '@acorex/components/breadcrumbs';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i1$3 from '@acorex/components/collapse';
+import { AXCollapseModule } from '@acorex/components/collapse';
+import * as i5 from '@acorex/components/menu';
+import { AXMenuModule } from '@acorex/components/menu';
+
+class AXPDesignerService {
+    constructor() {
+        this.clipboard = signal(null);
+        this.undoStack = [];
+        this.redoStack = [];
+        this.maxHistorySize = 20;
+        this.canUndo = signal(false);
+        this.canRedo = signal(false);
+        this.canCutCopy = computed(() => this.selectedNode() != null && this.selectedNode()?.name != "page");
+        this.canPaste = computed(() => (this.clipboard() != null));
+        this.popupService = inject(AXPopupService);
+        this.widgetRegisteryService = inject(AXPWidgetRegistryService);
+        this.root = signal(this.createPage());
+        this.breadcrumbs = computed(() => {
+            return this.selectedNode() ? this.findBreadcrumbs(this.root(), this.selectedNode()) ?? [] : [];
+        });
+        this.selectedNode = signal(null);
+        this._lastSelectedNode = null;
+        this._focusedNode = null;
+        this.focusedNode = () => this._focusedNode;
+        this._mode = signal('designer');
+        this.mode = this._mode.asReadonly();
+        this.onSelected = new Subject();
+        this.onRefresh = new Subject();
+        this.onUpdate = new Subject();
+        this.onFocused = new Subject();
+    }
+    setMode(mode) {
+        this._mode.set(mode);
+    }
+    register(command) {
+        if (!this._lastSelectedNode) {
+            this.select({ widget: command.widget });
+        }
+        else {
+            this.select({ widget: this._lastSelectedNode });
+        }
+    }
+    select(command) {
+        this.selectedNode.set(command.widget);
+        this._lastSelectedNode = this.selectedNode();
+        this.onSelected.next(command);
+    }
+    update(command) {
+        if (command.mode == 'update') {
+            console.log(this.selectedNode()?.name, command);
+            this.saveStateForUndo();
+        }
+        this.selectedNode.update(c => merge(this.selectedNode(), command.values));
+        this.onUpdate.next({ widget: this.selectedNode(), values: command.values });
+    }
+    focus(command) {
+        if (this._focusedNode != command.widget) {
+            this._focusedNode = command.widget;
+            this.onFocused.next({ widget: this._focusedNode });
+        }
+    }
+    refresh(command) {
+        this.onRefresh.next({ widget: command.widget });
+    }
+    findBreadcrumbs(node, targetNode, breadcrumb = []) {
+        // Add the current node to the breadcrumb path
+        const currentBreadcrumb = [...breadcrumb, node];
+        // Check if the current node is the target node
+        if (node === targetNode) {
+            return currentBreadcrumb;
+        }
+        // If the node has children, recursively search them
+        if (node.children) {
+            for (const child of node.children) {
+                const result = this.findBreadcrumbs(child, targetNode, currentBreadcrumb);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        // Return undefined if no match is found
+        return undefined;
+    }
+    async showPicker(currentNode) {
+        const com = await import('./acorex-platform-layout-designer-widget-picker.component-DkZGbnkz.mjs').then(c => c.AXPDesignerWidgetPickerComponent);
+        const result = await this.popupService.open(com, {
+            title: "Widget Gallery",
+            size: 'md',
+            closeButton: true,
+            data: {
+                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 => {
+                this.addWidget(currentNode, { type: c.name });
+            });
+        }
+    }
+    createPage() {
+        const config = this.widgetRegisteryService.resolve('page');
+        const page = {
+            type: 'page',
+            children: [],
+            name: "page",
+        };
+        set(page, '__meta__.id', Math.random() * Math.pow(10, 18));
+        set(page, '__meta__.config', config);
+        return page;
+    }
+    findWidgetById(root, id) {
+        if (get(root, "__meta__.id") === id) {
+            return root; // Return the root if it matches the ID
+        }
+        if (!root.children)
+            return null;
+        for (const child of root.children) {
+            const found = this.findWidgetById(child, id);
+            if (found) {
+                return found; // Return the found child
+            }
+        }
+        return null; // Node not found
+    }
+    findParent(id, parent = this.root()) {
+        if (!parent.children)
+            return null;
+        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) {
+            const foundParent = this.findParent(id, child);
+            if (foundParent)
+                return foundParent;
+        }
+        return null; // No parent found
+    }
+    findNearestContainer(node, searchUpward = true) {
+        if (searchUpward) {
+            let current = node;
+            while (current) {
+                const config = this.widgetRegisteryService.resolve(current.type);
+                if (config && config.container) {
+                    return current;
+                }
+                current = this.findParent(get(current, "__meta__.id")); // Use findParent to navigate upwards
+            }
+        }
+        else {
+            // Recursive search to find the first container among children
+            if (node.children) {
+                for (const child of node.children) {
+                    const config = this.widgetRegisteryService.resolve(child.type);
+                    if (config && config.container) {
+                        return child;
+                    }
+                    const foundContainer = this.findNearestContainer(child, false); // Continue searching downwards
+                    if (foundContainer)
+                        return foundContainer;
+                }
+            }
+        }
+        return null; // Return null if no container found
+    }
+    addWidget(currentNode, node) {
+        if (!currentNode)
+            return null;
+        //
+        this.saveStateForUndo();
+        //
+        if (!currentNode.children) {
+            currentNode.children = [];
+        }
+        const config = this.widgetRegisteryService.resolve(node.type);
+        //
+        const cloned = cloneDeep(node);
+        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.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
+        }
+        this.saveStateForUndo(); // Save state before making changes
+        const nodeIdToRemove = get(node, "__meta__.id");
+        if (!nodeIdToRemove) {
+            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());
+        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.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.");
+        }
+    }
+    saveStateForUndo() {
+        if (this.undoStack.length >= this.maxHistorySize) {
+            this.undoStack.shift(); // Remove the oldest snapshot if exceeding the max history size.
+        }
+        this.undoStack.push(cloneDeep(this.root()));
+        this.canUndo.set(true);
+        // Clear the redo stack whenever a new change is made after undo
+        if (this.redoStack.length > 0) {
+            this.redoStack = [];
+            this.canRedo.set(false);
+        }
+    }
+    applyState(state) {
+        this.root.set(state);
+        this.refresh({ widget: this.root() });
+        //TODO: select the selected widget on this state
+        this.select({ widget: this._lastSelectedNode ?? this.root() });
+    }
+    undo() {
+        if (this.undoStack.length > 0) {
+            const currentState = cloneDeep(this.root());
+            this.redoStack.push(currentState);
+            const prevState = this.undoStack.pop();
+            this.applyState(prevState);
+            this.canUndo.set(this.undoStack.length > 0);
+            this.canRedo.set(true); // There is at least one action to redo now
+        }
+    }
+    redo() {
+        if (this.redoStack.length > 0) {
+            const nextState = this.redoStack.pop();
+            this.undoStack.push(cloneDeep(this.root()));
+            this.applyState(nextState);
+            this.canRedo.set(this.redoStack.length > 0);
+            this.canUndo.set(true); // Undo is always available after a redo
+        }
+    }
+    formatOutputJSON(obj, nodeName) {
+        // Check if the object is an array
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.formatOutputJSON(item, nodeName));
+        }
+        else if (typeof obj === 'object' && obj !== null) {
+            // Create a new object to store the result
+            let newObj = {};
+            for (let key in obj) {
+                // Only add the key if it's not the nodeName we want to remove
+                if (key !== nodeName) {
+                    newObj[key] = this.formatOutputJSON(obj[key], nodeName);
+                }
+            }
+            return newObj;
+        }
+        // If the value is not an object or array, return it as is
+        return obj;
+    }
+    copy(widget = this.selectedNode()) {
+        if (!widget)
+            return;
+        this.clipboard.set(cloneDeep(widget)); // Use lodash's cloneDeep to ensure a deep copy
+    }
+    cut(widget = this.selectedNode()) {
+        if (!widget)
+            return;
+        this.copy(widget); // Copy the widget to the clipboard
+        this.removeWidget(widget); // Reuse the removeWidget method which should handle undo internally
+    }
+    paste(parentNode = this.selectedNode() ?? this.root()) {
+        if (!this.clipboard() || !this.selectedNode()) {
+            console.error("Clipboard is empty or no node is selected.");
+            return;
+        }
+        const nearestContainer = this.findNearestContainer(parentNode, true);
+        if (!nearestContainer) {
+            console.error("No suitable container found.");
+            return;
+        }
+        //
+        this.saveStateForUndo(); // Prepare for undo functionality
+        //
+        if (!nearestContainer.children) {
+            nearestContainer.children = [];
+        }
+        const newNode = cloneDeep(this.clipboard());
+        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.refresh({ widget: nearestContainer }); // Refresh the UI
+        this.select({ widget: newNode }); // Select the newly pasted node
+    }
+    export() {
+        const json = this.formatOutputJSON(this.root(), "__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" });
+        // 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");
+        a.href = url;
+        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
+        a.click();
+        // Clean up by revoking the object URL and removing the <a> element
+        URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+    }
+    /**
+     * Generates a well-formed, unique name for a new widget node based on its type.
+     * @param type The type of the widget (e.g., 'textBox', 'numberBox').
+     * @returns A unique name for the widget (e.g., 'textBox1', 'numberBox2').
+     */
+    generateUniqueName(type) {
+        // Normalize the type to follow camelCase convention
+        const baseName = type.charAt(0).toLowerCase() + type.slice(1);
+        let index = 1;
+        let uniqueName = `${baseName}${index}`;
+        // Gather all existing names to check against
+        const existingNames = new Set();
+        this.collectAllNames(this.root(), existingNames);
+        // Increment the index until a unique name is found
+        while (existingNames.has(uniqueName)) {
+            index++;
+            uniqueName = `${baseName}${index}`;
+        }
+        return uniqueName;
+    }
+    /**
+     * Collects all existing widget names from the widget tree.
+     * @param node The current node being inspected.
+     * @param names A set to store existing names.
+     */
+    collectAllNames(node, names) {
+        if (node.name) {
+            names.add(node.name);
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                this.collectAllNames(child, names);
+            }
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerService, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPWidgetDesignerRendererComponent {
+    /**
+     * @ignore
+     */
+    constructor() {
+        this.mergedOptions = signal({});
+        this.injector = inject(Injector);
+        this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.zone = inject(NgZone);
+        this.isLoading = signal(true);
+        this.service = inject(AXPDesignerService);
+        this.elementRef = inject(ElementRef);
+        this.parentNode = input();
+        this.index = input();
+        this.mode = input.required();
+        this.node = input.required();
+        this.hostElement = () => this.elementRef.nativeElement;
+        this.isCurrentWidget = (w) => get(w, '__meta__.id') == get(this.node(), '__meta__.id');
+        this.service.onUpdate.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            if (this.isCurrentWidget(c.widget)) {
+                this.applyOptions(c.values?.options);
+            }
+        });
+        //
+        this.service.onSelected.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            this.zone.runOutsideAngular(() => {
+                if (this.isCurrentWidget(c.widget)) {
+                    this.hostElement()?.classList.add('axp-state-selected');
+                }
+                else {
+                    this.hostElement()?.classList.remove('axp-state-selected');
+                }
+            });
+        });
+        //
+        this.service.onFocused.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            if (c.widget && this.isCurrentWidget(c.widget)) {
+                this.addOverlay();
+            }
+            else {
+                this.removeOverlay();
+            }
+        });
+        //
+        this.service.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            if (this.isCurrentWidget(c.widget)) {
+                this.instance.setChildren(this.node().children ?? []);
+            }
+        });
+        //
+        effect(async () => {
+            await this.loadComponent();
+        }, { allowSignalWrites: true });
+    }
+    async loadComponent() {
+        this.isLoading.set(true);
+        this.config = this.widgetRegistery.resolve(this.node().type);
+        //
+        const props = this.config?.components[this.mode()]?.properties
+            ?.filter((c) => c.schema.defaultValue)
+            .map((c) => ({ [c.name]: c.schema.defaultValue }))
+            .reduce((acc, curr) => {
+            return { ...acc, ...curr };
+        }, {});
+        //
+        this.mergedOptions.set(merge(props, this.node().options) || {});
+        this.preprocessAndInitialOptions(cloneDeep(this.node().options));
+        const tokenValue = {
+            node: this.node(),
+            options: this.mergedOptions(),
+            config: this.config,
+            defaultValue: this.node().defaultValue,
+        };
+        const token = Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: AXP_WIDGET_TOKEN,
+                    useValue: tokenValue,
+                },
+            ],
+        });
+        var com = await this.config?.components[this.mode()]?.component();
+        this.portal = new ComponentPortal(com, null, token);
+        this.isLoading.set(false);
+    }
+    async handleAttached(portalOutletRef) {
+        portalOutletRef = portalOutletRef;
+        this.instance = portalOutletRef.instance;
+        this.instance.parent = this.parentNode();
+        this.instance.index = this.index();
+        this.instance.mode = this.mode();
+        //
+        this.instance.onReady.pipe(first()).subscribe(() => {
+            if (this.mode() == 'designer') {
+                this.hostElement()?.addEventListener('mouseover', (e) => {
+                    e.stopPropagation();
+                    this.service.focus({ widget: this.node() });
+                });
+                this.hostElement()?.addEventListener('mouseleave', (e) => {
+                    e.stopPropagation();
+                    this.service.focus({ widget: null });
+                });
+                this.hostElement()?.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.service.select({ widget: this.node() });
+                });
+                this.service.register({
+                    config: this.config,
+                    id: get(this.node(), '__meta__.id'),
+                    instance: this.instance,
+                    widget: this.node(),
+                });
+            }
+        });
+    }
+    addOverlay() {
+        this.zone.runOutsideAngular(() => {
+            //console.log('add', this.node().type);
+            if (this.hostElement()) {
+                this.hostElement()?.classList.add('axp-state-hover');
+                //
+                if (this.hostElement().querySelector('.axp-widget-overlay') || this.config?.container)
+                    return;
+                this.overlay = document.createElement('div');
+                this.overlay.classList.add('axp-widget-overlay');
+                this.overlay.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.service.select({ widget: this.node() });
+                });
+                this.overlay.addEventListener('mouseleave', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.service.focus({ widget: null });
+                });
+                this.hostElement().appendChild(this.overlay);
+            }
+        });
+    }
+    removeOverlay() {
+        //console.log('remove', this.node().type);
+        this.zone.runOutsideAngular(() => {
+            if (this.hostElement()) {
+                this.hostElement()?.classList.remove('axp-state-hover');
+                //
+                this.overlay?.remove();
+            }
+        });
+    }
+    preprocessAndInitialOptions(obj, pathPrefix = '') {
+        if (!obj)
+            return;
+        Object.entries(obj).forEach(([key, value]) => {
+            const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
+            this.mergedOptions.update((currentOptions) => {
+                return set(currentOptions, currentPath, value);
+            });
+        });
+    }
+    applyOptions(values) {
+        if (this.node().defaultValue != null) {
+            this.instance.setValue(this.node().defaultValue);
+        }
+        this.mergedOptions.update((currentOptions) => {
+            return merge(currentOptions, values);
+        });
+        this.instance?.setOptions(this.mergedOptions());
+    }
+    async onKeydownHandler(event) {
+        if (this.service.selectedNode() && this.isCurrentWidget(this.service.selectedNode())) {
+            // handle delete
+            if (event.key == "Delete") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.service.removeWidget(this.node());
+            }
+            //
+            // handle delete
+            if (this.config?.container && event.key == "Insert") {
+                this.service.showPicker(this.node());
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDesignerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPWidgetDesignerRendererComponent, isStandalone: true, selector: "axp-widget-designer-renderer", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" }, classAttribute: "axp-widget-host" }, providers: [
+            {
+                provide: AXUnsubscriber,
+            },
+        ], ngImport: i0, template: `
+    @if(mergedOptions().isVisible!=false) { @if(isLoading()){
+    <ax-skeleton [animated]="true" class="ax-w-full  lg:ax-w-[50%] ax-h-8 ax-rounded"></ax-skeleton>
+    } @else {
+    <ng-container *ngTemplateOutlet="tt"></ng-container>
+    } }
+    <ng-template #tt>
+      <ng-template [cdkPortalOutlet]="portal" (attached)="handleAttached($event)"></ng-template>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDesignerRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-designer-renderer',
+                    template: `
+    @if(mergedOptions().isVisible!=false) { @if(isLoading()){
+    <ax-skeleton [animated]="true" class="ax-w-full  lg:ax-w-[50%] ax-h-8 ax-rounded"></ax-skeleton>
+    } @else {
+    <ng-container *ngTemplateOutlet="tt"></ng-container>
+    } }
+    <ng-template #tt>
+      <ng-template [cdkPortalOutlet]="portal" (attached)="handleAttached($event)"></ng-template>
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
+                    providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ],
+                    host: { class: 'axp-widget-host' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class AXPDesignerBoardComponent {
+    constructor() {
+        this.context = {};
+        this.service = inject(AXPDesignerService);
+    }
+    get __class() {
+        return {
+            "axp-designer-board": true,
+            "axp-state-design": this.service.mode() == 'designer'
+        };
+    }
+    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)" }, properties: { "class": "this.__class" } }, ngImport: i0, template: "<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>", 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,
+            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererComponent
+                    ], template: "<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>" }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class AXPDesignerAddWidgetButtonComponent {
+    constructor() {
+        this.designerService = inject(AXPDesignerService);
+        this.parent = inject(AXPContainerWidgetComponent);
+    }
+    async handleClick(e) {
+        e.nativeEvent.stopPropagation();
+        await this.designerService.showPicker(this.parent.node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
+        <div class="ax-container">
+            <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'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: i1$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: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-add-widget-button', template: `
+        <div class="ax-container">
+            <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'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"] }]
+        }] });
+
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
+                    declarations: [],
+                }]
+        }] });
+
+class AXPDesignerBreadcrumbsComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+    }
+    getTitle(node) {
+        return get(node, "__meta__.config.title");
+    }
+    handleClick(node) {
+        this.service.select({ widget: node });
+    }
+    handleMouseOver(node) {
+        this.service.focus({ widget: node });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDesignerBreadcrumbsComponent, isStandalone: true, selector: "axp-designer-breadcrumbs", ngImport: i0, template: `
+        <ax-breadcrumbs class="ax-text-white">
+            @for( b of service.breadcrumbs();track $index){
+                <ax-breadcrumbs-item>
+                    <a   (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{getTitle(b)}}</a>
+                </ax-breadcrumbs-item>
+            }
+            <ng-template #divider>
+                <i class="ax-icon ax-icon-chevron-right"></i>
+            </ng-template>
+        </ax-breadcrumbs>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$2.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$2.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-designer-breadcrumbs',
+                    template: `
+        <ax-breadcrumbs class="ax-text-white">
+            @for( b of service.breadcrumbs();track $index){
+                <ax-breadcrumbs-item>
+                    <a   (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{getTitle(b)}}</a>
+                </ax-breadcrumbs-item>
+            }
+            <ng-template #divider>
+                <i class="ax-icon ax-icon-chevron-right"></i>
+            </ng-template>
+        </ax-breadcrumbs>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXBreadcrumbsModule,
+                        AXDecoratorModule
+                    ],
+                }]
+        }] });
 
 class AXPWidgetPropertyViewerComponent {
     constructor() {
@@ -21,26 +791,32 @@ class AXPWidgetPropertyViewerComponent {
         this.groups = computed(() => {
             return this.tabs().length ? this.tabs()[this.currentTabIndex()].groups : [];
         });
-        this.context = {};
+        this.onChanged = new EventEmitter();
+        this.context = signal({});
         this.initialContext = {};
         effect(() => {
-            const config = this.widgetRegistryService.resolve(this.widget().name);
+            if (!this.widget())
+                return;
+            const config = this.widgetRegistryService.resolve(this.widget()?.type);
             if (config) {
+                this.initialContext = {};
                 this.config.set(config);
                 this.fillTabs();
             }
             else {
-                console.error(`Invalid widget name: ${this.widget().name}`);
+                console.error(`Invalid widget name: ${this.widget()}`);
             }
         }, { allowSignalWrites: true });
     }
     fillTabs() {
-        const tabs = [{
-                name: "general",
-                title: "General",
-                groups: []
-            }];
-        Object.entries(this.config()?.components ?? {}).forEach(c => {
+        const tabs = [
+            {
+                name: 'general',
+                title: 'General',
+                groups: [],
+            },
+        ];
+        Object.entries(this.config()?.components ?? {}).forEach((c) => {
             if (c[1].component != null && c[1].properties?.length) {
                 tabs.push({ name: c[0], title: capitalize(c[0]), groups: [] });
             }
@@ -48,32 +824,38 @@ class AXPWidgetPropertyViewerComponent {
         ///
         this.allPoperties = [];
         ///
-        tabs.forEach(tab => {
-            const props = tab.name == "general" ? (this.config()?.properties ?? []) : (this.config()?.components[tab.name].properties ?? []);
+        tabs.forEach((tab) => {
+            const props = tab.name == 'general'
+                ? this.config()?.properties ?? []
+                : ((this.config()?.components)[tab.name]?.properties ?? []).filter((c) => c.visible);
+            //
             this.allPoperties.push(...props);
-            tab.groups = unionBy(sortBy(props.map(pg => ({
+            tab.groups = unionBy(sortBy(props.map((pg) => ({
                 isCollapsed: false,
                 name: pg.group.name,
                 title: pg.group.title,
-                props: sortBy(props.filter(p => p.group.name == pg.group.name), 'title'),
+                props: sortBy(props.filter((p) => p.group.name == pg.group.name), 'title'),
             })), 'title'), 'name');
         });
-        this.tabs.set(tabs);
+        this.tabs.set(tabs.filter((c) => c.groups.length));
         //
         this.initialContext = this.allPoperties
-            .filter(c => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) ||
-            (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
-            .map(c => ({ [c.name]: c.schema.defaultValue }))
-            .reduce((acc, curr) => {
-            return { ...acc, ...curr };
+            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) || (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
+            .reduce((acc, c) => {
+            set(acc, c.schema.interface.path, c.schema.defaultValue); // Use lodash's set
+            return acc;
         }, {});
         //
-        this.context = merge(cloneDeep(this.initialContext), this.context);
-        //
-        console.log(this.initialContext, this.context);
+        untracked(() => {
+            this.context.set(merge(cloneDeep(this.initialContext), this.widget()));
+            this.onChanged.emit({ values: this.context(), mode: 'init' });
+        });
     }
     handleContextChange(e) {
-        console.log(e);
+        untracked(() => {
+            this.context.set(e.data);
+        });
+        this.onChanged.emit({ values: e.data, mode: 'update' });
     }
     handleTabChange(event) {
         const indx = event.index;
@@ -82,44 +864,121 @@ 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, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<axp-widgets-container [(context)]=\"context\" (contextChange)=\"handleContextChange($event)\">\n    <div class=\"ax-flex ax-flex-col\">\n        <div class=\"ax-py-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\">\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\n        <ax-collapse-group>\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\">\n                        </axp-widget-renderer>\n                        }\n                    </div>\n                    }\n                </div>\n            </ax-collapse>\n            }\n        </ax-collapse-group>\n    </div>\n</axp-widgets-container>", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "component", type: i1.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "component", type: i2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: i3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["contextChange"] }, { kind: "component", type: i3.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "parentNode", "index"] }] }); }
+    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$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "component", type: i3$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-widget-property-viewer', template: "<axp-widgets-container [(context)]=\"context\" (contextChange)=\"handleContextChange($event)\">\n    <div class=\"ax-flex ax-flex-col\">\n        <div class=\"ax-py-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\">\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\n        <ax-collapse-group>\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\">\n                        </axp-widget-renderer>\n                        }\n                    </div>\n                    }\n                </div>\n            </ax-collapse>\n            }\n        </ax-collapse-group>\n    </div>\n</axp-widgets-container>", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onChanged)=\"handleContextChange($event)\">\n    <div class=\"ax-flex ax-flex-col\">\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for( tab of tabs();track $index){\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-collapse-group class=\"ax-h-fit\" look=\"blank\">\n                @for( group of groups();track $index){\n                <ax-collapse [caption]=\"group.title\" look=\"solid\" [(isCollapsed)]=\"group.isCollapsed\">\n                    <div class=\"ax-flex ax-flex-col ax-divide-y\">\n                        @for( p of group.props;track $index){\n                        <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2 first:ax-pt-0 last:ax-pb-0\">\n                            <span class=\"ax-font-semibold\">{{p.title}}</span>\n                            @if(p.schema.interface)\n                            {\n                            <axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </axp-widget-renderer>\n                            }\n                        </div>\n                        }\n                    </div>\n                </ax-collapse>\n                }\n            </ax-collapse-group>\n        </div>\n    </div>\n</axp-widgets-container>", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onChanged: [{
+                type: Output
+            }] } });
+
+class 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() }));
+        });
+    }
+    toggleCollapse(node) {
+        // Toggle the current state or set to true if undefined
+        this.collapsedStates.set(node, !this.collapsedStates.get(node));
+    }
+    isCollapsed(node) {
+        // Return the collapsed state, default is false (expanded)
+        return !!this.collapsedStates.get(node);
+    }
+    getConfig(node) {
+        return get(node, "__meta__.config");
+    }
+    handleClick(e, node) {
+        e.stopPropagation();
+        this.service.select({ widget: node });
+    }
+    handleToggleClick(event, item) {
+        event.stopPropagation(); // Prevents the event from bubbling up to parent elements
+        this.toggleCollapse(item);
+    }
+    handleMouseOver(e, node) {
+        e.stopPropagation();
+        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: "@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</div>\n}", 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: AXBreadcrumbsModule }, { 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: AXPDesignerOutlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXBreadcrumbsModule,
+                        AXDecoratorModule,
+                    ], template: "@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</div>\n}" }]
         }], ctorParameters: () => [] });
 
-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, declarations: [AXPWidgetPropertyViewerComponent], imports: [CommonModule,
-            AXCollapseModule,
-            AXTabsModule,
-            AXPWidgetsModule,
-            AXPLayoutBuilderModule], exports: [AXPWidgetPropertyViewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerModule, imports: [CommonModule,
-            AXCollapseModule,
-            AXTabsModule,
-            AXPWidgetsModule,
-            AXPLayoutBuilderModule] }); }
+class AXPLayoutDesignerComponent {
+    constructor() {
+        this.currentTabIndex = signal(0);
+        this.service = inject(AXPDesignerService);
+        this.tabs = [
+            {
+                mode: 'designer',
+                title: 'Designer',
+            },
+            {
+                mode: 'edit',
+                title: 'Edit',
+            },
+            {
+                mode: 'view',
+                title: 'View',
+            },
+            {
+                mode: 'print',
+                title: 'Print',
+            },
+        ];
+        this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null);
+    }
+    handleTabChange(event) {
+        const index = event.index;
+        if (this.currentTabIndex() != index) {
+            this.currentTabIndex.set(index);
+            this.service.setMode(this.tabs[this.currentTabIndex()].mode);
+        }
+    }
+    get __class() {
+        return 'ax-h-full';
+    }
+    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: "17.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", host: { properties: { "class": "this.__class" } }, 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\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\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()\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\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-dark 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          <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>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button color=\"success\" look=\"twotone\" text=\"Preview\">\n            <ax-icon class=\"fa-solid fa-eye \"> </ax-icon>\n          </ax-button>\n          <!-- <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"service.undo()\" [disabled]=\"!service.canUndo()\">\n            <ax-icon class=\"fa-solid fa-rotate-left ax-text-sm\"> </ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"service.redo()\" [disabled]=\"!service.canRedo()\">\n            <ax-icon class=\"fa-solid fa-rotate-right ax-text-sm\"> </ax-icon>\n          </ax-button> -->\n        </div>\n      </div>\n\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\" class=\"ax-dark\">\n            <ax-content>\n              <div class=\"ax-min-w-80 ax-h-full ax-overflow-auto ax-border-e\">\n              </div>\n            </ax-content>\n          </ax-drawer>\n          <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark\">\n            <ax-content>\n              <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                  <axp-designer-outline></axp-designer-outline>\n                </div>\n              </div>\n            </ax-content>\n          </ax-drawer>\n          <!-- Content of board -->\n          <ax-content>\n            <div class=\"ax-bg-white ax-h-full ax-block\">\n              <axp-designer-board class=\"ax-w-full ax-border-default ax-border ax-flex-1 ax-overflow-auto ax-p-3\">\n              </axp-designer-board>\n            </div>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t ax-dark ax-flex ax-items-center\">\n        @if(currentTabIndex()==0) {\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n        }\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s ax-dark \" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n\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}.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:9999;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: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: 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: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.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: i5.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["disabled", "text", "active"], outputs: ["activeChange", "onClick"] }, { kind: "component", type: i5.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDesignerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-layout-designer', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         CommonModule,
-                        AXCollapseModule,
-                        AXTabsModule,
-                        AXPWidgetsModule,
                         AXPLayoutBuilderModule,
-                    ],
-                    exports: [AXPWidgetPropertyViewerComponent],
-                    declarations: [AXPWidgetPropertyViewerComponent],
-                }]
-        }] });
+                        AXPDesignerBoardComponent,
+                        AXPWidgetPropertyViewerComponent,
+                        AXPDesignerBreadcrumbsComponent,
+                        AXPDesignerOutlineComponent,
+                        AXTabsModule,
+                        AXButtonModule,
+                        AXDrawerModule,
+                        AXDecoratorModule,
+                        AXMenuModule
+                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\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()\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\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-dark 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          <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>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button color=\"success\" look=\"twotone\" text=\"Preview\">\n            <ax-icon class=\"fa-solid fa-eye \"> </ax-icon>\n          </ax-button>\n          <!-- <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"service.undo()\" [disabled]=\"!service.canUndo()\">\n            <ax-icon class=\"fa-solid fa-rotate-left ax-text-sm\"> </ax-icon>\n          </ax-button>\n          <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"service.redo()\" [disabled]=\"!service.canRedo()\">\n            <ax-icon class=\"fa-solid fa-rotate-right ax-text-sm\"> </ax-icon>\n          </ax-button> -->\n        </div>\n      </div>\n\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\" class=\"ax-dark\">\n            <ax-content>\n              <div class=\"ax-min-w-80 ax-h-full ax-overflow-auto ax-border-e\">\n              </div>\n            </ax-content>\n          </ax-drawer>\n          <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark\">\n            <ax-content>\n              <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                  <axp-designer-outline></axp-designer-outline>\n                </div>\n              </div>\n            </ax-content>\n          </ax-drawer>\n          <!-- Content of board -->\n          <ax-content>\n            <div class=\"ax-bg-white ax-h-full ax-block\">\n              <axp-designer-board class=\"ax-w-full ax-border-default ax-border ax-flex-1 ax-overflow-auto ax-p-3\">\n              </axp-designer-board>\n            </div>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t ax-dark ax-flex ax-items-center\">\n        @if(currentTabIndex()==0) {\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n        }\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s ax-dark \" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n\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}.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:9999;height:100%;width:100%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}\n"] }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerModule, AXPWidgetPropertyViewerComponent };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerBoardComponent, AXPDesignerModule, AXPDesignerService, AXPLayoutDesignerComponent, AXPWidgetDesignerRendererComponent, AXPWidgetPropertyViewerComponent };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map