@acorex/platform 21.0.0-next.71 → 21.0.0-next.72

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

@@ -5,14 +5,14 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$3 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutBaseWidgetComponent, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, viewChild, afterNextRender, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } 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';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXToastService } from '@acorex/components/toast';
 import { AXFileService } from '@acorex/core/file';
 import { merge, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, isEqual } from 'lodash-es';
 import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as merge$1 } from 'rxjs';
-import { AXPBroadcastEventService, AXPPlatformScope, AXPDataSourceDefinitionProviderService, AXPHookService } from '@acorex/platform/core';
+import { AXPBroadcastEventService, AXPPlatformScope, AXPDataSourceDefinitionProviderService, AXPHookService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPKeyboardShortcutPriority } from '@acorex/platform/core';
 import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import * as i1$1 from '@acorex/cdk/common';
@@ -41,6 +41,7 @@ import { AXMenuModule } from '@acorex/components/menu';
 import * as i1$4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
+import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i4$1 from '@acorex/components/json-viewer';
 import { AXJsonViewerModule } from '@acorex/components/json-viewer';
@@ -2260,18 +2261,22 @@ const AXPLayoutDesignerHeaderMenuHookKeys = {
 
 //#region ---- Imports ----
 class AXPDesignerHeaderMenuComponent {
+    //#endregion
+    //#region ---- Lifecycle Methods ----
     constructor() {
         //#region ---- Services & Dependencies ----
         this.service = inject(AXPDesignerService);
         this.hooks = inject(AXPHookService);
         this.translationService = inject(AXTranslationService);
+        this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
+        this.destroyRef = inject(DestroyRef);
+        this.elementRef = inject((ElementRef));
         //#endregion
         //#region ---- Hook-driven menu contributions ----
         this.rootMenuContributions = signal([], ...(ngDevMode ? [{ debugName: "rootMenuContributions" }] : /* istanbul ignore next */ []));
         this.submenuContributions = signal({}, ...(ngDevMode ? [{ debugName: "submenuContributions" }] : /* istanbul ignore next */ []));
+        this.registerDesignerKeyboardShortcuts();
     }
-    //#endregion
-    //#region ---- Lifecycle Methods ----
     async ngOnInit() {
         const rootPayload = await this.hooks.runAsync(AXPLayoutDesignerHeaderMenuHookKeys.root, { designer: this.service, items: [] });
         rootPayload.items.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
@@ -2303,134 +2308,202 @@ class AXPDesignerHeaderMenuComponent {
                 : e.label,
         })));
     }
