@acorex-platform/framework-client 0.0.18 → 0.0.20

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

@@ -11,10 +11,10 @@ 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 { AXPWidgetsCatalog, AXPPlatformScope, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
+import { AXPWidgetsCatalog, AXPPlatformScope, runtimeQueryCollectionData, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
 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, AXPDataSourceDefinitionProviderService, AXPHookService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys } from '@acorex-platform/framework-client/core';
+import { AXPBroadcastEventService, AXPHookService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys } from '@acorex-platform/framework-client/core';
 import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import * as i1$1 from '@acorex/cdk/common';
@@ -42,7 +42,7 @@ import * as i2$2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import * as i1$4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import { AXPCommandService } from '@acorex-platform/framework-client/runtime';
+import { AXPCommandService, AXPQueryService } from '@acorex-platform/framework-client/runtime';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i4$1 from '@acorex/components/json-viewer';
@@ -152,18 +152,24 @@ class UpdateWidgetCommand {
 }
 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.undoStack = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "undoStack" }] : /* istanbul ignore next */ []));
+        this.currentIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+        this.selectedNode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.canUndo = computed(() => this.currentIndex() >= 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = computed(() => this.currentIndex() < this.undoStack().length - 1, /* @ts-ignore */
+        ...(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 */ []));
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
     }
     executeCommand(command) {
         // Check if the currentIndex is not at the end of the undoStack
@@ -221,10 +227,10 @@ class CommandManager {
         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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -232,10 +238,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerConnector }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerConnector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerConnector, decorators: [{
             type: Injectable
         }] });
 
