@acorex-platform/framework-client 0.0.53 → 0.0.56

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

@@ -4,6 +4,10 @@ import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$3 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetRegistryService, AXP_LOCAL_DATA_SOURCES_OPTION, createDefaultLocalDataSourceColumns, readLocalDataSourcesFromNode, AXPLayoutBaseWidgetComponent, AXPValueWidgetComponent, AXPWidgetCoreModule, AXP_LOCAL_DATA_SOURCE_STORE, AXP_LAYOUT_PROFILE } from '@acorex-platform/framework-client/layout/widget-core';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import * as i1$2 from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, viewChild, afterNextRender, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild, DestroyRef } from '@angular/core';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
@@ -14,8 +18,6 @@ import { AXPWidgetsCatalog, AXPPlatformScope, AXPKeyboardShortcutPriority } from
 import { AXPBroadcastEventService, AXPDataGenerator, AXPHookService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPLogoComponent } from '@acorex-platform/framework-client/core';
 import { isEqual, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, merge } from 'lodash-es';
 import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as merge$1 } from 'rxjs';
-import * as i4 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPWidgetGroupEnum, AXP_WIDGET_TOKEN, AXPWidgetStatus, designerPreviewSizeToLayoutSize } from '@acorex-platform/framework-shared/widget-core';
 import * as i1$1 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
@@ -26,15 +28,13 @@ import * as i5 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXPSettingsService, AXPStickyDirective, AXPClipBoardService } from '@acorex-platform/framework-client/common';
 import { AXPWidgetItemComponent, AXPLocalDataSourceEditorDialogService, AXPStateMessageComponent, AXPWidgetPropertyViewerComponent } from '@acorex-platform/framework-client/layout/components';
-import * as i1$2 from '@angular/common';
-import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
-import * as i3 from '@acorex/components/drawer';
+import * as i3$1 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
-import * as i4$1 from '@acorex/components/dropdown';
+import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i5$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
@@ -44,7 +44,7 @@ import * as i1$4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXUnsubscriber } from '@acorex/core/utils';
-import * as i4$2 from '@acorex/components/json-viewer';
+import * as i4$1 from '@acorex/components/json-viewer';
 import { AXJsonViewerModule } from '@acorex/components/json-viewer';
 
 //#endregion
