@acorex/platform 19.1.3 → 19.1.4

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

@@ -3,7 +3,7 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$3 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPWidgetComponent, AXP_WIDGETS_GROUPS, AXPWidgetDataSourceProviderService, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN } from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPWidgetComponent, AXP_WIDGETS_GROUPS, AXPWidgetDataSourceProviderService, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN, AXPWidgetStatus } from '@acorex/platform/layout/builder';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, input, output, EventEmitter, Output, HostBinding, model, HostListener, untracked, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
@@ -19,7 +19,7 @@ import * as i7 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i6 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import { AXPSettingValueProviderService, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
+import { AXPSettingValueProviderService, AXPSettingScope, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
@@ -1208,7 +1208,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
             pinnedWidgets = pinnedWidgets.filter((name) => name !== widget.name);
         }
         // Save the updated list of pinned widgets
-        await this.settingService.set(this.pinnedSettingKey, pinnedWidgets);
+        await this.settingService.scope(AXPSettingScope.User).set(this.pinnedSettingKey, pinnedWidgets);
         // Trigger a re-render of the widgets
         this.displayWidgets.set([...this.displayWidgets()]);
     }
@@ -1324,7 +1324,7 @@ class AXPWidgetPropertyViewerComponent {
     handleContextChange(e) {
         untracked(() => {
             this.context.set(e.data);
-            this.onChanged.emit({ values: this.context(), mode: e.init ? 'init' : 'update' });
+            this.onChanged.emit({ values: this.context(), mode: e.state == 'initiated' ? 'init' : 'update' });
         });
     }
     handleTabChange(event) {
@@ -1340,11 +1340,11 @@ class AXPWidgetPropertyViewerComponent {
         return (await this.dataSourceProvider.items()).map(c => ({ id: c.name, title: c.title }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" look=\"flat\">\n        @for( group of groups();track $index){\n        <ax-collapse\n          class=\"!ax-mb-0\"\n          [caption]=\"group.title\"\n          [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n        >\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n</axp-widgets-container>\n", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" look=\"flat\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n</axp-widgets-container>", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" look=\"flat\">\n        @for( group of groups();track $index){\n        <ax-collapse\n          class=\"!ax-mb-0\"\n          [caption]=\"group.title\"\n          [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n        >\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n</axp-widgets-container>\n", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" look=\"flat\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n</axp-widgets-container>", styles: ["ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onChanged: [{
                 type: Output
             }] } });
@@ -1405,7 +1405,6 @@ class AXPWidgetDesignerRendererDirective {
         this.subs[3] = this.service.onRefresh
             .pipe(debounceTime(200), filter((c) => this.isCurrentWidget(c.widget)))
             .subscribe((c) => {
-            console.log('refresh: ' + c.widget.name);
             this.instance?.setChildren(this.node().children ?? []);
         });
         //
@@ -1457,7 +1456,7 @@ class AXPWidgetDesignerRendererDirective {
         this.instance.index = this.index();
         this.instance.mode = this.mode();
         //
-        this.instance.onReady.pipe(first()).subscribe(() => {
+        this.instance.onStatusChanged.pipe(filter(c => c == AXPWidgetStatus.Rendered), first()).subscribe(() => {
             const host = this.hostElement();
             set(host, '__meta__.renderer', this);
             set(host, '__meta__.instance', this.instance);
@@ -1765,7 +1764,7 @@ class AXPDesignerBoardComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
@@ -2177,6 +2176,7 @@ class AXPLayoutDesignerPreviewViewerComponent {
         });
     }
     handleContextChanged(e) {
+        this.context = e.data;
         this.channel.postMessage({
             action: 'designer-preview-context',
             context: this.context,
@@ -2187,17 +2187,17 @@ class AXPLayoutDesignerPreviewViewerComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", ngImport: i0, template: `
-    <axp-widgets-container [(context)]="context" (onChanged)="handleContextChanged($event)">
+    <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
       <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
     </axp-widgets-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-layout-builder-viewer',
                     template: `
-    <axp-widgets-container [(context)]="context" (onChanged)="handleContextChanged($event)">
+    <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
       <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
     </axp-widgets-container>
   `,
@@ -2321,7 +2321,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         this.clipboard.copy('Json Data', JSON.stringify(this.context()));
     }
     async handleCollapsedChange(value) {
-        await this.settings.set(this.jsonSettingsKey, !value);
+        await this.settings.scope(AXPSettingScope.User).set(this.jsonSettingsKey, !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-surface ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-xs ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"jsonViewCollapsed()\"\n    (collapsedChange)=\"handleCollapsedChange($event)\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-surface ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-xs ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "closeOthers", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }