@acorex-platform/framework-client 0.0.57 → 0.0.59

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

@@ -15,6 +15,7 @@ import { AXPopupService } from '@acorex/components/popup';
 import { AXToastService } from '@acorex/components/toast';
 import { AXFileService } from '@acorex/core/file';
 import { AXPWidgetsCatalog, AXPPlatformScope, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
+import { AXPDialogOpener } from '@acorex-platform/framework-client/layout/builder';
 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';
@@ -529,25 +530,36 @@ function designerSurfaceHasDrawer(profile, drawer) {
 class AXPWidgetPickerService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.widgetRegistryService = inject(AXPWidgetRegistryService);
         this.translationService = inject(AXTranslationService);
     }
     async showPicker(options) {
-        const com = await Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent);
         const widgets = this.widgetRegistryService.all();
         const filteredWidgets = widgets.filter((widget) => this.matchesPickerOptions(widget, options));
-        //
-        const result = await this.popupService.open(com, {
-            title: await this.translationService.translateAsync('@form-template-management:designer.components.widget-picker.title'),
-            size: 'md',
-            closeButton: true,
+        let title = '';
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent),
             data: {
-                widgets: sortBy(filteredWidgets, (c) => c.title),
                 tabPersistenceContext: options.tabPersistenceContext,
+                groups: options.groups ?? null,
+                profileId: options.profile?.id ?? null,
+            },
+            prepare: async () => {
+                title = await this.translationService.translateAsync('@form-template-management:designer.components.widget-picker.title');
             },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'md',
+                closeButton: true,
+                data: {
+                    widgets: sortBy(filteredWidgets, (c) => c.title),
+                    tabPersistenceContext: options.tabPersistenceContext,
+                },
+            }),
         });
         //
-        const selectedWidgets = (result.data?.widgets ?? []);
+        const selectedWidgets = (result?.data?.widgets ?? []);
         return selectedWidgets.map((c) => ({
             type: c.name,
             options: c.options,
@@ -674,6 +686,7 @@ class AXPDesignerService {
     #ef;
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.toastService = inject(AXToastService);
         this.fileService = inject(AXFileService);
         this.loadingService = inject(AXLoadingDialogService);
@@ -1476,14 +1489,17 @@ class AXPDesignerService {
     }
     async openPreviewDialog() {
         this.updatePreview();
-        const com = await Promise.resolve().then(function () { return preview_component; }).then((c) => c.AXPLayoutDesignerPreviewComponent);
-        await this.popupService.open(com, {
-            header: false,
-            size: 'full',
-            data: {
-                initialSize: this.size(),
-                isDialogWindow: true,
-            },
+        await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return preview_component; }).then((c) => c.AXPLayoutDesignerPreviewComponent),
+            data: { templateId: this.templateId() ?? null },
+            show: (component) => this.popupService.open(component, {
+                header: false,
+                size: 'full',
+                data: {
+                    initialSize: this.size(),
+                    isDialogWindow: true,
+                },
+            }),
         });
     }
     openPreviewWindow() {
@@ -3496,7 +3512,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$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 }); }
+        ], 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: ["collapsedChange", "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,
@@ -3758,7 +3774,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$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 }); }
+    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: ["collapsedChange", "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,