-    //#endregion
-    handleKeyboardEvent(event) {
-        const skipDesignerShortcuts = this.isKeyboardTargetInsideEditableField(event.target);
-        if (!skipDesignerShortcuts && event.code == 'Delete' && this.service.canDelete()) {
-            event.preventDefault();
-            this.service.removeWidget();
-        }
-        if (!skipDesignerShortcuts && event.code == 'Insert' && this.service.canInsert()) {
-            event.preventDefault();
-            this.service.showPicker();
-        }
-        if (event.shiftKey && event.target == document.body) {
-            switch (event.code) {
-                case 'KeyN':
-                    event.preventDefault();
-                    this.service.new();
-                    break;
-            }
-        }
-        if (event.ctrlKey) {
-            switch (event.code) {
-                case 'KeyS':
-                    event.preventDefault();
-                    if (event.shiftKey) {
-                        this.service.saveAs();
-                    }
-                    else {
-                        this.service.save();
-                    }
-                    break;
-                case 'KeyR':
-                    event.preventDefault();
-                    if (event.shiftKey) {
-                        this.service.openPreviewWindow();
-                    }
-                    else {
-                        this.service.openPreviewDialog();
-                    }
-                    break;
-            }
-        }
-        //
-        if (event.ctrlKey && event.target == document.body) {
-            switch (event.code) {
-                case 'KeyZ':
-                    if (this.service.canUndo()) {
-                        event.preventDefault();
-                        this.service.undo();
-                    }
-                    break;
-                case 'KeyY':
-                    if (this.service.canRedo()) {
-                        event.preventDefault();
-                        this.service.redo();
-                    }
-                    break;
-                case 'KeyC':
-                    if (this.service.canCutCopy()) {
-                        event.preventDefault();
-                        this.service.copy();
-                    }
-                    break;
-                case 'KeyD':
-                    if (this.service.canCutCopy()) {
-                        event.preventDefault();
-                        this.service.clone();
-                    }
-                    break;
-                case 'KeyX':
-                    if (this.service.canCutCopy()) {
-                        // ;
-                        event.preventDefault();
-                        this.service.cut();
-                    }
-                    break;
-                case 'KeyV':
-                    if (this.service.canPaste()) {
-                        event.preventDefault();
-                        this.service.paste();
-                    }
-                    break;
-            }
-        }
+    shortcutKeys(chord) {
+        return chordToKbdItemKeys(chord);
     }
-    /**
-     * When focus is in a native edit control, avoid stealing Del/Ins for designer widget commands
-     * (e.g. AI assist prompt textarea over the form designer).
-     */
-    isKeyboardTargetInsideEditableField(target) {
-        if (!(target instanceof HTMLElement)) {
-            return false;
-        }
-        if (target.isContentEditable) {
-            return true;
-        }
-        const field = target.closest('input, textarea, select');
-        if (!field || field.disabled) {
-            return false;
-        }
-        if (field instanceof HTMLInputElement) {
-            const type = field.type;
-            if (type === 'hidden' ||
-                type === 'checkbox' ||
-                type === 'radio' ||
-                type === 'button' ||
-                type === 'submit' ||
-                type === 'reset' ||
-                type === 'file' ||
-                field.readOnly) {
-                return false;
-            }
-            return true;
-        }
-        if (field instanceof HTMLTextAreaElement) {
-            return !field.readOnly;
-        }
-        return true;
+    registerDesignerKeyboardShortcuts() {
+        const scope = '@layout-designer:feature.title';
+        const base = {
+            owner: this.destroyRef,
+            elementRef: this.elementRef,
+            priority: AXPKeyboardShortcutPriority.Page,
+            scope,
+        };
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-file',
+            shortcuts: [
+                {
+                    keys: ['shift+n'],
+                    title: '@layout-designer:keyboard-shortcuts.new',
+                    group: '@layout-designer:keyboard-shortcuts.groups.file',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.new();
+                        }
+                    },
+                },
+                {
+                    keys: ['ctrl+s'],
+                    title: '@layout-designer:keyboard-shortcuts.save',
+                    group: '@layout-designer:keyboard-shortcuts.groups.file',
+                    allowInEditableFields: true,
+                    handler: () => {
+                        void this.service.save();
+                    },
+                },
+                {
+                    keys: ['ctrl+shift+s'],
+                    title: '@layout-designer:keyboard-shortcuts.save-as',
+                    group: '@layout-designer:keyboard-shortcuts.groups.file',
+                    allowInEditableFields: true,
+                    handler: () => {
+                        void this.service.saveAs();
+                    },
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-run',
+            shortcuts: [
+                {
+                    keys: ['ctrl+r'],
+                    title: '@layout-designer:keyboard-shortcuts.preview',
+                    group: '@layout-designer:keyboard-shortcuts.groups.run',
+                    allowInEditableFields: true,
+                    handler: () => {
+                        void this.service.openPreviewDialog();
+                    },
+                },
+                {
+                    keys: ['ctrl+shift+r'],
+                    title: '@layout-designer:keyboard-shortcuts.preview-window',
+                    group: '@layout-designer:keyboard-shortcuts.groups.run',
+                    allowInEditableFields: true,
+                    handler: () => {
+                        void this.service.openPreviewWindow();
+                    },
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-delete',
+            when: () => this.service.canDelete(),
+            shortcuts: [
+                {
+                    keys: ['delete'],
+                    title: '@layout-designer:keyboard-shortcuts.delete-widget',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: () => this.service.removeWidget(),
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-insert',
+            when: () => this.service.canInsert(),
+            shortcuts: [
+                {
+                    keys: ['insert'],
+                    title: '@layout-designer:keyboard-shortcuts.insert-widget',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: () => {
+                        void this.service.showPicker();
+                    },
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-undo',
+            when: () => this.service.canUndo(),
+            shortcuts: [
+                {
+                    keys: ['ctrl+z'],
+                    title: '@layout-designer:keyboard-shortcuts.undo',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.undo();
+                        }
+                    },
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-redo',
+            when: () => this.service.canRedo(),
+            shortcuts: [
+                {
+                    keys: ['ctrl+y'],
+                    title: '@layout-designer:keyboard-shortcuts.redo',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.redo();
+                        }
+                    },
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-cut-copy',
+            when: () => this.service.canCutCopy(),
+            shortcuts: [
+                {
+                    keys: ['ctrl+c'],
+                    title: '@layout-designer:keyboard-shortcuts.copy',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.copy();
+                        }
+                    },
+                },
+                {
+                    keys: ['ctrl+d'],
+                    title: '@layout-designer:keyboard-shortcuts.clone',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.clone();
+                        }
+                    },
+                },
+                {
+                    keys: ['ctrl+x'],
+                    title: '@layout-designer:keyboard-shortcuts.cut',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.cut();
+                        }
+                    },
+                },
+            ],
+        });
+        this.shortcutRegistry.register({
+            ...base,
+            id: 'designer-header-paste',
+            when: () => this.service.canPaste(),
+            shortcuts: [
+                {
+                    keys: ['ctrl+v'],
+                    title: '@layout-designer:keyboard-shortcuts.paste',
+                    group: '@layout-designer:keyboard-shortcuts.groups.edit',
+                    handler: (event) => {
+                        if (this.isDesignerBodyTarget(event)) {
+                            this.service.paste();
+                        }
+                    },
+                },
+            ],
+        });
+    }
+    isDesignerBodyTarget(event) {
+        return event.target === document.body;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    @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-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-kbd class=\"look-text\">\n            <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n          </ax-kbd>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-kbd class=\"look-text\">\n            <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n          </ax-kbd>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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 class=\"look-text\">\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 [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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 class=\"look-text\">\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 class=\"look-text\">\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 class=\"look-text\">\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 [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ imports: [AXDecoratorModule, AXMenuModule], selector: 'axp-designer-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-text> Shift+N </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if(service.canSave())\n    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-text> Ctrl+Shift+S </ax-text>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Z </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+Y </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+D </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+X </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text> Ctrl+C </ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+V</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-text>Del</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    @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-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-text>Ctrl+Shift+R</ax-text>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>" }]
-        }], propDecorators: { handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+            args: [{ imports: [AXDecoratorModule, AXKBDComponent, AXKBDItemComponent, AXMenuModule], selector: 'axp-designer-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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    {\n    <ng-container>\n      <ax-menu-item (onClick)=\"service.save()\">\n        <ax-text>Save</ax-text>\n        <ax-suffix>\n          <ax-kbd class=\"look-text\">\n            <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n          </ax-kbd>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-menu-item (onClick)=\"service.saveAs()\">\n        <ax-text>Save As...</ax-text>\n        <ax-suffix>\n          <ax-kbd class=\"look-text\">\n            <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n          </ax-kbd>\n        </ax-suffix>\n      </ax-menu-item>\n      <ax-divider></ax-divider>\n    </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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 class=\"look-text\">\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 [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.clone()\">\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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 class=\"look-text\">\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 class=\"look-text\">\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 class=\"look-text\">\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 [disabled]=\"!service.canDelete()\" (onClick)=\"service.removeWidget()\">\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\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-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd class=\"look-text\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n" }]
+        }], ctorParameters: () => [] });
 
 class AXPDesignerViewSizeToolbarComponent {
     constructor() {