@@ -677,6 +677,7 @@ class AXPDesignerService {
         this.toastService = inject(AXToastService);
         this.fileService = inject(AXFileService);
         this.loadingService = inject(AXLoadingDialogService);
+        this.translationService = inject(AXTranslationService);
         this.widgetRegisteryService = inject(AXPWidgetRegistryService);
         this.connector = inject(AXPDesignerConnector);
         this.eventService = inject(AXPBroadcastEventService);
@@ -1353,27 +1354,39 @@ class AXPDesignerService {
         const rootNode = JSON.parse(content);
         const totalNode = this.countTotalNodes(rootNode);
         const processedNodes = { count: 0 };
+        const [cancelLabel, dialogTitle, processingText, loadedText, okLabel, closeLabel, cannotLoadText] = await Promise.all([
+            this.translationService.translateAsync('@general:actions.cancel.title'),
+            this.translationService.translateAsync('@layout-designer:import-dialog.title'),
+            this.translationService.translateAsync('@layout-designer:import-dialog.processing'),
+            this.translationService.translateAsync('@layout-designer:import-dialog.content-loaded'),
+            this.translationService.translateAsync('@general:actions.ok.title'),
+            this.translationService.translateAsync('@general:actions.close.title'),
+            this.translationService.translateAsync('@layout-designer:import-dialog.cannot-load'),
+        ]);
+        const progressStatus = async (count) => this.translationService.translateAsync('@layout-designer:import-dialog.progress', {
+            params: { count, total: totalNode },
+        });
         const button = {
-            text: 'Cancel',
+            text: cancelLabel,
             autofocus: true,
             color: 'primary',
-            onClick: (e) => {
+            onClick: () => {
                 dialog.close();
             },
         };
         const dialog = this.loadingService.show({
             mode: 'determinate',
-            title: 'Loading Content',
+            title: dialogTitle,
             progressColor: 'primary',
-            text: 'Processing content',
-            status: `0 of ${totalNode}`,
+            text: processingText,
+            status: await progressStatus(0),
             buttons: [button],
         });
         try {
             const reservedNames = new Set();
-            const root = await this.addMetaToNodes(rootNode, processedNodes, (count) => {
+            const root = await this.addMetaToNodes(rootNode, processedNodes, async (count) => {
                 dialog.setProgressValue(Math.ceil((count / totalNode) * 100));
-                dialog.setProgressStatus(`${count} of ${totalNode}`);
+                dialog.setProgressStatus(await progressStatus(count));
             }, reservedNames);
             const page = root.children?.[0];
             this.commandManager.clear();
@@ -1381,8 +1394,8 @@ class AXPDesignerService {
             this.currentPage.set(page);
             this.hydrateLocalDataSources(root);
             dialog.setProgressColor('success');
-            dialog.setProgressText('Content loaded successfully');
-            button.text = 'Okay';
+            dialog.setProgressText(loadedText);
+            button.text = okLabel;
             button.color = 'success';
             dialog.setProgressValue(100);
             setTimeout(() => {
@@ -1392,8 +1405,8 @@ class AXPDesignerService {
         }
         catch (error) {
             dialog.setProgressColor('danger');
-            dialog.setProgressText(error instanceof Error ? error.message : 'Cannot load content');
-            button.text = 'Close';
+            dialog.setProgressText(error instanceof Error ? error.message : cannotLoadText);
+            button.text = closeLabel;
             button.color = 'danger';
         }
     }
@@ -1576,21 +1589,21 @@ class AXPDesignerAddWidgetButtonComponent {
     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-button [text]="('@layout-designer:components.add-widget.add-new-element' | translate | async) ?? ''" (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.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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", "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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 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">
-      <ax-button [text]="'Add New Element'" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
+      <ax-button [text]="('@layout-designer:components.add-widget.add-new-element' | translate | async) ?? ''" (onClick)="handleClick($event)" [look]="'solid'" [color]="'primary'">
         <ax-icon icon="fa-solid fa-plus"></ax-icon>
       </ax-button>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule], encapsulation: ViewEncapsulation.None, styles: ["axp-designer-add-widget-button .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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXTranslationModule, AsyncPipe], 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 {
@@ -2116,7 +2129,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         return this.isWidgetSelected(originalWidget);
     }
     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]=\"'lightest-surface 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", "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", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { 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: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    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]=\"'lightest-surface 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", "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", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { 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: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
@@ -2739,7 +2752,7 @@ class AXPDesignerBreadcrumbsComponent {
         <i class="ax-icon ax-icon-chevron-right"></i>
       </ng-template>
     </ax-breadcrumbs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$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: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -2815,7 +2828,7 @@ class AXPDesignerDataSourcesComponent {
         this.store.update(created.id, { items: form.items, columns: form.columns });
     }
     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>{{ '@layout-designer:components.data-sources.title' | translate | async }}</ax-title>\n\n  <ax-content header>\n    <ax-button\n      look=\"blank\"\n      class=\"ax-sm\"\n      [title]=\"('@layout-designer:components.data-sources.add' | translate | async) ?? ''\"\n      (onClick)=\"handleAddClick()\"\n    >\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (store.sources().length) {\n      <!-- ----- Form-local named lists ----- -->\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of store.sources(); track item.id) {\n          <li class=\"flex items-center gap-1\">\n            <i class=\"me-1 fa-solid fa-table\"></i>\n            <span class=\"flex-1 truncate\">{{ item.name || ('@layout-designer:components.data-sources.untitled' | translate | async) }}</span>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@general:actions.edit.title' | translate | async) ?? ''\"\n              (onClick)=\"handleEdit(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n            </ax-button>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@layout-designer:components.data-sources.delete' | translate | async) ?? ''\"\n              (onClick)=\"handleRemove(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-trash\"></ax-icon>\n            </ax-button>\n          </li>\n        }\n      </ul>\n    }\n    <!-- ----- Empty local bag ----- -->\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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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>{{ '@layout-designer:components.data-sources.title' | translate | async }}</ax-title>\n\n  <ax-content header>\n    <ax-button\n      look=\"blank\"\n      class=\"ax-sm\"\n      [title]=\"('@layout-designer:components.data-sources.add' | translate | async) ?? ''\"\n      (onClick)=\"handleAddClick()\"\n    >\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (store.sources().length) {\n      <!-- ----- Form-local named lists ----- -->\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of store.sources(); track item.id) {\n          <li class=\"flex items-center gap-1\">\n            <i class=\"me-1 fa-solid fa-table\"></i>\n            <span class=\"flex-1 truncate\">{{ item.name || ('@layout-designer:components.data-sources.untitled' | translate | async) }}</span>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@general:actions.edit.title' | translate | async) ?? ''\"\n              (onClick)=\"handleEdit(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n            </ax-button>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@layout-designer:components.data-sources.delete' | translate | async) ?? ''\"\n              (onClick)=\"handleRemove(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-trash\"></ax-icon>\n            </ax-button>\n          </li>\n        }\n      </ul>\n    }\n    <!-- ----- Empty local bag ----- -->\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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
             type: Component,
@@ -2834,7 +2847,7 @@ class AXPDesignerHistoryComponent {
         this.service = inject(AXPDesignerService);
     }
     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", "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$1.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.ɵ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>{{ '@layout-designer:components.history.title' | translate | async }}</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]=\"('@layout-designer:components.history.clear' | translate | async) ?? ''\" 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", "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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
             type: Component,
@@ -2844,8 +2857,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXButtonModule,
                         AXDropdownModule,
                         AXPLayoutDesignerDrawerContentComponent,
-                        AXPStateMessageComponent
-                    ], template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.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" }]
+                        AXPStateMessageComponent,
+                        AXTranslationModule,
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.history.title' | translate | async }}</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]=\"('@layout-designer:components.history.clear' | translate | async) ?? ''\" 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" }]
         }] });
 
 class AXPDesignerOutlineComponent {
@@ -3036,7 +3050,7 @@ class AXPDesignerOutlineComponent {
         });
     }
     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", viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["outlineContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.outline.title' | translate | async }}</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <!-- ----- Outline tree of the current page ----- -->\n      <ul class=\"space-y-1 p-1 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 [class.darker-surface]=\"item === service.selectedNode()\" class=\"flex flex-row items-center gap-1 cursor-pointer transition duration-150 ease-in-out hover:dark-surface py-1 px-2 rounded-sm\" (contextmenu)=\"handleContextMenu($event, item)\">\n            <span class=\"w-3 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Collapse / expand when this node has children ----- -->\n              @if (item.children?.length) {\n                <i class=\"fa-solid fa-xs opacity-60\" [class.fa-chevron-right]=\"isCollapsed(item)\" (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"w-4 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Widget icon from config, colored by widget type ----- -->\n              @if (config?.icon) {\n                <i [ngClass]=\"getOutlineIconClass(config)\"></i>\n              }\n            </span>\n            @let title = getOutlineTitle(item);\n            @let suffix = getOutlineNameSuffix(item);\n            <!--------------------------------------------------------------->\n            <!-- ----- Translate type titles; plain captions and text-block content stay as stored ----- -->\n            @if (usesOutlineTranslation(title)) {\n              @let translated = (title | translate | async) ?? '';\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, translated, suffix)\">{{ translated }}{{ suffix }}</span>\n            }\n            <!-- ----- Plain caption or stripped text-block content ----- -->\n            @else {\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, outlinePlainTitle(title), suffix)\">{{ outlinePlainTitle(title) }}{{ suffix }}</span>\n            }\n          </div>\n          <!--->\n          <!-- ----- Nested outline children ----- -->\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    }\n    <!-- ----- Empty outline when the page has no widgets ----- -->\n    @else {\n      <axp-state-message icon=\"fa-light fa-shapes\" [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\" [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"></axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n\n<!-- Opened from each outline row; same commands as the canvas widget menu. -->\n<ax-context-menu class=\"ax-dark\" #outlineContextMenu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\" (onItemClick)=\"handleContextMenuItemClick($event)\"></ax-context-menu>\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: "ngmodule", type: AXTranslationModule }, { 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"] }, { 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"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["outlineContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.outline.title' | translate | async }}</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <!-- ----- Outline tree of the current page ----- -->\n      <ul class=\"space-y-1 p-1 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 [class.darker-surface]=\"item === service.selectedNode()\" class=\"flex flex-row items-center gap-1 cursor-pointer transition duration-150 ease-in-out hover:dark-surface py-1 px-2 rounded-sm\" (contextmenu)=\"handleContextMenu($event, item)\">\n            <span class=\"w-3 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Collapse / expand when this node has children ----- -->\n              @if (item.children?.length) {\n                <i class=\"fa-solid fa-xs opacity-60\" [class.fa-chevron-right]=\"isCollapsed(item)\" (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"w-4 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Widget icon from config, colored by widget type ----- -->\n              @if (config?.icon) {\n                <i [ngClass]=\"getOutlineIconClass(config)\"></i>\n              }\n            </span>\n            @let title = getOutlineTitle(item);\n            @let suffix = getOutlineNameSuffix(item);\n            <!--------------------------------------------------------------->\n            <!-- ----- Translate type titles; plain captions and text-block content stay as stored ----- -->\n            @if (usesOutlineTranslation(title)) {\n              @let translated = (title | translate | async) ?? '';\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, translated, suffix)\">{{ translated }}{{ suffix }}</span>\n            }\n            <!-- ----- Plain caption or stripped text-block content ----- -->\n            @else {\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, outlinePlainTitle(title), suffix)\">{{ outlinePlainTitle(title) }}{{ suffix }}</span>\n            }\n          </div>\n          <!--->\n          <!-- ----- Nested outline children ----- -->\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    }\n    <!-- ----- Empty outline when the page has no widgets ----- -->\n    @else {\n      <axp-state-message icon=\"fa-light fa-shapes\" [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\" [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"></axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n\n<!-- Opened from each outline row; same commands as the canvas widget menu. -->\n<ax-context-menu class=\"ax-dark\" #outlineContextMenu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\" (onItemClick)=\"handleContextMenuItemClick($event)\"></ax-context-menu>\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: "ngmodule", type: AXTranslationModule }, { 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"] }, { 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"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
             type: Component,
@@ -3055,7 +3069,7 @@ class AXPDesignerPagesComponent {
         this.service = inject(AXPDesignerService);
     }
     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>\n  <ax-title>{{ '@layout-designer:components.pages.title' | translate | async }}</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" [title]=\"'@layout-designer:components.pages.add' | translate | async\">\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:dark-surface py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.darker-surface]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          {{ '@layout-designer:components.pages.page-n' | translate: { params: { n: $index + 1 } } | async }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-trash 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=\"axp-designer-drawer-empty\">{{ '@layout-designer:components.pages.empty' | translate | async }}</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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>\n  <ax-title>{{ '@layout-designer:components.pages.title' | translate | async }}</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" [title]=\"'@layout-designer:components.pages.add' | translate | async\">\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:dark-surface py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.darker-surface]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          {{ '@layout-designer:components.pages.page-n' | translate: { params: { n: $index + 1 } } | async }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-trash 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=\"axp-designer-drawer-empty\">{{ '@layout-designer:components.pages.empty' | translate | async }}</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
             type: Component,
@@ -3325,11 +3339,11 @@ class AXPDesignerHeaderMenuComponent {
         return event.target === document.body;
     }
     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-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file\"></i>\n        </ax-icon>\n      </ax-prefix>\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-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-floppy-disk\"></i>\n            </ax-icon>\n          </ax-prefix>\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-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-file-pen\"></i>\n            </ax-icon>\n          </ax-prefix>\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-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-export\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-import\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-upload\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n      @for (item of submenuFor('import'); 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 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-undo\"></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>\n        <ax-icon>\n          <i class=\"fa-solid fa-eye\"></i>\n        </ax-icon>\n      </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>\n        <ax-icon>\n          <i class=\"fa-solid fa-window-restore\"></i>\n        </ax-icon>\n      </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    @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-divider></ax-divider>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-circle-info\"></i>\n        </ax-icon>\n      </ax-prefix>\n    </ax-menu-item>\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.ɵ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>{{ '@layout-designer:keyboard-shortcuts.groups.file' | translate | async }}</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>{{ '@layout-designer:menus.new' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file\"></i>\n        </ax-icon>\n      </ax-prefix>\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>{{ '@layout-designer:keyboard-shortcuts.save' | translate | async }}</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-floppy-disk\"></i>\n            </ax-icon>\n          </ax-prefix>\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>{{ '@layout-designer:menus.save-as-ellipsis' | translate | async }}</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-file-pen\"></i>\n            </ax-icon>\n          </ax-prefix>\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>{{ '@layout-designer:menus.export' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-export\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>{{ '@layout-designer:menus.download-json' | translate | async }}</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>{{ '@layout-designer:menus.import' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-import\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>{{ '@layout-designer:menus.import-json' | translate | async }}</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-upload\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n      @for (item of submenuFor('import'); 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 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>{{ '@layout-designer:keyboard-shortcuts.groups.edit' | translate | async }}</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>{{ '@layout-designer:keyboard-shortcuts.undo' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-undo\"></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>{{ '@layout-designer:keyboard-shortcuts.redo' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.clone' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.cut' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.copy' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.paste' | translate | async }}</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>{{ '@general:actions.delete.title' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.groups.run' | translate | async }}</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>{{ '@layout-designer:keyboard-shortcuts.preview' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-eye\"></i>\n        </ax-icon>\n      </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>{{ '@layout-designer:keyboard-shortcuts.preview-window' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-window-restore\"></i>\n        </ax-icon>\n      </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>{{ '@layout-designer:menus.help' | translate | async }}</ax-text>\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-divider></ax-divider>\n    <ax-menu-item>\n      <ax-text>{{ '@layout-designer:menus.about' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-circle-info\"></i>\n        </ax-icon>\n      </ax-prefix>\n    </ax-menu-item>\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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file\"></i>\n        </ax-icon>\n      </ax-prefix>\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-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-floppy-disk\"></i>\n            </ax-icon>\n          </ax-prefix>\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-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-file-pen\"></i>\n            </ax-icon>\n          </ax-prefix>\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-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-export\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-import\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-upload\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n      @for (item of submenuFor('import'); 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 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-undo\"></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>\n        <ax-icon>\n          <i class=\"fa-solid fa-eye\"></i>\n        </ax-icon>\n      </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>\n        <ax-icon>\n          <i class=\"fa-solid fa-window-restore\"></i>\n        </ax-icon>\n      </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    @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-divider></ax-divider>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-circle-info\"></i>\n        </ax-icon>\n      </ax-prefix>\n    </ax-menu-item>\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" }]