@@ -355,10 +361,10 @@ class AXPWidgetPickerService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -376,40 +382,60 @@ class AXPDesignerService {
         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.document = signal(this.createDoc(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
+        this.currentPageIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
+        this.currentPage = signal(this.document().children?.[0], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
         this.commandManager = inject(CommandManager);
-        this.clipboard = signal(null, ...(ngDevMode ? [{ debugName: "clipboard" }] : /* istanbul ignore next */ []));
+        this.clipboard = signal(null, /* @ts-ignore */
+        ...(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.canCutCopy = computed(() => this.can(this.selectedNode()).copyOrCut, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canCutCopy" }] : /* istanbul ignore next */ []));
+        this.canDelete = computed(() => this.can(this.selectedNode()).delete, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
+        this.canInsert = computed(() => this.can(this.selectedNode()).insert, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canInsert" }] : /* istanbul ignore next */ []));
+        this.canPaste = computed(() => this.can(this.selectedNode()).paste, /* @ts-ignore */
+        ...(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.history = computed(() => this.commandManager.history(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+        this.canUndo = computed(() => this.commandManager.canUndo(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = computed(() => this.commandManager.canRedo(), /* @ts-ignore */
+        ...(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.canSave = computed(() => this.templateId() != null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+        this.unsavedChanges = signal(false, /* @ts-ignore */
+        ...(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 */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
+        this.selectedNode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.selectedNodeConfig = computed(() => get(this.selectedNode(), '__meta__.config'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNodeConfig" }] : /* istanbul ignore next */ []));
         this._focusedNode = null;
         this.focusedNode = () => this._focusedNode;
-        this.size = signal('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.size = signal('xl', /* @ts-ignore */
+        ...(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.templateId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
+        this.loadingStrategy = signal(AXPTemplateLoadingStrategy.Connector, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingStrategy" }] : /* istanbul ignore next */ []));
         this.#ef = effect(() => {
             this.refresh({ widget: this.currentPage() });
-        }, ...(ngDevMode ? [{ debugName: "#ef" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#ef" }] : /* istanbul ignore next */ []));
         this.can = (widget) => {
             if (!widget) {
                 return {
@@ -1020,10 +1046,10 @@ class AXPDesignerService {
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1036,16 +1062,16 @@ class AXPDesignerAddWidgetButtonComponent {
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPDesignerAddWidgetButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-button", ngImport: i0, template: `
     <div class="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 .container{margin-inline:auto;display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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 }); }
+  `, isInline: true, styles: ["axp-designer-add-widget-button .container{margin-inline:auto;display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerAddWidgetButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-add-widget-button', template: `
     <div class="container">
@@ -1053,19 +1079,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <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 .container{margin-inline:auto;display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule], encapsulation: ViewEncapsulation.None, styles: ["axp-designer-add-widget-button .container{margin-inline:auto;display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class AXPDesignerAddWidgetLineButtonComponent {
     constructor() {
-        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+        this.text = input(/* @ts-ignore */
+        ...(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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", 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="flex items-center py-4 text-xs">
       <div class="flex-grow border-t-2 border-dashed border-surface"></div>
       <div class="mx-2 ax-sm">
@@ -1077,7 +1104,7 @@ class AXPDesignerAddWidgetLineButtonComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerAddWidgetLineButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-add-widget-line-button',
@@ -1122,8 +1149,8 @@ class AXPDesignerAddWidgetMiniButtonComponent {
         cls[`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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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="m-auto py-4 px-8">
         <div
@@ -1136,7 +1163,7 @@ class AXPDesignerAddWidgetMiniButtonComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-add-widget-mini-button',
@@ -1167,8 +1194,10 @@ 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 */ []));
+        this.items = computed(() => Array.from({ length: this.itemsCount() }).map((v, index) => index + 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.range = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
     }
     handleMouseHover(c) {
         this.range.set(c);
@@ -1179,8 +1208,8 @@ class AXPDesignerFlexDrawerComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerFlexDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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>
@@ -1195,9 +1224,9 @@ class AXPDesignerFlexDrawerComponent {
         </tr>
       </tbody>
     </table>
-  `, isInline: true, styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--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:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerFlexDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerFlexDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-flex-drawer', template: `
     <table class="table-picker">
@@ -1214,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </tr>
       </tbody>
     </table>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--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:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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']]
@@ -1225,10 +1254,14 @@ class AXPDesignerGridDrawerComponent {
         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 */ []));
+        this.rows = computed(() => Array.from({ length: this.rowsCount() }).map((v, index) => index + 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => Array.from({ length: this.colsCount() }).map((v, index) => index + 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.rangeR = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeR" }] : /* istanbul ignore next */ []));
+        this.rangeC = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeC" }] : /* istanbul ignore next */ []));
     }
     handleMouseHover(r, c) {
         this.rangeR.set(r);
@@ -1246,8 +1279,8 @@ class AXPDesignerGridDrawerComponent {
             '--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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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) {
@@ -1268,9 +1301,9 @@ class AXPDesignerGridDrawerComponent {
         </tr>
       </tbody>
     </table>
-  `, isInline: true, styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--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:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-grid-drawer', template: `
     <table class="table-picker">
@@ -1293,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </tr>
       </tbody>
     </table>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--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:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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']]
@@ -1331,23 +1364,30 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         this.mlResolver = inject(AXTranslationService);
         this.pinnedSettingKey = 'forms:widgets:picker:pinned';
         /** Keeps the line indicator in sync when the selected index is set programmatically (e.g. restored tab). */
-        this.tabsHost = viewChild('tabsHost', ...(ngDevMode ? [{ debugName: "tabsHost" }] : /* istanbul ignore next */ []));
+        this.tabsHost = viewChild('tabsHost', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabsHost" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ---- Class Properties ----
         this.i18n = WIDGET_PICKER_I18N;
-        this.searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.searchTerm = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
         this.widgets = [];
-        this.allWidgets = signal([], ...(ngDevMode ? [{ debugName: "allWidgets" }] : /* istanbul ignore next */ []));
-        this.pinnedWidgets = signal([], ...(ngDevMode ? [{ debugName: "pinnedWidgets" }] : /* istanbul ignore next */ []));
-        this.selectedWidgets = signal([], ...(ngDevMode ? [{ debugName: "selectedWidgets" }] : /* istanbul ignore next */ []));
-        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : /* istanbul ignore next */ []));
+        this.allWidgets = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allWidgets" }] : /* istanbul ignore next */ []));
+        this.pinnedWidgets = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinnedWidgets" }] : /* istanbul ignore next */ []));
+        this.selectedWidgets = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedWidgets" }] : /* istanbul ignore next */ []));
+        this.currentTabIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : /* istanbul ignore next */ []));
         /** Avoid persisting spurious tab events before restore + first paint complete. */
         this.allowTabPersistence = false;
         //#endregion
         //#region ---- Computed Properties ----
         this.displayWidgets = computed(() => {
             return this.allWidgets().map((c) => ({ ...c, pinned: this.pinnedWidgets().includes(c.name) }));
-        }, ...(ngDevMode ? [{ debugName: "displayWidgets" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayWidgets" }] : /* istanbul ignore next */ []));
         this.orderedList = computed(() => {
             const search = this.searchTerm().toLowerCase();
             const selectedTabName = this.selectedTab().name;
@@ -1358,10 +1398,14 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
                 const matchesSearch = !search || titleText.includes(search) || descText.includes(search);
                 return matchesTab && matchesSearch;
             }), [(w) => w.pinned, (w) => this.mlResolver.resolve(w.title)], ['desc', 'asc']);
-        }, ...(ngDevMode ? [{ debugName: "orderedList" }] : /* istanbul ignore next */ []));
-        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 */ []));
-        this.pinnedWidgetItems = computed(() => this.pinnedList().map(mapToWidgetItemData), ...(ngDevMode ? [{ debugName: "pinnedWidgetItems" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orderedList" }] : /* istanbul ignore next */ []));
+        this.pinnedList = computed(() => this.orderedList().filter((c) => c.pinned), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinnedList" }] : /* istanbul ignore next */ []));
+        this.regularList = computed(() => this.orderedList().filter((c) => !c.pinned), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "regularList" }] : /* istanbul ignore next */ []));
+        this.pinnedWidgetItems = computed(() => this.pinnedList().map(mapToWidgetItemData), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinnedWidgetItems" }] : /* istanbul ignore next */ []));
         this.regularGroupedSections = computed(() => {
             const tabName = this.selectedTab().name;
             const list = this.regularList();
@@ -1369,15 +1413,21 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
                 return this.buildAllTabSections(list);
             }
             return this.buildCategoryTabSections(list);
-        }, ...(ngDevMode ? [{ debugName: "regularGroupedSections" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "regularGroupedSections" }] : /* istanbul ignore next */ []));
         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: WIDGET_PICKER_I18N.tabAll, order: 0 }, ...this.categories()], (c) => c.order), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-        this.maxVisibleWidgets = computed(() => Math.max(1, ...this.categories().map((cat) => this.allWidgets().filter((w) => castArray(w.categories ?? []).some((wc) => wc.name === cat.name)).length)), ...(ngDevMode ? [{ debugName: "maxVisibleWidgets" }] : /* istanbul ignore next */ []));
-        this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()], ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
-        this.pickerShellClass = computed(() => `axp-designer-widget-picker flex flex-col h-[95vh] ${this.maxVisibleWidgets() > 10 ? 'lg:h-[75vh]' : 'lg:h-[50vh]'}`, ...(ngDevMode ? [{ debugName: "pickerShellClass" }] : /* istanbul ignore next */ []));
+            .flat(), 'name'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+        this.tabs = computed(() => orderBy([{ name: 'all', title: WIDGET_PICKER_I18N.tabAll, order: 0 }, ...this.categories()], (c) => c.order), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        this.maxVisibleWidgets = computed(() => Math.max(1, ...this.categories().map((cat) => this.allWidgets().filter((w) => castArray(w.categories ?? []).some((wc) => wc.name === cat.name)).length)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisibleWidgets" }] : /* istanbul ignore next */ []));
+        this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+        this.pickerShellClass = computed(() => `axp-designer-widget-picker flex flex-col h-[95vh] ${this.maxVisibleWidgets() > 10 ? 'lg:h-[75vh]' : 'lg:h-[50vh]'}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerShellClass" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             this.allowTabPersistence = true;
         }, { injector: this.injector });
@@ -1562,10 +1612,10 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         const originalWidget = widgetItem.data;
         return this.isWidgetSelected(originalWidget);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: [], 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" }, viewQueries: [{ propertyName: "tabsHost", first: true, predicate: ["tabsHost"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'bg-lightest shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, viewQueries: [{ propertyName: "tabsHost", first: true, predicate: ["tabsHost"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'bg-lightest shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -1578,7 +1628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPStickyDirective,
                         AXPWidgetItemComponent,
                         AXTranslationModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'bg-lightest shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'bg-lightest shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabsHost: [{ type: i0.ViewChild, args: ['tabsHost', { isSignal: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }] } });
 
 var widgetPicker_component = /*#__PURE__*/Object.freeze({
@@ -1591,22 +1641,31 @@ class AXPWidgetDesignerRendererDirective {
      * @ignore
      */
     constructor() {
-        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+        this.mergedOptions = signal({}, /* @ts-ignore */
+        ...(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.isLoading = signal(true, /* @ts-ignore */
+        ...(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.parentNode = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "parentNode" }] : /* istanbul ignore next */ []));
+        this.parentElement = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "parentElement" }] : /* istanbul ignore next */ []));
+        this.parentComponent = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "parentComponent" }] : /* istanbul ignore next */ []));
+        this.index = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+        this.locked = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []));
+        this.mode = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.node = input.required(/* @ts-ignore */
+        ...(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());
@@ -1852,10 +1911,10 @@ class AXPWidgetDesignerRendererDirective {
         });
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetDesignerRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetDesignerRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-designer-renderer]',
@@ -1931,13 +1990,15 @@ class AXPDesignerBoardComponent {
                 default:
                     return '100%';
             }
-        }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(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 */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ef" }] : /* istanbul ignore next */ []));
         this.service.onRefresh.subscribe(() => {
             this.contextMenu?.refresh();
         });
@@ -2043,10 +2104,10 @@ class AXPDesignerBoardComponent {
         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$3.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", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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$3.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", "closeOnRouteChange", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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: [{
@@ -2073,8 +2134,8 @@ class AXPDesignerBreadcrumbsComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerBreadcrumbsComponent, isStandalone: true, selector: "axp-designer-breadcrumbs", ngImport: i0, template: `
     <ax-breadcrumbs>
       @for( b of service.breadcrumbs();track $index){
       <ax-breadcrumbs-item>
@@ -2087,7 +2148,7 @@ class AXPDesignerBreadcrumbsComponent {
     </ax-breadcrumbs>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-breadcrumbs',
@@ -2112,54 +2173,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 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=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 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=\"flex-1 h-full 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 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=\"flex-1 h-full 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
             type: Component,
-            args: [{ imports: [AXDecoratorModule], selector: 'axp-designer-drawer-content', template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 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=\"flex-1 h-full overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ imports: [AXDecoratorModule], selector: 'axp-designer-drawer-content', changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 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=\"flex-1 h-full overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: () => [] });
 
+const LIST_REGISTERED_QUERIES_KEY = 'PlatformManagement:ListRegisteredQueries';
 class AXPDesignerDataSourcesComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
         this.commandService = inject(AXPCommandService);
-        this.dataSourceProvider = inject(AXPDataSourceDefinitionProviderService);
-        this.list = signal([], ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        this.queryService = inject(AXPQueryService);
+        this.list = signal([], /* @ts-ignore */
+        ...(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);
+        try {
+            const result = await this.queryService.fetch(LIST_REGISTERED_QUERIES_KEY, {
+                skip: 0,
+                take: 5000,
+            });
+            const page = runtimeQueryCollectionData(result);
+            const items = (page?.items ?? []).map((c) => {
+                const row = c;
+                return { name: row.name, title: row.title };
+            });
+            this.list.set(items);
+        }
+        catch {
+            this.list.set([]);
+        }
     }
     async handleAddClick() {
         await this.commandService.execute('Entity:Create', {
-            __context__: {
-                entity: 'PlatformManagement.DataSource',
-                entityInfo: {
-                    name: 'DataSource',
-                    module: 'PlatformManagement',
-                    title: '@platform-management:data-source.entity.title',
+            entity: 'PlatformManagement.QueryDefinition',
+            entityInfo: {
+                name: 'QueryDefinition',
+                module: 'PlatformManagement',
+                title: '@platform-management:query-definitions.entities.query-definition.title',
+            },
+            data: {},
+            options: {
+                process: {
+                    canCreateNewOne: false,
+                    redirect: false,
                 },
-                data: {},
-                options: {
-                    process: {
-                        canCreateNewOne: false,
-                        redirect: false,
-                    },
-                    layout: {
-                        size: 'lg',
-                    },
+                layout: {
+                    size: 'lg',
                 },
             },
-            __metadata__: {
+            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=\"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", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerDataSourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"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", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-data-sources', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXDecoratorModule,
@@ -2173,10 +2247,10 @@ 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.italic]=\"step.isFuture\"\n            [class.text-neutral-400]=\"step.isFuture\"\n            [class.state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"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$2.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", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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.italic]=\"step.isFuture\"\n            [class.text-neutral-400]=\"step.isFuture\"\n            [class.state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"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$2.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", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-history', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -2192,7 +2266,8 @@ class AXPDesignerOutlineComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
         this.collapsedStates = new Map();
-        this.root = signal(this.getTree(), ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+        this.root = signal(this.getTree(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
         merge$1(this.service.onRefresh, this.service.onUpdate).subscribe(() => {
             this.root.update((c) => ({ ...this.getTree() }));
         });
@@ -2226,10 +2301,10 @@ class AXPDesignerOutlineComponent {
         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=\"space-y-1 p-1 text-white 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.bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"flex flex-row items-center cursor-pointer transition duration-150 ease-in-out hover:bg-gray-700 py-1 px-2 rounded-sm group\"\n          >\n            <span class=\"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=\"w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"truncate flex-1 pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"invisible group-hover:visible flex gap-2 justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-white 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"space-y-1 p-1 text-white 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.bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"flex flex-row items-center cursor-pointer transition duration-150 ease-in-out hover:bg-gray-700 py-1 px-2 rounded-sm group\"\n          >\n            <span class=\"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=\"w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"truncate flex-1 pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"invisible group-hover:visible flex gap-2 justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-white 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -2243,10 +2318,10 @@ 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=\"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=\"text-sm p-2 rounded ax-md space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"cursor-pointer transition duration-150 ease-in-out hover:bg-dark py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.bg-darkest]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          Page {{ $index + 1 }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex justify-center items-center text-gray-300 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content class=\"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=\"text-sm p-2 rounded ax-md space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"cursor-pointer transition duration-150 ease-in-out hover:bg-dark py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.bg-darkest]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          Page {{ $index + 1 }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex justify-center items-center text-gray-300 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-pages', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXPWidgetCoreModule,
@@ -2283,8 +2358,10 @@ class AXPDesignerHeaderMenuComponent {
         this.elementRef = inject((ElementRef));
         //#endregion
         //#region ---- Hook-driven menu contributions ----
-        this.rootMenuContributions = signal([], ...(ngDevMode ? [{ debugName: "rootMenuContributions" }] : /* istanbul ignore next */ []));
-        this.submenuContributions = signal({}, ...(ngDevMode ? [{ debugName: "submenuContributions" }] : /* istanbul ignore next */ []));
+        this.rootMenuContributions = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootMenuContributions" }] : /* istanbul ignore next */ []));
+        this.submenuContributions = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submenuContributions" }] : /* istanbul ignore next */ []));
         this.registerDesignerKeyboardShortcuts();
     }
     async ngOnInit() {
@@ -2507,20 +2584,21 @@ class AXPDesignerHeaderMenuComponent {
     isDesignerBodyTarget(event) {
         return event.target === document.body;
     }
-    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", 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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\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-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\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    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\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: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", 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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\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-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\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    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\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: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXDecoratorModule, AXKBDComponent, AXKBDItemComponent, AXMenuModule], selector: 'axp-designer-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, 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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\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-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\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    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\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-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\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    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n" }]
         }], ctorParameters: () => [] });
 
 class AXPDesignerViewSizeToolbarComponent {
     constructor() {
-        this.size = model('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.size = model('xl', /* @ts-ignore */
+        ...(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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", 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>
@@ -2532,13 +2610,14 @@ class AXPDesignerViewSizeToolbarComponent {
         <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$5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$5.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$5.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-designer-view-sizes',
                     imports: [AXButtonGroupModule, AXDecoratorModule, AXMenuModule],
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     template: `
     <ax-button-group [color]="'primary'" [selection]="'multiple'">
       <ax-button-group-item  [selected]="size() == 'xl'" [data]="'xl'" (onClick)="size.set('xl')">
@@ -2558,9 +2637,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 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.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.strategy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "strategy" }] : /* istanbul ignore next */ []));
+        this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeConfig" }] : /* istanbul ignore next */ []));
         this.service.onUpdate.subscribe((e) => {
             this.propertyViewer.update(e.values);
         });
@@ -2575,10 +2657,10 @@ class AXPLayoutDesignerComponent {
         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=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"min-w-10 bg-lightest border-e ax-sm flex flex-col items-center ax-dark\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <img src=\"assets/images/logos/icon-light.svg\" class=\"w-6\" />\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button\n          look=\"blank\"\n          (onClick)=\"datasources.toggle()\"\n          title=\"Data Sources\"\n        >\n          <ax-icon class=\"fa-solid fa-database 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 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"h-10 bg-lightest border-b flex justify-between px-2 ax-dark\">\n        <div class=\"flex flex-1 items-center text-white justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                text=\"Open in new window\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\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=\"w-full flex-1\">\n        <!-- Pages -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"light-surface bg-lighter flex justify-center p-10\">\n          <axp-designer-board class=\"rounded-lg bg-lightest shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"h-10 bg-lightest border-t flex items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between text-white px-4 border-b h-10\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"font-semibold\">{{\n            nodeConfig()?.title | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"\n          service.update({ values: $event.values, mode: $event.mode })\n        \"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;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;background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 3)}axp-layout-designer .axp-designer-board ax-drawer{background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:var(--color-gray-300, oklch(87.2% .01 258.338));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--color-fuchsia-500, oklch(66.7% .295 322.15));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.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;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}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}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,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:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-white, #fff)}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-neutral-700, oklch(37.1% 0 0))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-300, oklch(87.2% .01 258.338))}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.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.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.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$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", 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=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"min-w-10 bg-lightest border-e ax-sm flex flex-col items-center ax-dark\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <img src=\"assets/images/brand/platform/platform-icon-light.svg\" class=\"w-6\" />\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button\n          look=\"blank\"\n          (onClick)=\"datasources.toggle()\"\n          title=\"Data Sources\"\n        >\n          <ax-icon class=\"fa-solid fa-database 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 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"h-10 bg-lightest border-b flex justify-between px-2 ax-dark\">\n        <div class=\"flex flex-1 items-center text-white justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                text=\"Open in new window\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\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=\"w-full flex-1\">\n        <!-- Pages -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"light-surface bg-lighter flex justify-center p-10\">\n          <axp-designer-board class=\"rounded-lg bg-lightest shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"h-10 bg-lightest border-t flex items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between text-white px-4 border-b h-10\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"$safeNavigationMigration(nodeConfig()?.icon)\"></i>\n          <span class=\"font-semibold\">{{\n            $safeNavigationMigration(nodeConfig()?.title) | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"\n          service.update({ values: $event.values, mode: $event.mode })\n        \"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;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;background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 3)}axp-layout-designer .axp-designer-board ax-drawer{background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:var(--color-gray-300, oklch(87.2% .01 258.338));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--color-fuchsia-500, oklch(66.7% .295 322.15));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.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;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}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}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,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:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-white, #fff)}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-neutral-700, oklch(37.1% 0 none))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-300, oklch(87.2% .01 258.338))}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.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.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.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$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-layout-designer', encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
@@ -2601,7 +2683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXDropdownModule,
                         AXDropdownButtonModule,
                         AXTranslationModule,
-                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"min-w-10 bg-lightest border-e ax-sm flex flex-col items-center ax-dark\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <img src=\"assets/images/logos/icon-light.svg\" class=\"w-6\" />\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button\n          look=\"blank\"\n          (onClick)=\"datasources.toggle()\"\n          title=\"Data Sources\"\n        >\n          <ax-icon class=\"fa-solid fa-database 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 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"h-10 bg-lightest border-b flex justify-between px-2 ax-dark\">\n        <div class=\"flex flex-1 items-center text-white justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                text=\"Open in new window\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\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=\"w-full flex-1\">\n        <!-- Pages -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"light-surface bg-lighter flex justify-center p-10\">\n          <axp-designer-board class=\"rounded-lg bg-lightest shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"h-10 bg-lightest border-t flex items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between text-white px-4 border-b h-10\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"font-semibold\">{{\n            nodeConfig()?.title | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"\n          service.update({ values: $event.values, mode: $event.mode })\n        \"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;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;background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 3)}axp-layout-designer .axp-designer-board ax-drawer{background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:var(--color-gray-300, oklch(87.2% .01 258.338));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--color-fuchsia-500, oklch(66.7% .295 322.15));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.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;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}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}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,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:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-white, #fff)}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-neutral-700, oklch(37.1% 0 0))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-300, oklch(87.2% .01 258.338))}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, providers: [AXPDesignerService], template: "<ax-drawer-container class=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"min-w-10 bg-lightest border-e ax-sm flex flex-col items-center ax-dark\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <img src=\"assets/images/brand/platform/platform-icon-light.svg\" class=\"w-6\" />\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button\n          look=\"blank\"\n          (onClick)=\"datasources.toggle()\"\n          title=\"Data Sources\"\n        >\n          <ax-icon class=\"fa-solid fa-database 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 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 text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"h-10 bg-lightest border-b flex justify-between px-2 ax-dark\">\n        <div class=\"flex flex-1 items-center text-white justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                text=\"Open in new window\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\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=\"w-full flex-1\">\n        <!-- Pages -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"light-surface bg-lighter flex justify-center p-10\">\n          <axp-designer-board class=\"rounded-lg bg-lightest shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"h-10 bg-lightest border-t flex items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between text-white px-4 border-b h-10\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"$safeNavigationMigration(nodeConfig()?.icon)\"></i>\n          <span class=\"font-semibold\">{{\n            $safeNavigationMigration(nodeConfig()?.title) | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"\n          service.update({ values: $event.values, mode: $event.mode })\n        \"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;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;background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 3)}axp-layout-designer .axp-designer-board ax-drawer{background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:var(--color-gray-300, oklch(87.2% .01 258.338));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--color-fuchsia-500, oklch(66.7% .295 322.15));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.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;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}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}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,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:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-white, #fff)}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-neutral-700, oklch(37.1% 0 none))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-300, oklch(87.2% .01 258.338))}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 }]
@@ -2613,14 +2695,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 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.document = signal({ type: AXPWidgetsCatalog.document }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
+        this.currentPageIndex = signal(0, /* @ts-ignore */
+        ...(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 */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
         this.eventService
             .listen(AXPDesignerMessageKeys.Preview)
             .pipe(this.unsubscriber.takeUntilDestroy)
@@ -2644,14 +2729,14 @@ class AXPLayoutDesignerPreviewViewerComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", 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$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-layout-builder-viewer',
@@ -2662,13 +2747,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `,
                     encapsulation: ViewEncapsulation.None,
                     imports: [AXPWidgetCoreModule],
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     providers: [AXUnsubscriber],
                 }]
         }], ctorParameters: () => [] });
 
 class AXPLayoutDesignerPreviewFrameComponent {
     constructor() {
-        this.size = input('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.size = input('xl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.width = computed(() => {
             ;
             switch (this.size()) {
@@ -2680,7 +2767,8 @@ class AXPLayoutDesignerPreviewFrameComponent {
                 default:
                     return '100%';
             }
-        }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     }
     get __class() {
         const cls = {};
@@ -2695,8 +2783,8 @@ class AXPLayoutDesignerPreviewFrameComponent {
         cls['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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", 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="flex-1 lg:rounded-lg bg-white lg:shadow-md p-2"
       [style.width]="width()"
@@ -2709,9 +2797,9 @@ class AXPLayoutDesignerPreviewFrameComponent {
       >
       </iframe>
     </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-layout-preview-frame',
@@ -2730,6 +2818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </div>
   `,
                     encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     imports: [AXSafePipe]
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], __class: [{
@@ -2746,9 +2835,12 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         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.jsonViewCollapsed = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jsonViewCollapsed" }] : /* istanbul ignore next */ []));
+        this.size = signal(this.initialSize, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.context = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         //
         this.eventService.listen(AXPDesignerMessageKeys.ContextChanged).subscribe((event) => {
             this.context.set(event.data);
@@ -2778,12 +2870,12 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
     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 h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n      <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 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=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 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=\"bg-[#f3f3fe] flex flex-1 justify-center 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=\"w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n        <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"text-surface-fore font-semibold\">Form Data</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 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=\"px-6 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: ["/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n      <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 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=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 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=\"bg-[#f3f3fe] flex flex-1 justify-center 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=\"w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n        <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"text-surface-fore font-semibold\">Form Data</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 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=\"px-6 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: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-layout-preview', encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'axp-layout-preview', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         AXButtonModule,
                         AXButtonGroupModule,
                         AXDrawerModule,
@@ -2791,7 +2883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXJsonViewerModule,
                         AXPLayoutDesignerPreviewFrameComponent,
                         AXPDesignerViewSizeToolbarComponent
-                    ], template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n      <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 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=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 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=\"bg-[#f3f3fe] flex flex-1 justify-center 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=\"w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n        <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"text-surface-fore font-semibold\">Form Data</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 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=\"px-6 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: ["/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n      <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 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=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 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=\"bg-[#f3f3fe] flex flex-1 justify-center 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=\"w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n        <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"text-surface-fore font-semibold\">Form Data</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 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=\"px-6 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: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [] });
 
 var preview_component = /*#__PURE__*/Object.freeze({