@acorex/platform 0.0.0-ACOREX

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

@@ -0,0 +1,2474 @@
+import * as i2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i1$2 from '@acorex/platform/layout/widget-core';
+import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutBaseWidgetComponent, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import { AXPopupService } from '@acorex/components/popup';
+import { AXToastService } from '@acorex/components/toast';
+import { AXFileService } from '@acorex/core/file';
+import { merge, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, isEqual } from 'lodash-es';
+import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as merge$1 } from 'rxjs';
+import { AXPBroadcastEventService, AXPPlatformScope, AXPDataSourceDefinitionProviderService } from '@acorex/platform/core';
+import { AXTranslationService } from '@acorex/core/translation';
+import * as i2$1 from '@acorex/cdk/common';
+import { AXCommonModule } from '@acorex/cdk/common';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i7 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i6 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import { AXPSettingsService, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
+import { AXPWidgetItemComponent, AXPStateMessageComponent, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$4 from '@acorex/components/button-group';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i3$1 from '@acorex/components/drawer';
+import { AXDrawerModule } from '@acorex/components/drawer';
+import * as i4 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i5 from '@acorex/components/dropdown-button';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i2$2 from '@acorex/components/menu';
+import { AXMenuModule } from '@acorex/components/menu';
+import * as i1$3 from '@acorex/components/breadcrumbs';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import { AXPWorkflowService } from '@acorex/platform/workflow';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i4$1 from '@acorex/components/json-viewer';
+import { AXJsonViewerModule } from '@acorex/components/json-viewer';
+import { AXSafePipe } from '@acorex/core/pipes';
+
+// AddWidgetCommand
+class AddWidgetCommand {
+    constructor(widget, parent, previousSelection) {
+        this.widget = widget;
+        this.parent = parent;
+        this.previousSelection = previousSelection;
+    }
+    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);
+        }
+    }
+    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`;
+    }
+    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([], ...(ngDevMode ? [{ debugName: "undoStack" }] : /* istanbul ignore next */ []));
+        this.currentIndex = signal(-1, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.canUndo = computed(() => this.currentIndex() >= 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = computed(() => this.currentIndex() < this.undoStack().length - 1, ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+        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
+        })), ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+    }
+    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() {
+        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() {
+        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());
+        }
+    }
+    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();
+            }
+        }
+        // Optionally update any UI components or state here
+        this.selectedNode.set(this.undoStack()[this.currentIndex()].getExecutionSelection());
+    }
+    clear() {
+        this.undoStack.set([]);
+        this.currentIndex.set(-1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandManager, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandManager, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AXPDesignerConnector {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerConnector }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerConnector, decorators: [{
+            type: Injectable
+        }] });
+
+const AXP_DESIGNER_COPY_MENU = {
+    text: 'Copy',
+    name: 'copy',
+    icon: 'fa-solid fa-copy',
+    suffix: {
+        text: 'Ctrl+C',
+    },
+};
+const AXP_DESIGNER_CLONE_MENU = {
+    text: 'Clone',
+    name: 'clone',
+    icon: 'fa-solid fa-clone',
+    suffix: {
+        text: 'Ctrl+D',
+    },
+};
+const AXP_DESIGNER_CUT_MENU = {
+    text: 'Cut',
+    name: 'cut',
+    icon: 'fa-solid fa-cut',
+    suffix: {
+        text: 'Ctrl+X',
+    },
+};
+const AXP_DESIGNER_PASTE_MENU = {
+    text: 'Paste',
+    name: 'paste',
+    icon: 'fa-solid fa-paste',
+    suffix: {
+        text: 'Ctrl+V',
+    },
+};
+const AXP_DESIGNER_ADD_WIDGET_MENU = {
+    text: 'Add Widget',
+    name: 'add-widget',
+    icon: 'fa-solid fa-plus',
+};
+const AXP_DESIGNER_SELECT_WIDGET_MENU = {
+    text: 'Select',
+    name: 'select',
+    break: true,
+    icon: 'fa-solid fa-arrow-pointer',
+};
+const AXP_DESIGNER_DELETE_WIDGET_MENU = {
+    text: 'Delete',
+    name: 'remove-widget',
+    icon: 'fa-solid fa-trash',
+};
+const AXP_DESIGNER_SAVE_AS_WIDGET_MENU = {
+    text: 'Save As...',
+    name: 'save-as',
+    icon: 'fa-solid fa-save',
+};
+function cloneWidgetMenu(item, options) {
+    return assign(cloneDeep(item), options);
+}
+
+class AXPDesignerModes {
+    static { this.View = { id: 'view', title: 'View' }; }
+    static { this.Design = { id: 'designer', title: 'Designer' }; }
+    static { this.Edit = { id: 'edit', title: 'Edit' }; }
+}
+var AXPTemplateLoadingStrategy;
+(function (AXPTemplateLoadingStrategy) {
+    AXPTemplateLoadingStrategy["Connector"] = "Connector";
+    AXPTemplateLoadingStrategy["Broadcast"] = "Broadcast";
+})(AXPTemplateLoadingStrategy || (AXPTemplateLoadingStrategy = {}));
+const AXPDesignerMessageKeys = {
+    Preview: "designer-preview",
+    Loaded: "designer-preview-loaded",
+    ContextChanged: "designer-preview-context-changed",
+    PreviewWindow: "designer-open-preview-window",
+    RequestFormContent: "designer-request-form-content",
+    ResponseFormContent: "designer-response-form-content",
+    SaveForm: 'designer-save-form-content',
+    FormSaved: 'designer-form-saved-content',
+};
+
+class AXPWidgetPickerService {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+        this.widgetRegistryService = inject(AXPWidgetRegistryService);
+        this.translationService = inject(AXTranslationService);
+    }
+    async showPicker(options) {
+        const com = await Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent);
+        const widgets = this.widgetRegistryService.all();
+        const filteredWidgets = widgets.filter((c) => options.groups.some((d) => c.groups?.includes(d)));
+        //
+        const result = await this.popupService.open(com, {
+            title: await this.translationService.translateAsync('@form-template-management:designer.components.widget-picker.title'),
+            size: 'md',
+            closeButton: true,
+            data: {
+                widgets: sortBy(filteredWidgets, (c) => c.title),
+            },
+        });
+        //
+        const selectedWidgets = (result.data?.widgets ?? []);
+        return selectedWidgets.map((c) => ({
+            type: c.name,
+            options: c.options,
+            title: c.title,
+            meta: c.meta,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPickerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPDesignerService {
+    #ef;
+    constructor() {
+        this.popupService = inject(AXPopupService);
+        this.toastService = inject(AXToastService);
+        this.fileService = inject(AXFileService);
+        this.loadingService = inject(AXLoadingDialogService);
+        this.widgetRegisteryService = inject(AXPWidgetRegistryService);
+        this.connector = inject(AXPDesignerConnector);
+        this.eventService = inject(AXPBroadcastEventService);
+        this.widgetPickerService = inject(AXPWidgetPickerService);
+        this.document = signal(this.createDoc(), ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
+        this.currentPageIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
+        this.currentPage = signal(this.document().children?.[0], ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        this.commandManager = inject(CommandManager);
+        this.clipboard = signal(null, ...(ngDevMode ? [{ debugName: "clipboard" }] : /* istanbul ignore next */ []));
+        //
+        this.canCutCopy = computed(() => this.can(this.selectedNode()).copyOrCut, ...(ngDevMode ? [{ debugName: "canCutCopy" }] : /* istanbul ignore next */ []));
+        this.canDelete = computed(() => this.can(this.selectedNode()).delete, ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
+        this.canInsert = computed(() => this.can(this.selectedNode()).insert, ...(ngDevMode ? [{ debugName: "canInsert" }] : /* istanbul ignore next */ []));
+        this.canPaste = computed(() => this.can(this.selectedNode()).paste, ...(ngDevMode ? [{ debugName: "canPaste" }] : /* istanbul ignore next */ []));
+        //
+        this.history = computed(() => this.commandManager.history(), ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+        this.canUndo = computed(() => this.commandManager.canUndo(), ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = computed(() => this.commandManager.canRedo(), ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+        //
+        this.canSave = computed(() => this.templateId() != null, ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+        this.unsavedChanges = signal(false, ...(ngDevMode ? [{ debugName: "unsavedChanges" }] : /* istanbul ignore next */ []));
+        this.breadcrumbs = computed(() => {
+            return this.selectedNode() ? this.findBreadcrumbs(this.currentPage(), this.selectedNode()) ?? [] : [];
+        }, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
+        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.selectedNodeConfig = computed(() => get(this.selectedNode(), '__meta__.config'), ...(ngDevMode ? [{ debugName: "selectedNodeConfig" }] : /* istanbul ignore next */ []));
+        this._focusedNode = null;
+        this.focusedNode = () => this._focusedNode;
+        this.size = signal('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.onSelected = new Subject();
+        this.onRefresh = new Subject();
+        this.onUpdate = new Subject();
+        this.onFocused = new Subject();
+        this.templateId = signal(null, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
+        this.loadingStrategy = signal(AXPTemplateLoadingStrategy.Connector, ...(ngDevMode ? [{ debugName: "loadingStrategy" }] : /* istanbul ignore next */ []));
+        this.#ef = effect(() => {
+            this.refresh({ widget: this.currentPage() });
+        }, ...(ngDevMode ? [{ debugName: "#ef" }] : /* istanbul ignore next */ []));
+        this.can = (widget) => {
+            if (!widget) {
+                return {
+                    delete: false,
+                    copyOrCut: false,
+                    insert: false,
+                    paste: false,
+                };
+            }
+            const config = get(widget, '__meta__.config');
+            return {
+                delete: widget.type != 'page-layout',
+                copyOrCut: widget.type != 'page-layout',
+                paste: this.clipboard() != null && config.type == 'container' && config.designer?.canInsert != false,
+                insert: config.type == 'container' && config.designer?.canInsert != false,
+            };
+        };
+        this.eventService.listen(AXPDesignerMessageKeys.Loaded).subscribe(() => {
+            this.updatePreview();
+        });
+        //
+        this.eventService.listen(AXPDesignerMessageKeys.PreviewWindow).subscribe(() => {
+            this.openPreviewWindow();
+        });
+        //
+        // window.addEventListener("beforeunload", (event) => {
+        //   console.log("Window is before closing...");
+        //   // event.preventDefault();
+        //   // event.returnValue = 'abc'; // Some browsers require this to show the prompt.
+        // });
+        window.addEventListener("unload", async () => {
+            console.log("Window is closing...");
+            if (this.unsavedChanges()) {
+                this.eventService.publish(AXPDesignerMessageKeys.SaveForm, { id: this.templateId(), success: false });
+            }
+            this.unsubscribeEvents();
+        });
+    }
+    register(command) {
+        this.select({ widget: command.widget });
+    }
+    select(command) {
+        this.selectedNode.set(command.widget);
+        this.onSelected.next(command);
+    }
+    update(command) {
+        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(node, command.values));
+        this.onUpdate.next({ widget: node, values: command.values });
+        this.unsavedChanges.set(true);
+        this.updatePreview();
+    }
+    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 });
+        this.updatePreview();
+    }
+    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 = this.selectedNode()) {
+        const widgets = await this.widgetPickerService.showPicker({ groups: [AXPWidgetGroupEnum.FormElement] });
+        const result = [];
+        if (widgets.length) {
+            widgets.forEach((c) => {
+                result.push(this.addWidget(currentNode, { type: c.type }));
+            });
+        }
+        return result;
+    }
+    new() {
+        this.commandManager.clear();
+        this.document.set(this.createDoc());
+        this.currentPage.set(this.document().children?.[0]);
+        this.reRenderPage();
+    }
+    createDoc() {
+        const doc = {
+            type: AXPWidgetsCatalog.document,
+            children: [this.createPage()],
+            name: 'document',
+        };
+        set(doc, '__meta__.id', this.generateUniqueId());
+        return doc;
+    }
+    createPage() {
+        const config = this.widgetRegisteryService.resolve('page-layout');
+        const page = {
+            type: 'page-layout',
+            children: [],
+            name: 'page-layout1',
+        };
+        set(page, '__meta__.id', this.generateUniqueId());
+        set(page, '__meta__.config', config);
+        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);
+        this.currentPage.set(this.document().children?.[this.currentPageIndex()]);
+        this.select({ widget: this.currentPage() });
+    }
+    reRenderPage() {
+        this.currentPage.set({ ...this.currentPage() });
+        setTimeout(() => {
+            this.refresh({ widget: this.currentPage() });
+        });
+    }
+    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.currentPage()) {
+        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.type == '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.type == '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) {
+        //
+        const cloned = cloneDeep(node);
+        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', this.generateUniqueId());
+        set(cloned, '__meta__.config', config);
+        set(cloned, '__meta__.added', true);
+        //
+        this.reRenderPage();
+        //
+        this.refresh({ widget: currentNode });
+        this.select({ widget: cloned });
+        return cloned;
+    }
+    removeWidget(node = this.selectedNode()) {
+        if (node.type === 'document-layout' ||
+            (node.type === 'page-layout' && (this.document().children?.length ?? 1) == 1)) {
+            console.error('Cannot remove the page node.');
+            return; // Prevent removing the root page node or document
+        }
+        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.document());
+        if (!parent) {
+            throw new Error('Parent node not found. The node might be the root node or does not exist.');
+        }
+        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() {
+        this.commandManager.redo();
+        this.reRenderPage();
+        const currentSelection = this.commandManager.selectedNode();
+        this.refresh({ widget: this.currentPage() });
+        this.select({ widget: currentSelection });
+    }
+    undo() {
+        this.commandManager.undo();
+        this.reRenderPage();
+        const currentSelection = this.commandManager.selectedNode();
+        this.refresh({ widget: this.currentPage() });
+        this.select({ widget: currentSelection });
+    }
+    clearHistory() {
+        this.commandManager.clear();
+    }
+    removeMetaProp(obj) {
+        const nodeName = '__meta__';
+        // Check if the object is an array
+        if (Array.isArray(obj)) {
+            return obj.map((item) => this.removeMetaProp(item));
+        }
+        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.removeMetaProp(obj[key]);
+                }
+            }
+            return newObj;
+        }
+        // If the value is not an object or array, return it as is
+        return obj;
+    }
+    async addMetaToNodes(node, processedNodes, progressCallback) {
+        // Apply your meta logic here
+        const config = this.widgetRegisteryService.resolve(node.type);
+        //
+        set(node, '__meta__.id', this.generateUniqueId());
+        set(node, '__meta__.config', config);
+        //
+        // Increment the processed node count and update the progress dialog
+        processedNodes.count++;
+        progressCallback(processedNodes.count);
+        // Recursively process child nodes using Promise.all
+        if (node.children && node.children.length > 0) {
+            node.children = await Promise.all(node.children.map(async (child) => await this.addMetaToNodes(child, processedNodes, progressCallback)));
+        }
+        return node;
+    }
+    copy(widget = this.selectedNode()) {
+        if (this.can(widget).copyOrCut) {
+            this.clipboard.set(cloneDeep(widget)); // Use lodash's cloneDeep to ensure a deep copy
+        }
+    }
+    cut(widget = this.selectedNode()) {
+        if (this.can(widget).copyOrCut) {
+            this.copy(widget); // Copy the widget to the clipboard
+            this.removeWidget(widget); // Reuse the removeWidget method which should handle undo internally
+        }
+    }
+    clone(widget = this.selectedNode()) {
+        if (!widget)
+            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() || !parentNode) {
+            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.');
+            return;
+        }
+        //
+        if (!nearestContainer.children) {
+            nearestContainer.children = [];
+        }
+        //
+        const setNameId = (node) => {
+            set(node, 'name', this.generateUniqueName(node.type));
+            set(node, '__meta__.id', this.generateUniqueId());
+            node.children?.forEach((n) => {
+                setNameId(n);
+            });
+        };
+        setNameId(newNode);
+        //
+        this.commandManager.executeCommand(new AddWidgetCommand(newNode, nearestContainer, nearestContainer));
+        //
+        setTimeout(() => {
+            this.refresh({ widget: nearestContainer }); // Refresh the UI
+            this.select({ widget: newNode }); // Select the newly pasted node
+        });
+    }
+    async save() {
+        if (this.templateId()) {
+            const content = this.export();
+            if (this.loadingStrategy() == AXPTemplateLoadingStrategy.Connector) {
+                await this.connector.save(this.templateId(), { json: content });
+                this.toastService.success('Your changes saved successfully');
+            }
+            else {
+                const result = await this.eventService.sendAndWaitForResponse(AXPDesignerMessageKeys.SaveForm, { id: this.templateId(), success: true, content });
+                if (result.success) {
+                    this.unsavedChanges.set(false);
+                    window.close();
+                }
+            }
+        }
+        else {
+            this.downloadJson();
+        }
+    }
+    async saveAs(node = this.document()) {
+        const content = this.export(node);
+        const result = await this.connector.saveAs({ json: content });
+        if (result) {
+            this.toastService.success('Your changes saved successfully');
+        }
+    }
+    export(node = this.document()) {
+        const json = this.removeMetaProp(node);
+        return JSON.stringify(json);
+    }
+    downloadJson() {
+        // 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);
+    }
+    async loadById(id, options = { strategy: AXPTemplateLoadingStrategy.Connector }) {
+        let content = null;
+        try {
+            if (options.strategy == AXPTemplateLoadingStrategy.Connector) {
+                content = await this.connector.load(id);
+            }
+            else {
+                content = await this.eventService.sendAndWaitForResponse(AXPDesignerMessageKeys.RequestFormContent, { formId: id }, { timeout: 10000, retries: 3, retryDelay: 1000 });
+            }
+            if (!isNil(content) && !isEmpty(content)) {
+                await this.loadByContent(content);
+            }
+            this.templateId.set(id);
+            this.loadingStrategy.set(options.strategy);
+        }
+        catch (error) {
+            this.toastService.danger(error.message);
+        }
+    }
+    async importJSon() {
+        const files = await this.fileService.choose({ multiple: false, accept: 'application/json' });
+        if (files && files.length) {
+            const file = files[0];
+            const content = await file.text();
+            await this.loadByContent(content);
+        }
+    }
+    async loadByContent(content) {
+        const rootNode = JSON.parse(content);
+        const totalNode = this.countTotalNodes(rootNode);
+        const processedNodes = { count: 0 };
+        const button = {
+            text: 'Cancel',
+            autofocus: true,
+            color: 'primary',
+            onClick: (e) => {
+                dialog.close();
+            },
+        };
+        const dialog = this.loadingService.show({
+            mode: 'determinate',
+            title: 'Loading Content',
+            progressColor: 'primary',
+            text: 'Processing content',
+            status: `0 of ${totalNode}`,
+            buttons: [button],
+        });
+        try {
+            const root = await this.addMetaToNodes(rootNode, processedNodes, (count) => {
+                dialog.setProgressValue(Math.ceil((count / totalNode) * 100));
+                dialog.setProgressStatus(`${count} of ${totalNode}`);
+            });
+            const page = root.children?.[0];
+            this.document.set(root);
+            this.currentPage.set(page);
+            dialog.setProgressColor('success');
+            dialog.setProgressText('Content loaded successfully');
+            button.text = 'Okay';
+            button.color = 'success';
+            dialog.setProgressValue(100);
+            setTimeout(() => {
+                this.reRenderPage();
+                dialog.close();
+            }, 250);
+        }
+        catch (error) {
+            dialog.setProgressColor('danger');
+            dialog.setProgressText(error instanceof Error ? error.message : 'Cannot load content');
+            button.text = 'Close';
+            button.color = 'danger';
+        }
+    }
+    countTotalNodes(node) {
+        let count = 1; // Count the current node
+        if (node.children && node.children.length > 0) {
+            count += node.children.reduce((sum, child) => sum + this.countTotalNodes(child), 0);
+        }
+        return count;
+    }
+    generateUniqueName(type) {
+        // Normalize the type to follow camelCase convention
+        const baseName = type.charAt(0).toLowerCase() + type.slice(1);
+        let index = 1;
+        let uniqueName = `${baseName}${index}`;
+        // Gather all existing names to check against
+        const existingNames = new Set();
+        this.collectAllNames(this.document(), existingNames);
+        // Increment the index until a unique name is found
+        while (existingNames.has(uniqueName)) {
+            index++;
+            uniqueName = `${baseName}${index}`;
+        }
+        return uniqueName;
+    }
+    generateUniqueId() {
+        return Math.random() * Math.pow(10, 18);
+    }
+    collectAllNames(node, names) {
+        if (node.name) {
+            names.add(node.name);
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                this.collectAllNames(child, names);
+            }
+        }
+    }
+    updatePreview() {
+        this.eventService.publish(AXPDesignerMessageKeys.Preview, {
+            id: this.templateId(),
+            document: this.removeMetaProp(this.document())
+        });
+    }
+    async openPreviewDialog() {
+        const com = await Promise.resolve().then(function () { return preview_component; }).then((c) => c.AXPLayoutDesignerPreviewComponent);
+        await this.popupService.open(com, {
+            header: false,
+            size: 'full',
+            data: {
+                initialSize: this.size(),
+                isDialogWindow: true,
+            },
+        });
+    }
+    openPreviewWindow() {
+        window.open('/forms/preview', '_blank');
+    }
+    getContextMenuItems(instance, isRoot = false) {
+        const widget = instance;
+        const node = widget.node;
+        const items = [];
+        //       
+        if (this.can(node).insert) {
+            items.push(cloneWidgetMenu(AXP_DESIGNER_ADD_WIDGET_MENU, {
+                break: true,
+            }));
+        }
+        //
+        items.push(cloneWidgetMenu(AXP_DESIGNER_CLONE_MENU, { disabled: !this.can(node).copyOrCut }));
+        items.push(cloneWidgetMenu(AXP_DESIGNER_CUT_MENU, { disabled: !this.can(node).copyOrCut }));
+        items.push(cloneWidgetMenu(AXP_DESIGNER_COPY_MENU, { disabled: !this.can(node).copyOrCut }));
+        items.push(cloneWidgetMenu(AXP_DESIGNER_PASTE_MENU, { disabled: !this.can(node).paste, break: true }));
+        //
+        items.push(cloneWidgetMenu(AXP_DESIGNER_DELETE_WIDGET_MENU, { disabled: !this.can(node).delete, break: true }));
+        //
+        items.push(cloneWidgetMenu(AXP_DESIGNER_SAVE_AS_WIDGET_MENU));
+        if (instance.onContextMenu) {
+            instance.onContextMenu({ items });
+        }
+        if (!isRoot) {
+            items.forEach(item => {
+                item.suffix = undefined;
+            });
+        }
+        return items;
+    }
+    async executeCommand(context) {
+        const widget = context.instance;
+        if (context.instance.executeCommand) {
+            const command = {
+                name: context.name,
+                data: context.data,
+                handled: false
+            };
+            await context.instance.executeCommand(command);
+            if (command.handled)
+                return;
+        }
+        switch (context.name) {
+            case AXP_DESIGNER_SELECT_WIDGET_MENU.name: {
+                this.select({ widget: widget.node });
+                break;
+            }
+            case AXP_DESIGNER_ADD_WIDGET_MENU.name: {
+                this.showPicker(widget.node);
+                break;
+            }
+            //
+            case AXP_DESIGNER_DELETE_WIDGET_MENU.name: {
+                this.removeWidget(widget.node);
+                break;
+            }
+            //
+            case AXP_DESIGNER_CLONE_MENU.name: {
+                this.clone(widget.node);
+                break;
+            }
+            case AXP_DESIGNER_CUT_MENU.name: {
+                this.cut(widget.node);
+                break;
+            }
+            case AXP_DESIGNER_COPY_MENU.name: {
+                this.copy(widget.node);
+                break;
+            }
+            case AXP_DESIGNER_PASTE_MENU.name: {
+                this.paste(widget.node);
+                break;
+            }
+            //
+        }
+    }
+    unsubscribeEvents() {
+        this.eventService.unsubscribe(AXPDesignerMessageKeys.Loaded);
+        this.eventService.unsubscribe(AXPDesignerMessageKeys.PreviewWindow);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AXPDesignerAddWidgetButtonComponent {
+    constructor() {
+        this.designerService = inject(AXPDesignerService);
+        this.parent = inject(AXPLayoutBaseWidgetComponent);
+    }
+    async handleClick(e) {
+        e.nativeEvent.stopPropagation();
+        await this.designerService.showPicker(this.parent.node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
+    <div class="ax-container">
+      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
+        <ax-icon icon="fa-solid fa-plus"></ax-icon>
+      </ax-button>
+    </div>
+  `, isInline: true, styles: ["axp-designer-add-widget-button .ax-container{margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-add-widget-button', template: `
+    <div class="ax-container">
+      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
+        <ax-icon icon="fa-solid fa-plus"></ax-icon>
+      </ax-button>
+    </div>
+  `, 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 AXPDesignerAddWidgetLineButtonComponent {
+    constructor() {
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+        this.onClick = output();
+    }
+    handleClick() {
+        this.onClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPDesignerAddWidgetLineButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-line-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+   <div class="ax-flex ax-items-center ax-py-4 ax-text-xs">
+      <div class="ax-flex-grow ax-border-t-2 ax-border-dashed ax-border-surface"></div>
+      <div class="ax-mx-2 ax-sm ">
+        <ax-button [text]="text()" [look]="'twotone'"  class="ax-capitalize" (onClick)="handleClick()">
+          <ax-icon icon="fa-solid fa-plus"></ax-icon>
+        </ax-button>
+      </div>
+      <div class="ax-flex-grow ax-border-t-2 ax-border-dashed ax-border-surface"></div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-designer-add-widget-line-button',
+                    template: `
+   <div class="ax-flex ax-items-center ax-py-4 ax-text-xs">
+      <div class="ax-flex-grow ax-border-t-2 ax-border-dashed ax-border-surface"></div>
+      <div class="ax-mx-2 ax-sm ">
+        <ax-button [text]="text()" [look]="'twotone'"  class="ax-capitalize" (onClick)="handleClick()">
+          <ax-icon icon="fa-solid fa-plus"></ax-icon>
+        </ax-button>
+      </div>
+      <div class="ax-flex-grow ax-border-t-2 ax-border-dashed ax-border-surface"></div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXButtonModule, AXDecoratorModule],
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+
+class AXPDesignerAddWidgetMiniButtonComponent {
+    constructor() {
+        this.designerService = inject(AXPDesignerService);
+        this.parent = inject(AXPLayoutBaseWidgetComponent);
+        this.onClick = new EventEmitter();
+    }
+    async handleClick(e) {
+        e.stopPropagation();
+        const a = this.onClick;
+        if (this.onClick.observed) {
+            this.onClick.emit();
+        }
+        else {
+            await this.designerService.showPicker(this.parent.node);
+        }
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-flex`] = true;
+        cls[`ax-w-full`] = true;
+        cls[`ax-h-full`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPDesignerAddWidgetMiniButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-mini-button", outputs: { onClick: "onClick" }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
+    <div class="axp-empty-space">
+      <div class="ax-m-auto ax-py-4 ax-px-8">
+        <div
+          class="ax-flex ax-items-center ax-justify-center ax-size-4 hover:ax-scale-125 ax-cursor-pointer"
+          (click)="handleClick($event)"
+        >
+          <i class="fa-solid fa-plus"></i>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-designer-add-widget-mini-button',
+                    template: `
+    <div class="axp-empty-space">
+      <div class="ax-m-auto ax-py-4 ax-px-8">
+        <div
+          class="ax-flex ax-items-center ax-justify-center ax-size-4 hover:ax-scale-125 ax-cursor-pointer"
+          (click)="handleClick($event)"
+        >
+          <i class="fa-solid fa-plus"></i>
+        </div>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXButtonModule, AXDecoratorModule],
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { onClick: [{
+                type: Output
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXPDesignerFlexDrawerComponent {
+    constructor() {
+        this.itemsCount = model(12, { ...(ngDevMode ? { debugName: "itemsCount" } : /* istanbul ignore next */ {}), alias: 'items' });
+        this.onSelect = output();
+        this.items = computed(() => Array.from({ length: this.itemsCount() }).map((v, index) => index + 1), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.range = signal(0, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    }
+    handleMouseHover(c) {
+        this.range.set(c);
+    }
+    handleClick(c) {
+        this.onSelect.emit(c);
+    }
+    handleMouseLeave(event) {
+        this.range.set(0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerFlexDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerFlexDrawerComponent, isStandalone: true, selector: "axp-designer-flex-drawer", inputs: { itemsCount: { classPropertyName: "itemsCount", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsCount: "itemsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" } }, ngImport: i0, template: `
+    <table class="table-picker">
+      <tbody>
+        <tr>
+          @for (c of items(); track $index) {
+            <td (mouseenter)="handleMouseHover(c)" [class.picked]="c <= range()" (click)="handleClick(c)"></td>
+          }
+        </tr>
+        <tr>
+          <td [attr.colspan]="items().length" class="ax-text-center">
+            <small>{{ range() }}</small>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host{width:100%}: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-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerFlexDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-flex-drawer', template: `
+    <table class="table-picker">
+      <tbody>
+        <tr>
+          @for (c of items(); track $index) {
+            <td (mouseenter)="handleMouseHover(c)" [class.picked]="c <= range()" (click)="handleClick(c)"></td>
+          }
+        </tr>
+        <tr>
+          <td [attr.colspan]="items().length" class="ax-text-center">
+            <small>{{ range() }}</small>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{width:100%}: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-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"] }]
+        }], propDecorators: { itemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
+class AXPDesignerGridDrawerComponent {
+    constructor() {
+        this.rowsCount = model(5, { ...(ngDevMode ? { debugName: "rowsCount" } : /* istanbul ignore next */ {}), alias: 'rows' });
+        this.colsCount = model(12, { ...(ngDevMode ? { debugName: "colsCount" } : /* istanbul ignore next */ {}), alias: 'columns' });
+        this.onSelect = output();
+        this.rows = computed(() => Array.from({ length: this.rowsCount() }).map((v, index) => index + 1), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => Array.from({ length: this.colsCount() }).map((v, index) => index + 1), ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.rangeR = signal(0, ...(ngDevMode ? [{ debugName: "rangeR" }] : /* istanbul ignore next */ []));
+        this.rangeC = signal(0, ...(ngDevMode ? [{ debugName: "rangeC" }] : /* istanbul ignore next */ []));
+    }
+    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: "21.2.9", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "style": "this.__style" } }, ngImport: i0, template: `
+    <table class="table-picker">
+      <tbody>
+        @for (r of rows(); track $index) {
+          <tr>
+            @for (c of columns(); track $index) {
+              <td
+                (mouseenter)="handleMouseHover(r, c)"
+                [class.picked]="c <= rangeC() && r <= rangeR()"
+                (click)="handleClick(r, c)"
+              ></td>
+            }
+          </tr>
+        }
+        <tr>
+          <td [attr.colspan]="columns().length" class="ax-text-center">
+            <small>{{ rangeC() }}×{{ rangeR() }}</small>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host table{width:100%;border-collapse:collapse;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:2.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-grid-drawer', template: `
+    <table class="table-picker">
+      <tbody>
+        @for (r of rows(); track $index) {
+          <tr>
+            @for (c of columns(); track $index) {
+              <td
+                (mouseenter)="handleMouseHover(r, c)"
+                [class.picked]="c <= rangeC() && r <= rangeR()"
+                (click)="handleClick(r, c)"
+              ></td>
+            }
+          </tr>
+        }
+        <tr>
+          <td [attr.colspan]="columns().length" class="ax-text-center">
+            <small>{{ rangeC() }}×{{ rangeR() }}</small>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, 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-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"] }]
+        }], propDecorators: { rowsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], colsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+/**
+ * Maps AXPDisplayWidgetConfig to generic AXPWidgetItemData
+ */
+function mapToWidgetItemData(widget) {
+    return {
+        title: widget.title,
+        description: widget.description,
+        icon: widget.icon ?? 'fa-solid fa-cube',
+        isPinned: widget.pinned,
+        data: widget
+    };
+}
+class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.settingsService = inject(AXPSettingsService);
+        this.pinnedSettingKey = 'forms:widgets:picker:pinned';
+        this.searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        // Signals
+        this.widgets = [];
+        this.allWidgets = signal([], ...(ngDevMode ? [{ debugName: "allWidgets" }] : /* istanbul ignore next */ []));
+        this.pinnedWidgets = signal([], ...(ngDevMode ? [{ debugName: "pinnedWidgets" }] : /* istanbul ignore next */ []));
+        this.displayWidgets = computed(() => {
+            return this.allWidgets().map((c) => ({ ...c, pinned: this.pinnedWidgets().includes(c.name) }));
+        }, ...(ngDevMode ? [{ debugName: "displayWidgets" }] : /* istanbul ignore next */ []));
+        // Signal to track selected widgets
+        this.selectedWidgets = signal([], ...(ngDevMode ? [{ debugName: "selectedWidgets" }] : /* istanbul ignore next */ []));
+        // Computed for filtered and ordered widget list
+        this.orderedList = computed(() => {
+            const search = this.searchTerm().toLowerCase();
+            const selectedTabName = this.selectedTab().name;
+            return orderBy(this.displayWidgets().filter((w) => {
+                const matchesTab = selectedTabName === 'all' || castArray(w.categories ?? []).some((c) => c.name === selectedTabName);
+                const matchesSearch = !search || w.title.toLowerCase().includes(search) || w.description?.toLowerCase().includes(search);
+                return matchesTab && matchesSearch;
+            }), ['pinned', 'title'], ['desc', 'asc']);
+        }, ...(ngDevMode ? [{ debugName: "orderedList" }] : /* istanbul ignore next */ []));
+        // Pinned and regular lists
+        this.pinnedList = computed(() => this.orderedList().filter((c) => c.pinned), ...(ngDevMode ? [{ debugName: "pinnedList" }] : /* istanbul ignore next */ []));
+        this.regularList = computed(() => this.orderedList().filter((c) => !c.pinned), ...(ngDevMode ? [{ debugName: "regularList" }] : /* istanbul ignore next */ []));
+        // Mapped data for generic widget items
+        this.pinnedWidgetItems = computed(() => this.pinnedList().map(mapToWidgetItemData), ...(ngDevMode ? [{ debugName: "pinnedWidgetItems" }] : /* istanbul ignore next */ []));
+        this.regularWidgetItems = computed(() => this.regularList().map(mapToWidgetItemData), ...(ngDevMode ? [{ debugName: "regularWidgetItems" }] : /* istanbul ignore next */ []));
+        // Tabs for the widget groups
+        this.categories = computed(() => uniqBy(this.allWidgets()
+            .map((w) => castArray(w.categories ?? []))
+            .filter((c) => c.length > 0)
+            .flat(), 'name'), ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+        this.tabs = computed(() => orderBy([{ name: 'all', title: 'All', order: 0 }, ...this.categories()], (c) => c.order), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        // computed max visible widgets in a tab
+        this.maxVisibleWidgets = computed(() => Math.max(...this.categories().map((c) => this.allWidgets().filter((w) => castArray(w.categories ?? []).some((c) => c.name === c.name)).length)), ...(ngDevMode ? [{ debugName: "maxVisibleWidgets" }] : /* istanbul ignore next */ []));
+        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : /* istanbul ignore next */ []));
+        this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()], ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        super.ngOnInit();
+        this.allWidgets.set(this.widgets);
+        this.pinnedWidgets.set((await this.settingsService.get(this.pinnedSettingKey)) || []);
+    }
+    handleTabChange(event) {
+        const indx = event.index;
+        if (this.currentTabIndex() != indx) {
+            this.currentTabIndex.set(indx);
+        }
+    }
+    handleWidgetClick(clickEvent) {
+        const { event, widget } = clickEvent;
+        const originalWidget = widget.data;
+        if (event.ctrlKey) {
+            const currentSelection = this.selectedWidgets();
+            const isAlreadySelected = currentSelection.some((w) => w === originalWidget);
+            if (isAlreadySelected) {
+                // Deselect widget if already selected
+                this.selectedWidgets.set(currentSelection.filter((w) => w !== originalWidget));
+            }
+            else {
+                // Add widget to selection
+                this.selectedWidgets.set([...currentSelection, originalWidget]);
+            }
+        }
+        else {
+            // If CTRL is not pressed, select only the clicked widget
+            this.close({ widgets: [originalWidget] });
+        }
+    }
+    async handleWidgetPinClick(clickEvent) {
+        const { widget } = clickEvent;
+        const originalWidget = widget.data;
+        originalWidget.pinned = !originalWidget.pinned;
+        // Get the current list of pinned widgets from settings
+        let pinnedWidgets = (await this.settingsService.get(this.pinnedSettingKey)) || [];
+        // Update the list of pinned widgets based on the pinned status
+        if (originalWidget.pinned) {
+            if (!pinnedWidgets.includes(originalWidget.name)) {
+                pinnedWidgets.push(originalWidget.name);
+            }
+        }
+        else {
+            pinnedWidgets = pinnedWidgets.filter((name) => name !== originalWidget.name);
+        }
+        // Save the updated list of pinned widgets
+        await this.settingsService.scope(AXPPlatformScope.User).set(this.pinnedSettingKey, pinnedWidgets);
+        // Trigger a re-render of the widgets
+        this.pinnedWidgets.set(pinnedWidgets);
+    }
+    // Check if a widget is selected
+    isWidgetSelected(widget) {
+        return this.selectedWidgets().includes(widget);
+    }
+    // Check if a generic widget item is selected
+    isWidgetItemSelected(widgetItem) {
+        const originalWidget = widgetItem.data;
+        return this.isWidgetSelected(originalWidget);
+    }
+    handleConfirmSelection() {
+        this.close({ widgets: this.selectedWidgets() });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-h-[95vh]\"\n  [ngClass]=\"{ 'lg:ax-h-[75vh]': maxVisibleWidgets() > 10, 'lg:ax-h-[50vh]': maxVisibleWidgets() <= 10 }\">\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs();track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n      <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n        [axAutoFocus]=\"true\">\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(widgetItem of pinnedWidgetItems();track widgetItem.title) {\n        <axp-widget-item [widget]=\"widgetItem\" [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n          (onWidgetClick)=\"handleWidgetClick($event)\" (onPinClick)=\"handleWidgetPinClick($event)\">\n        </axp-widget-item>\n        }\n      </div>\n      @if(pinnedWidgetItems().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(widgetItem of regularWidgetItems();track widgetItem.title) {\n        <axp-widget-item [widget]=\"widgetItem\" [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n          (onWidgetClick)=\"handleWidgetClick($event)\" (onPinClick)=\"handleWidgetPinClick($event)\">\n        </axp-widget-item>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"></ax-button>\n  </ax-suffix>\n</ax-footer>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "component", type: AXPWidgetItemComponent, selector: "axp-widget-item", inputs: ["widget", "isSelected", "showPinButton", "customClasses"], outputs: ["onWidgetClick", "onPinClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        AXCommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTabsModule,
+                        AXSearchBoxModule,
+                        AXPStickyDirective,
+                        AXPWidgetItemComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col ax-h-[95vh]\"\n  [ngClass]=\"{ 'lg:ax-h-[75vh]': maxVisibleWidgets() > 10, 'lg:ax-h-[50vh]': maxVisibleWidgets() <= 10 }\">\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs();track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n      <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n        [axAutoFocus]=\"true\">\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(widgetItem of pinnedWidgetItems();track widgetItem.title) {\n        <axp-widget-item [widget]=\"widgetItem\" [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n          (onWidgetClick)=\"handleWidgetClick($event)\" (onPinClick)=\"handleWidgetPinClick($event)\">\n        </axp-widget-item>\n        }\n      </div>\n      @if(pinnedWidgetItems().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(widgetItem of regularWidgetItems();track widgetItem.title) {\n        <axp-widget-item [widget]=\"widgetItem\" [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n          (onWidgetClick)=\"handleWidgetClick($event)\" (onPinClick)=\"handleWidgetPinClick($event)\">\n        </axp-widget-item>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"></ax-button>\n  </ax-suffix>\n</ax-footer>\n}" }]
+        }], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }] } });
+
+var widgetPicker_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPDesignerWidgetPickerComponent: AXPDesignerWidgetPickerComponent
+});
+
+class AXPWidgetDesignerRendererDirective {
+    /**
+     * @ignore
+     */
+    constructor() {
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+        this.injector = inject(Injector);
+        this.widgetRegistry = inject(AXPWidgetRegistryService);
+        this.zone = inject(NgZone);
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isLoadingComponent = false;
+        this.currentNodeId = null;
+        this.service = inject(AXPDesignerService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.parentNode = input(...(ngDevMode ? [undefined, { debugName: "parentNode" }] : /* istanbul ignore next */ []));
+        this.parentElement = input(...(ngDevMode ? [undefined, { debugName: "parentElement" }] : /* istanbul ignore next */ []));
+        this.parentComponent = input(...(ngDevMode ? [undefined, { debugName: "parentComponent" }] : /* istanbul ignore next */ []));
+        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+        this.locked = input(false, ...(ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []));
+        this.mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        this.hostElement = () => this.instance?.host;
+        this.getId = (w) => get(w, '__meta__.id');
+        this.isCurrentWidget = (w) => this.getId(w) == this.getId(this.node());
+        this.subs = [];
+        this.subs[0] = this.service.onUpdate
+            .pipe(
+        //debounceTime(time),
+        distinctUntilChanged((p, c) => this.getId(p.widget) == this.getId(c.widget) && isEqual(p.values?.options, c.values?.options)), filter((c) => this.isCurrentWidget(c.widget) && !this.locked()))
+            .subscribe((c) => {
+            this.applyOptions(c.values?.options);
+        });
+        //
+        this.subs[1] = this.service.onSelected
+            .pipe(distinctUntilChanged((p, c) => this.getId(p.widget) == this.getId(c.widget)))
+            .subscribe((c) => {
+            this.zone.runOutsideAngular(() => {
+                if (this.isCurrentWidget(c.widget) && !this.locked()) {
+                    this.applySelectedStyle();
+                }
+                else {
+                    this.removeSelectedStyle();
+                }
+            });
+        });
+        //
+        this.subs[2] = this.service.onFocused
+            .pipe(distinctUntilChanged((p, c) => !isNil(p.widget) && !isNil(c.widget) && this.getId(p.widget) == this.getId(c.widget)))
+            .subscribe((c) => {
+            if (c.widget && this.isCurrentWidget(c.widget)) {
+                this.addOverlay();
+            }
+            else {
+                this.removeOverlay();
+            }
+        });
+        //
+        this.subs[3] = this.service.onRefresh
+            .pipe(debounceTime(200), filter((c) => this.isCurrentWidget(c.widget)))
+            .subscribe((c) => {
+            this.instance?.setChildren(this.node().children ?? []);
+        });
+        //
+    }
+    // Detect input changes
+    ngOnChanges(changes) {
+        if (changes['mode'] || changes['node']) {
+            const nodeId = this.getId(this.node()) || null;
+            const modeChanged = changes['mode']?.currentValue !== changes['mode']?.previousValue;
+            const nodeChanged = changes['node'] && nodeId !== this.currentNodeId;
+            // Only load if there's an actual change and we're not already loading
+            //if ((modeChanged || nodeChanged) && !this.isLoadingComponent) {
+            this.loadComponent();
+            //}
+        }
+    }
+    ngOnDestroy() {
+        this.subs.forEach((s) => {
+            s.unsubscribe();
+        });
+        // Clear loading state and reset tracking variables
+        this.isLoadingComponent = false;
+        this.currentNodeId = null;
+        this.isLoading.set(false);
+        // Clear view container
+        this.viewContainerRef.clear();
+    }
+    async loadComponent() {
+        // Prevent duplicate loading
+        if (this.isLoadingComponent) {
+            return;
+        }
+        try {
+            this.isLoadingComponent = true;
+            const nodeId = this.getId(this.node()) || null;
+            // Skip if already loaded for the same node and mode
+            // if (this.currentNodeId === nodeId && this.instance) {
+            //   this.isLoadingComponent = false;
+            //   return;
+            // }
+            this.viewContainerRef.clear();
+            this.isLoading.set(true);
+            this.currentNodeId = nodeId;
+            this.config = this.widgetRegistry.resolve(this.node().type);
+            //
+            const props = [...(this.config?.properties ?? []), ...(this.config?.components[this.mode()]?.properties ?? [])]
+                ?.filter((c) => c.schema.defaultValue != null)
+                .map((c) => ({ [c.name]: cloneDeep(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: cloneDeep(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.instance = this.viewContainerRef.createComponent(com, { injector: token }).instance;
+            this.instance.locked = this.locked();
+            this.instance.parent = this.parentNode();
+            this.instance.parentElement = this.parentElement();
+            this.instance.parentComponent = this.parentComponent();
+            this.instance.index = this.index();
+            this.instance.mode = this.mode();
+            //
+            this.instance.onStatusChanged
+                .pipe(filter((c) => c == AXPWidgetStatus.Rendered), first())
+                .subscribe(() => {
+                const host = this.hostElement();
+                set(host, '__meta__.renderer', this);
+                set(host, '__meta__.instance', this.instance);
+                host.classList.add('axp-widget-host');
+                if (this.mode() == 'designer') {
+                    if (!this.locked()) {
+                        host.addEventListener('mouseover', (e) => {
+                            e.stopPropagation();
+                            this.addOverlay();
+                            this.focus();
+                        });
+                        host.addEventListener('mouseleave', (e) => {
+                            e.stopPropagation();
+                            this.removeOverlay();
+                            this.blur();
+                        });
+                        host.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            this.applySelectedStyle();
+                            this.service.select({ widget: this.node() });
+                        });
+                        this.service.register({
+                            config: this.config,
+                            id: get(this.node(), '__meta__.id'),
+                            instance: this.instance,
+                            widget: this.node(),
+                        });
+                    }
+                }
+                this.isLoading.set(false);
+            });
+        }
+        catch (error) {
+            console.error('Error loading component:', error);
+            this.isLoading.set(false);
+        }
+        finally {
+            this.isLoadingComponent = false;
+        }
+    }
+    select() {
+        if (this.locked())
+            return;
+        //
+        this.service.select({ widget: this.node() });
+        this.applySelectedStyle();
+    }
+    focus() {
+        if (this.locked())
+            return;
+        //
+        this.service.focus({ widget: this.node() });
+    }
+    blur() {
+        if (this.locked())
+            return;
+        //
+        this.service.focus({ widget: null });
+    }
+    applySelectedStyle() {
+        if (this.locked())
+            return;
+        //
+        this.hostElement()?.classList.add('axp-state-selected');
+        this.hostElement()?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    removeSelectedStyle() {
+        this.hostElement()?.classList.remove('axp-state-selected');
+    }
+    addOverlay() {
+        if (this.locked())
+            return;
+        //
+        this.zone.runOutsideAngular(() => {
+            if (this.hostElement()) {
+                this.hostElement()?.classList.add('axp-state-hover');
+                //
+                if (this.hostElement().querySelector('.axp-widget-overlay') || this.config?.type == 'container') {
+                    return;
+                }
+                this.overlay = document.createElement('div');
+                this.overlay.classList.add('axp-widget-overlay');
+                this.overlay.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.select();
+                });
+                this.overlay.addEventListener('mouseleave', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.blur();
+                });
+                this.hostElement().appendChild(this.overlay);
+            }
+        });
+    }
+    removeOverlay() {
+        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.instance instanceof AXPValueWidgetComponent && this.node().defaultValue != null) {
+            this.instance.setValue(cloneDeep(this.node().defaultValue));
+        }
+        this.mergedOptions.update((currentOptions) => {
+            return merge(currentOptions, values);
+        });
+        this.instance?.setOptions(this.mergedOptions());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetDesignerRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: AXPWidgetDesignerRendererDirective, isStandalone: true, selector: "[axp-widget-designer-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, parentElement: { classPropertyName: "parentElement", publicName: "parentElement", isSignal: true, isRequired: false, transformFunction: null }, parentComponent: { classPropertyName: "parentComponent", publicName: "parentComponent", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", 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 } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetDesignerRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axp-widget-designer-renderer]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { parentNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentNode", required: false }] }], parentElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentElement", required: false }] }], parentComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentComponent", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
+class AXPDesignerBoardComponent {
+    // Unified method to extract media queries and create a custom class
+    applyResponsiveStyles(breakpoint) {
+        const minWidth = get(this.breakpointMap, breakpoint);
+        const mediaRules = [];
+        // Loop through all the stylesheets
+        for (const sheet of Array.from(document.styleSheets)) {
+            try {
+                // Loop through CSS rules
+                for (const rule of Array.from(sheet.cssRules)) {
+                    // Check if the rule is a CSSMediaRule
+                    if (rule instanceof CSSMediaRule && rule.media.mediaText.includes(`min-width: ${minWidth}px`)) {
+                        // Loop through the media rule's CSS rules
+                        for (const subRule of Array.from(rule.cssRules)) {
+                            mediaRules.push(subRule.cssText);
+                        }
+                    }
+                }
+            }
+            catch (e) {
+                console.error('Error accessing stylesheet:', e);
+            }
+        }
+        // Create a dynamic class for the media queries
+        this.createCustomClass(`axp-preview-${breakpoint}`, mediaRules, breakpoint);
+    }
+    createCustomClass(className, styles, breakpoint) {
+        const styleSheet = document.createElement('style');
+        styleSheet.setAttribute('data-screen', breakpoint);
+        // Construct a pure CSS string, dynamically replacing the breakpoint prefix
+        let styleString = '';
+        styles.forEach((style) => {
+            // Replace any prefixed classes like 'lg:' or 'md:' dynamically
+            const dynamicPrefix = new RegExp(`\\.${breakpoint}\\\\:`, 'g');
+            styleString += `.${className} ${style.replace(dynamicPrefix, '.')}`; // Replace the breakpoint prefix
+        });
+        styleSheet.innerText = styleString;
+        this.removeCustomClass();
+        this.elementRef.nativeElement.appendChild(styleSheet);
+    }
+    removeCustomClass() {
+        this.elementRef.nativeElement.querySelectorAll('style').forEach((s) => s.remove());
+    }
+    /**
+     * @ignore
+     */
+    constructor() {
+        this.context = {};
+        this.elementRef = inject((ElementRef));
+        this.breakpointMap = {
+            sm: 640,
+            md: 768,
+            lg: 1024,
+            xl: 1280,
+            xxl: 1536,
+        };
+        this.service = inject(AXPDesignerService);
+        this.width = computed(() => {
+            switch (this.service.size()) {
+                case 'sm':
+                    return '340px';
+                case 'md':
+                case 'lg':
+                    return '768px';
+                default:
+                    return '100%';
+            }
+        }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.ef = effect(() => {
+            this.removeCustomClass();
+            if (this.service.size() != 'xl') {
+                this.applyResponsiveStyles(this.service.size());
+            }
+        }, ...(ngDevMode ? [{ debugName: "ef" }] : /* istanbul ignore next */ []));
+        this.service.onRefresh.subscribe(() => {
+            this.contextMenu?.refresh();
+        });
+    }
+    handleContextMenuOpening(e) {
+        const renderer = get(e.targetElement, '__meta__.renderer');
+        const instance = get(e.targetElement, '__meta__.instance');
+        if (!renderer || !instance) {
+            e.canceled = true;
+            return;
+        }
+        renderer.select();
+        // Fetch context menu items for the current instance
+        try {
+            const items = this.service.getContextMenuItems(instance, true);
+            if (items.length) {
+                e.items.push(...items);
+            }
+            else {
+                e.canceled = true;
+            }
+        }
+        catch (error) {
+            console.error('Failed to get context menu items:', error);
+            e.canceled = true;
+        }
+        // Recursively bind instance data to all items
+        this.bindInstanceToItems(e.items, instance);
+        // Traverse through parents and add their menu items directly to the root level
+        this.addParentsToRootMenu(instance, e.items);
+    }
+    addParentsToRootMenu(instance, items) {
+        let parent = instance?.parent;
+        const parentItems = [];
+        // Traverse up the parent chain, adding each parent to the "Parents" menu
+        while (parent) {
+            try {
+                const widget = parent;
+                const parentContextItems = this.service.getContextMenuItems(widget);
+                // Create a new menu item for this parent
+                const parentMenuItem = {
+                    text: parent.config.title,
+                    icon: parent.config.icon,
+                    items: [
+                        {
+                            text: 'Select',
+                            name: 'select',
+                            break: true,
+                            icon: 'fa-solid fa-arrow-pointer',
+                        },
+                        ...parentContextItems,
+                    ],
+                };
+                // Recursively bind instance data to all items
+                this.bindInstanceToItems(parentMenuItem.items ?? [], widget);
+                // Add the parent menu item to the parentItems array
+                parentItems.push(parentMenuItem);
+            }
+            catch (error) {
+                console.error('Failed to get parent context menu items:', error);
+            }
+            // Move to the next parent in the chain
+            parent = parent?.parent;
+        }
+        // If there are any parent items, add them under a "Parents" group
+        if (parentItems.length > 0) {
+            items[items.length - 1].break = true;
+            items.push({
+                text: 'Parents',
+                icon: 'fa-solid fa-turn-up', // Icon for the "Parents" group
+                items: parentItems, // Add all parent items here
+            });
+        }
+    }
+    async handleContextMenuItemClick(e) {
+        if (e.item.name) {
+            const instance = get(e.item.data, "instance");
+            await this.service.executeCommand({ instance, name: e.item.name });
+        }
+    }
+    bindInstanceToItems(items, instance) {
+        items.forEach(item => {
+            // Ensure each item gets the correct instance
+            item.data = { ...(item.data ?? {}), instance };
+            // If the item has sub-items, bind instance to them recursively
+            if (item.items) {
+                this.bindInstanceToItems(item.items, instance);
+            }
+        });
+    }
+    get __style() {
+        const cls = {};
+        cls[`width`] = this.width();
+        cls[`max-width`] = '1280px';
+        return cls;
+    }
+    get __class() {
+        const cls = {};
+        cls[`axp-designer-board`] = true;
+        cls[`axp-state-design`] = true;
+        cls['ax-h-full'] = true;
+        cls['ax-overflow-auto'] = true;
+        cls[`axp-preview-${this.service.size()}`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPWidgetCoreModule, AXPWidgetDesignerRendererDirective, AXMenuModule], template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>" }]
+        }], ctorParameters: () => [], propDecorators: { contextMenu: [{
+                type: ViewChild,
+                args: ['contextMenu']
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+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: "21.2.9", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerBreadcrumbsComponent, isStandalone: true, selector: "axp-designer-breadcrumbs", ngImport: i0, template: `
+    <ax-breadcrumbs>
+      @for( b of service.breadcrumbs();track $index){
+      <ax-breadcrumbs-item>
+        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) }}</a>
+      </ax-breadcrumbs-item>
+      }
+      <ng-template #divider>
+        <i class="ax-icon ax-icon-chevron-right"></i>
+      </ng-template>
+    </ax-breadcrumbs>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$3.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$3.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: "21.2.9", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-designer-breadcrumbs',
+                    template: `
+    <ax-breadcrumbs>
+      @for( b of service.breadcrumbs();track $index){
+      <ax-breadcrumbs-item>
+        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) }}</a>
+      </ax-breadcrumbs-item>
+      }
+      <ng-template #divider>
+        <i class="ax-icon ax-icon-chevron-right"></i>
+      </ng-template>
+    </ax-breadcrumbs>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXPWidgetCoreModule, AXBreadcrumbsModule, AXDecoratorModule]
+                }]
+        }] });
+
+class AXPLayoutDesignerDrawerContentComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between  ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AXDecoratorModule], selector: 'axp-designer-drawer-content', template: "<div class=\"ax-flex ax-flex-col ax-border-e ax-w-72 ax-h-full\">\n    <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between  ax-p-2 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center ax-font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"ax-flex-1 ax-h-full ax-overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [] });
+
+class AXPDesignerDataSourcesComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+        this.workflow = inject(AXPWorkflowService);
+        this.dataSourceProvider = inject(AXPDataSourceDefinitionProviderService);
+        this.list = signal([], ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        const items = (await this.dataSourceProvider.items()).map(c => ({ name: c.name, title: c.title }));
+        this.list.set(items);
+    }
+    async handleAddClick() {
+        this.workflow.execute('create-entity', {
+            entity: `PlatformManagement.DataSource`,
+            options: {
+                process: {
+                    canCreateNewOne: false,
+                    redirect: false,
+                },
+                layout: {
+                    size: 'lg'
+                }
+            },
+            metadata: {
+                formBuilder: true
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerDataSourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerDataSourcesComponent, isStandalone: true, selector: "axp-designer-data-sources", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>Data Sources</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" title=\"Add New Data Source\" (onClick)=\"handleAddClick()\">\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (list().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of list(); track $index) {\n          <li>\n            <i class=\"ax-me-1 fa-solid fa-table\"></i>\n            {{ item.title }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-database\"\n        [title]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.title'\"\n        [description]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-data-sources', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXPLayoutDesignerDrawerContentComponent,
+                        AXPStateMessageComponent
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>Data Sources</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" title=\"Add New Data Source\" (onClick)=\"handleAddClick()\">\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (list().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of list(); track $index) {\n          <li>\n            <i class=\"ax-me-1 fa-solid fa-table\"></i>\n            {{ item.title }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-database\"\n        [title]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.title'\"\n        [description]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
+        }] });
+
+class AXPDesignerHistoryComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.ax-italic]=\"step.isFuture\"\n            [class.ax-text-neutral-400]=\"step.isFuture\"\n            [class.ax-state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n            {{ step.description }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-history\"\n        [title]=\"'@layout-designer:components.history.empty-states.no-changes.title'\"\n        [description]=\"'@layout-designer:components.history.empty-states.no-changes.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-history', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXPLayoutDesignerDrawerContentComponent,
+                        AXPStateMessageComponent
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.ax-italic]=\"step.isFuture\"\n            [class.ax-text-neutral-400]=\"step.isFuture\"\n            [class.ax-state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n            {{ step.description }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-history\"\n        [title]=\"'@layout-designer:components.history.empty-states.no-changes.title'\"\n        [description]=\"'@layout-designer:components.history.empty-states.no-changes.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
+        }] });
+
+class AXPDesignerOutlineComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+        this.collapsedStates = new Map();
+        this.root = signal(this.getTree(), ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+        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));
+    }
+    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: "21.2.9", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\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          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div\n            [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\"\n          >\n            <span class=\"ax-w-5\">\n              @if (item.children?.length) {\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-chevron-right]=\"isCollapsed(item)\"\n                  (click)=\"handleToggleClick($event, item)\"\n                  [class.fa-chevron-down]=\"!isCollapsed(item)\"\n                ></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"ax-w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2 ax-justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-shapes\"\n        [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\"\n        [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXPLayoutDesignerDrawerContentComponent,
+                        AXPStateMessageComponent
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\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          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div\n            [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\"\n          >\n            <span class=\"ax-w-5\">\n              @if (item.children?.length) {\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-chevron-right]=\"isCollapsed(item)\"\n                  (click)=\"handleToggleClick($event, item)\"\n                  [class.fa-chevron-down]=\"!isCollapsed(item)\"\n                ></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"ax-w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2 ax-justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-shapes\"\n        [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\"\n        [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class AXPDesignerPagesComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content class=\"ax-text-on-lightest\">\n  <ax-title>Pages</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"ax-text-sm ax-p-2 ax-rounded ax-md ax-space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out hover:ax-bg-dark ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n        [class.ax-bg-darkest]=\"$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          <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    } @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</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-pages', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AXPWidgetCoreModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXPLayoutDesignerDrawerContentComponent
+                    ], template: "<axp-designer-drawer-content class=\"ax-text-on-lightest\">\n  <ax-title>Pages</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"ax-text-sm ax-p-2 ax-rounded ax-md ax-space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out hover:ax-bg-dark ax-py-1 ax-px-2 ax-rounded-sm ax-group ax-flex ax-justify-between ax-items-center\"\n        [class.ax-bg-darkest]=\"$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          <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    } @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</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
+        }] });
+
+class AXPDesignerHeaderMenuComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+    }
+    handleKeyboardEvent(event) {
+        if (event.code == 'Delete' && this.service.canDelete()) {
+            event.preventDefault();
+            this.service.removeWidget();
+        }
+        if (event.code == 'Insert' && this.service.canInsert()) {
+            event.preventDefault();
+            this.service.showPicker();
+        }
+        if (event.shiftKey && event.target == document.body) {
+            switch (event.code) {
+                case 'KeyN':
+                    event.preventDefault();
+                    this.service.new();
+                    break;
+            }
+        }
+        if (event.ctrlKey) {
+            switch (event.code) {
+                case 'KeyS':
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        this.service.saveAs();
+                    }
+                    else {
+                        this.service.save();
+                    }
+                    break;
+                case 'KeyR':
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        this.service.openPreviewWindow();
+                    }
+                    else {
+                        this.service.openPreviewDialog();
+                    }
+                    break;
+            }
+        }
+        //
+        if (event.ctrlKey && event.target == document.body) {
+            switch (event.code) {
+                case 'KeyZ':
+                    if (this.service.canUndo()) {
+                        event.preventDefault();
+                        this.service.undo();
+                    }
+                    break;
+                case 'KeyY':
+                    if (this.service.canRedo()) {
+                        event.preventDefault();
+                        this.service.redo();
+                    }
+                    break;
+                case 'KeyC':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault();
+                        this.service.copy();
+                    }
+                    break;
+                case 'KeyD':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault();
+                        this.service.clone();
+                    }
+                    break;
+                case 'KeyX':
+                    if (this.service.canCutCopy()) {
+                        // ;
+                        event.preventDefault();
+                        this.service.cut();
+                    }
+                    break;
+                case 'KeyV':
+                    if (this.service.canPaste()) {
+                        event.preventDefault();
+                        this.service.paste();
+                    }
+                    break;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AXDecoratorModule, AXMenuModule], selector: 'axp-designer-header-menu', template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n  </ax-menu-item>\n</ax-menu>" }]
+        }], propDecorators: { handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class AXPDesignerViewSizeToolbarComponent {
+    constructor() {
+        this.size = model('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPDesignerViewSizeToolbarComponent, isStandalone: true, selector: "axp-designer-view-sizes", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, ngImport: i0, template: `
+    <ax-button-group [color]="'primary'" [selection]="'multiple'">
+      <ax-button-group-item  [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
+        <ax-icon class="fa-light fa-desktop fa-fw "></ax-icon>
+      </ax-button-group-item>
+      <ax-button-group-item [selected]="size() == 'lg'" [data]="'lg'" (onClick)="size.set('lg')">
+        <ax-icon class="fa-light fa-tablet fa-fw "></ax-icon>
+      </ax-button-group-item>
+      <ax-button-group-item [selected]="size() == 'sm'" [data]="'sm'" (onClick)="size.set('sm')">
+        <ax-icon class="fa-light fa-mobile fa-fw "></ax-icon>
+      </ax-button-group-item>
+    </ax-button-group>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$4.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$4.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-designer-view-sizes',
+                    imports: [AXButtonGroupModule, AXDecoratorModule, AXMenuModule],
+                    template: `
+    <ax-button-group [color]="'primary'" [selection]="'multiple'">
+      <ax-button-group-item  [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
+        <ax-icon class="fa-light fa-desktop fa-fw "></ax-icon>
+      </ax-button-group-item>
+      <ax-button-group-item [selected]="size() == 'lg'" [data]="'lg'" (onClick)="size.set('lg')">
+        <ax-icon class="fa-light fa-tablet fa-fw "></ax-icon>
+      </ax-button-group-item>
+      <ax-button-group-item [selected]="size() == 'sm'" [data]="'sm'" (onClick)="size.set('sm')">
+        <ax-icon class="fa-light fa-mobile fa-fw "></ax-icon>
+      </ax-button-group-item>
+    </ax-button-group>
+  `,
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }] } });
+
+class AXPLayoutDesignerComponent {
+    constructor() {
+        this.service = inject(AXPDesignerService);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.strategy = input(...(ngDevMode ? [undefined, { debugName: "strategy" }] : /* istanbul ignore next */ []));
+        this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null, ...(ngDevMode ? [{ debugName: "nodeConfig" }] : /* istanbul ignore next */ []));
+        this.service.onUpdate.subscribe((e) => {
+            this.propertyViewer.update(e.values);
+        });
+    }
+    ngOnInit() {
+        if (this.id()) {
+            this.service.loadById(this.id(), { strategy: (this.strategy() ?? AXPTemplateLoadingStrategy.Connector) });
+        }
+    }
+    get __styles() {
+        const styles = {};
+        styles[`direction`] = 'ltr';
+        return styles;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm 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/images/logos/icon-light.svg\" 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  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (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 look=\"blank\" (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 look=\"blank\" (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  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  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-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\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 [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-layout-designer', encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXPWidgetCoreModule,
+                        AXPDesignerBoardComponent,
+                        AXPWidgetPropertyViewerComponent,
+                        AXPDesignerBreadcrumbsComponent,
+                        AXPDesignerOutlineComponent,
+                        AXPDesignerHeaderMenuComponent,
+                        AXPDesignerHistoryComponent,
+                        AXPDesignerDataSourcesComponent,
+                        AXPDesignerPagesComponent,
+                        AXPDesignerViewSizeToolbarComponent,
+                        AXTabsModule,
+                        AXButtonModule,
+                        AXDrawerModule,
+                        AXDecoratorModule,
+                        AXMenuModule,
+                        AXButtonGroupModule,
+                        AXDropdownModule,
+                        AXDropdownButtonModule,
+                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm 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/images/logos/icon-light.svg\" 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  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (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 look=\"blank\" (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 look=\"blank\" (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  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  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-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\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 [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], propertyViewer: [{
+                type: ViewChild,
+                args: [AXPWidgetPropertyViewerComponent, { static: true }]
+            }], __styles: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+class AXPLayoutDesignerPreviewViewerComponent {
+    constructor() {
+        this.context = {};
+        this.document = signal({ type: AXPWidgetsCatalog.document }, ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
+        this.currentPageIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
+        this.connector = inject(AXPDesignerConnector);
+        this.eventService = inject(AXPBroadcastEventService);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.currentPage = computed(() => {
+            return (this.document().children?.[this.currentPageIndex()] ?? { type: AXPWidgetsCatalog.pageLayout });
+        }, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        this.eventService
+            .listen(AXPDesignerMessageKeys.Preview)
+            .pipe(this.unsubscriber.takeUntilDestroy)
+            .subscribe((event) => {
+            this.document.set(event.data.document);
+        });
+        //
+        if (document.body.parentElement) {
+            document.body.parentElement.classList.remove('ax-dark');
+            document.body.parentElement.style.backgroundColor = 'unset';
+            document.body.style.backgroundColor = 'unset';
+        }
+    }
+    ngAfterViewInit() {
+        this.eventService.publish(AXPDesignerMessageKeys.Loaded);
+    }
+    handleContextChanged(e) {
+        this.context = e.data;
+        this.eventService.publish(AXPDesignerMessageKeys.ContextChanged, this.context);
+    }
+    ngOnDestroy() {
+        this.eventService.unsubscribe(AXPDesignerMessageKeys.Preview);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", providers: [AXUnsubscriber], ngImport: i0, template: `
+    <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
+      <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
+    </axp-widgets-container>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-layout-builder-viewer',
+                    template: `
+    <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
+      <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
+    </axp-widgets-container>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [AXPWidgetCoreModule],
+                    providers: [AXUnsubscriber],
+                }]
+        }], ctorParameters: () => [] });
+
+class AXPLayoutDesignerPreviewFrameComponent {
+    constructor() {
+        this.size = input('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.width = computed(() => {
+            ;
+            switch (this.size()) {
+                case 'sm':
+                    return '340px';
+                case 'md':
+                case 'lg':
+                    return '768px';
+                default:
+                    return '100%';
+            }
+        }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    }
+    get __class() {
+        const cls = {};
+        cls['ax-flex'] = true;
+        cls['ax-flex-col'] = true;
+        cls['ax-h-full'] = true;
+        cls['ax-W-full'] = true;
+        cls['lg:ax-p-20'] = true;
+        cls['ax-bg-[#f3f3fe]'] = true;
+        cls['ax-w-full'] = true;
+        cls['ax-items-center'] = true;
+        cls['ax-overflow-auto'] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPLayoutDesignerPreviewFrameComponent, isStandalone: true, selector: "axp-layout-preview-frame", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
+    <div
+      class="ax-flex-1 lg:ax-rounded-lg ax-bg-white lg:ax-shadow-md   ax-p-2"
+      [style.width]="width()"
+      style="max-width: 1280px;"
+    >
+      <iframe
+        class="ax-w-full ax-h-full ax-bg-transparent"
+        [frameBorder]="0"
+        [src]="'/forms/viewer' | safe : 'resourceUrl'"
+      >
+      </iframe>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-layout-preview-frame',
+                    template: `
+    <div
+      class="ax-flex-1 lg:ax-rounded-lg ax-bg-white lg:ax-shadow-md   ax-p-2"
+      [style.width]="width()"
+      style="max-width: 1280px;"
+    >
+      <iframe
+        class="ax-w-full ax-h-full ax-bg-transparent"
+        [frameBorder]="0"
+        [src]="'/forms/viewer' | safe : 'resourceUrl'"
+      >
+      </iframe>
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [AXSafePipe]
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
+    constructor() {
+        super();
+        this.clipboard = inject(AXPClipBoardService);
+        this.settings = inject(AXPSettingsService);
+        this.eventService = inject(AXPBroadcastEventService);
+        this.initialSize = 'xl';
+        this.isDialogWindow = false;
+        this.jsonSettingsKey = 'forms:preview:json';
+        this.jsonViewCollapsed = signal(true, ...(ngDevMode ? [{ debugName: "jsonViewCollapsed" }] : /* istanbul ignore next */ []));
+        this.size = signal(this.initialSize, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        //
+        this.eventService.listen(AXPDesignerMessageKeys.ContextChanged).subscribe((event) => {
+            this.context.set(event.data);
+        });
+    }
+    async ngOnInit() {
+        this.size.set(this.initialSize);
+        const settingValue = await this.settings.get(this.jsonSettingsKey);
+        this.jsonViewCollapsed.set(!settingValue);
+    }
+    handleCloseButton() {
+        if (this.isDialogWindow) {
+            this.close();
+        }
+        else {
+            window.opener.focus();
+            window.close();
+        }
+    }
+    handlePreviewWindow() {
+        this.eventService.publish(AXPDesignerMessageKeys.PreviewWindow);
+        this.close();
+    }
+    handleCopyJson() {
+        this.clipboard.copy('Json Data', JSON.stringify(this.context()));
+    }
+    async handleCollapsedChange(value) {
+        await this.settings.scope(AXPPlatformScope.User).set(this.jsonSettingsKey, !value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-layout-preview', encapsulation: ViewEncapsulation.None, imports: [
+                        AXButtonModule,
+                        AXButtonGroupModule,
+                        AXDrawerModule,
+                        AXDecoratorModule,
+                        AXJsonViewerModule,
+                        AXPLayoutDesignerPreviewFrameComponent,
+                        AXPDesignerViewSizeToolbarComponent
+                    ], template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>" }]
+        }], ctorParameters: () => [] });
+
+var preview_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPLayoutDesignerPreviewComponent: AXPLayoutDesignerPreviewComponent
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, cloneWidgetMenu };
+//# sourceMappingURL=acorex-platform-layout-designer.mjs.map