+            args: [{ imports: [AXDecoratorModule, AXKBDComponent, AXKBDItemComponent, AXMenuModule, AXTranslationModule, AsyncPipe], selector: 'axp-designer-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>{{ '@layout-designer:keyboard-shortcuts.groups.file' | translate | async }}</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>{{ '@layout-designer:menus.new' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file\"></i>\n        </ax-icon>\n      </ax-prefix>\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>{{ '@layout-designer:keyboard-shortcuts.save' | translate | async }}</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-floppy-disk\"></i>\n            </ax-icon>\n          </ax-prefix>\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>{{ '@layout-designer:menus.save-as-ellipsis' | translate | async }}</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-file-pen\"></i>\n            </ax-icon>\n          </ax-prefix>\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>{{ '@layout-designer:menus.export' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-export\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>{{ '@layout-designer:menus.download-json' | translate | async }}</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>{{ '@layout-designer:menus.import' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-import\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>{{ '@layout-designer:menus.import-json' | translate | async }}</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-upload\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n      @for (item of submenuFor('import'); 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 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>{{ '@layout-designer:keyboard-shortcuts.groups.edit' | translate | async }}</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>{{ '@layout-designer:keyboard-shortcuts.undo' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-undo\"></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>{{ '@layout-designer:keyboard-shortcuts.redo' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.clone' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.cut' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.copy' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.paste' | translate | async }}</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>{{ '@general:actions.delete.title' | translate | async }}</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>{{ '@layout-designer:keyboard-shortcuts.groups.run' | translate | async }}</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>{{ '@layout-designer:keyboard-shortcuts.preview' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-eye\"></i>\n        </ax-icon>\n      </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>{{ '@layout-designer:keyboard-shortcuts.preview-window' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-window-restore\"></i>\n        </ax-icon>\n      </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>{{ '@layout-designer:menus.help' | translate | async }}</ax-text>\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-divider></ax-divider>\n    <ax-menu-item>\n      <ax-text>{{ '@layout-designer:menus.about' | translate | async }}</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-circle-info\"></i>\n        </ax-icon>\n      </ax-prefix>\n    </ax-menu-item>\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 {
@@ -3482,7 +3496,7 @@ class AXPLayoutDesignerComponent {
                     }));
                 },
             },
-        ], 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=\"ax-dark min-w-10 lightest-surface border-e ax-sm flex flex-col items-center\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <axp-logo logoKey=\"platform\" appearance=\"onDark\" format=\"icon\" [size]=\"24\"></axp-logo>\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- ----- Palette opens the widget picker when the surface has no dedicated drawer ----- -->\n        @if (hasPaletteDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"service.showPicker()\"\n            [title]=\"('@layout-designer:components.palette.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-puzzle text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Pages drawer toggle ----- -->\n        @if (hasPagesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"pages.toggle()\"\n            [title]=\"('@layout-designer:components.pages.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-page text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Data sources drawer toggle ----- -->\n        @if (hasDataSourcesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"datasources.toggle()\"\n            [title]=\"('@layout-designer:components.data-sources.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-database text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Outline drawer toggle ----- -->\n        @if (hasOutlineDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"outline.toggle()\"\n            [title]=\"('@layout-designer:components.outline.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-list-tree text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- History drawer toggle ----- -->\n        @if (hasHistoryDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"history.toggle()\"\n            [title]=\"('@layout-designer:components.history.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-clock-rotate-left text-sm\"> </ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-dark h-10 lightest-surface border-b flex justify-between px-2\">\n        <div class=\"flex flex-1 items-center justify-start text-on-lightest\">\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]=\"('@layout-designer:keyboard-shortcuts.preview' | translate | async) ?? ''\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                [text]=\"('@layout-designer:keyboard-shortcuts.preview-window' | translate | async) ?? ''\"\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 drawer (rail button is profile-gated; panel stays mounted for #pages) ----- -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Data sources drawer ----- -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Outline drawer ----- -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- History drawer ----- -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\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=\"ax-light lighter-surface axp-designer-canvas flex h-full min-h-0 items-start justify-center overflow-auto p-10\">\n          <axp-designer-board class=\"rounded-lg lightest-surface shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-dark h-10 lightest-surface border-t flex items-center text-on-lightest\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal min-w-0 flex-1\">\n        </axp-designer-breadcrumbs>\n        <!-- ----- Hook-contributed actions at the footer end ----- -->\n        @if (footerEndActions().length) {\n          <div class=\"ms-auto flex items-center gap-1 pe-2\">\n            @for (item of footerEndActions(); track item.id) {\n              <ax-button\n                class=\"ax-sm\"\n                look=\"blank\"\n                [iconOnly]=\"true\"\n                [title]=\"item.resolvedLabel ?? ''\"\n                (onClick)=\"runFooterEndAction(item)\"\n              >\n                @if (item.iconClass) {\n                  <ax-icon>\n                    <i [class]=\"item.iconClass\"></i>\n                  </ax-icon>\n                }\n              </ax-button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side lightest-surface\"\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 px-4 border-b h-10 text-on-lightest\"\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        [bindingExpressionEditorMode]=\"'popup'\"\n        [widget]=\"service.selectedNode()!\"\n        [layoutProfile]=\"layoutProfileContext()\"\n        (onChanged)=\"service.applyPropertyPanelChange($event)\"\n        (pointerdown)=\"service.armPropertyPanelHistory()\"\n        (focusin)=\"service.armPropertyPanelHistory()\"\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{display:block;min-height:100%;width:100%;overflow:auto;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);background-image:linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,transparent 25%,transparent 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface))),linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,rgb(var(--ax-sys-color-lightest-surface)) 25% 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface)));background-size:20px 20px;background-position:0 0,10px 10px}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline,axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-border-light-surface));--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:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-accent1-500));--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:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1;cursor:default;align-items:center;justify-content:center;background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 10%,transparent);background-image:linear-gradient(135deg,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 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 srgb,var(--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 srgb,var(--color-primary-300) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 0,color-mix(in srgb,var(--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}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:rgba(var(--ax-sys-color-on-lightest-surface))}: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-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface));opacity:70%}@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", "layoutProfile", "bindingExpressionEditorMode"], 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", "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: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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=\"ax-dark min-w-10 lightest-surface border-e ax-sm flex flex-col items-center\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <axp-logo logoKey=\"platform\" appearance=\"onDark\" format=\"icon\" [size]=\"24\"></axp-logo>\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- ----- Palette opens the widget picker when the surface has no dedicated drawer ----- -->\n        @if (hasPaletteDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"service.showPicker()\"\n            [title]=\"('@layout-designer:components.palette.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-puzzle text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Pages drawer toggle ----- -->\n        @if (hasPagesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"pages.toggle()\"\n            [title]=\"('@layout-designer:components.pages.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-page text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Data sources drawer toggle ----- -->\n        @if (hasDataSourcesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"datasources.toggle()\"\n            [title]=\"('@layout-designer:components.data-sources.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-database text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Outline drawer toggle ----- -->\n        @if (hasOutlineDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"outline.toggle()\"\n            [title]=\"('@layout-designer:components.outline.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-list-tree text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- History drawer toggle ----- -->\n        @if (hasHistoryDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"history.toggle()\"\n            [title]=\"('@layout-designer:components.history.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-clock-rotate-left text-sm\"> </ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-dark h-10 lightest-surface border-b flex justify-between px-2\">\n        <div class=\"flex flex-1 items-center justify-start text-on-lightest\">\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]=\"('@layout-designer:keyboard-shortcuts.preview' | translate | async) ?? ''\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                [text]=\"('@layout-designer:keyboard-shortcuts.preview-window' | translate | async) ?? ''\"\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 drawer (rail button is profile-gated; panel stays mounted for #pages) ----- -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Data sources drawer ----- -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Outline drawer ----- -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- History drawer ----- -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\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=\"ax-light lighter-surface axp-designer-canvas flex h-full min-h-0 items-start justify-center overflow-auto p-10\">\n          <axp-designer-board class=\"rounded-lg lightest-surface shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-dark h-10 lightest-surface border-t flex items-center text-on-lightest\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal min-w-0 flex-1\">\n        </axp-designer-breadcrumbs>\n        <!-- ----- Hook-contributed actions at the footer end ----- -->\n        @if (footerEndActions().length) {\n          <div class=\"ms-auto flex items-center gap-1 pe-2\">\n            @for (item of footerEndActions(); track item.id) {\n              <ax-button\n                class=\"ax-sm\"\n                look=\"blank\"\n                [iconOnly]=\"true\"\n                [title]=\"item.resolvedLabel ?? ''\"\n                (onClick)=\"runFooterEndAction(item)\"\n              >\n                @if (item.iconClass) {\n                  <ax-icon>\n                    <i [class]=\"item.iconClass\"></i>\n                  </ax-icon>\n                }\n              </ax-button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side lightest-surface\"\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 px-4 border-b h-10 text-on-lightest\"\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        [bindingExpressionEditorMode]=\"'popup'\"\n        [widget]=\"service.selectedNode()!\"\n        [layoutProfile]=\"layoutProfileContext()\"\n        (onChanged)=\"service.applyPropertyPanelChange($event)\"\n        (pointerdown)=\"service.armPropertyPanelHistory()\"\n        (focusin)=\"service.armPropertyPanelHistory()\"\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{display:block;min-height:100%;width:100%;overflow:auto;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);background-image:linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,transparent 25%,transparent 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface))),linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,rgb(var(--ax-sys-color-lightest-surface)) 25% 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface)));background-size:20px 20px;background-position:0 0,10px 10px}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline,axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-border-light-surface));--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:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-accent1-500));--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:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1;cursor:default;align-items:center;justify-content:center;background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 10%,transparent);background-image:linear-gradient(135deg,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 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 srgb,var(--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 srgb,var(--color-primary-300) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 0,color-mix(in srgb,var(--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}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:rgba(var(--ax-sys-color-on-lightest-surface))}: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-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface));opacity:70%}@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", "layoutProfile", "bindingExpressionEditorMode"], 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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -3744,7 +3758,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         await this.settings.scope(AXPPlatformScope.User).set(this.jsonSettingsKey, !value);
     }
     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\">\n      <div class=\"flex items-center justify-between h-12 lightest-surface shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 justify-start\">\n          <ax-button look=\"blank\" [text]=\"'@layout-designer:preview.back' | translate | async\" (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]=\"'@layout-designer:keyboard-shortcuts.preview-window' | translate | async\" (onClick)=\"handlePreviewWindow()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-light lighter-surface flex flex-1 justify-center overflow-auto min-h-0\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <ax-drawer class=\"ax-dark w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative\">\n        <div class=\"flex items-center justify-between h-12 lightest-surface border-b shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"font-semibold text-on-lightest\">{{ '@layout-designer:preview.form-data' | translate | async }}</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\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", 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", "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$2.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    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\">\n      <div class=\"flex items-center justify-between h-12 lightest-surface shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 justify-start\">\n          <ax-button look=\"blank\" [text]=\"'@layout-designer:preview.back' | translate | async\" (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]=\"'@layout-designer:keyboard-shortcuts.preview-window' | translate | async\" (onClick)=\"handlePreviewWindow()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-light lighter-surface flex flex-1 justify-center overflow-auto min-h-0\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <ax-drawer class=\"ax-dark w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative\">\n        <div class=\"flex items-center justify-between h-12 lightest-surface border-b shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"font-semibold text-on-lightest\">{{ '@layout-designer:preview.form-data' | translate | async }}</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\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", 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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
             type: Component,