@acorex/platform 18.0.12 → 18.0.13

package/esm2022/layout/designer/lib/designer/designer.component.mjs

@@ -7,7 +7,7 @@ import { AXMenuModule } from '@acorex/components/menu';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, ViewEncapsulation } from '@angular/core';
+import { Component, computed, HostListener, inject, ViewChild, ViewEncapsulation } from '@angular/core';
 import { get } from 'lodash-es';
 import { AXPDesignerBoardComponent } from '../board/board.component';
 import { AXPDesignerBreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component';
@@ -16,6 +16,7 @@ import { AXPDesignerHeaderMenuComponent } from '../header-menu/header-menu.compo
 import { AXPDesignerOutlineComponent } from '../outline/outline.component';
 import { AXPWidgetPropertyViewerComponent } from '../property-viewer/widget-property-viewer.component';
 import { AXPDesignerHistoryComponent } from '../history/history.component';
+import { AXPDesignerPagesComponent } from '../pages/pages.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@acorex/components/button";
@@ -27,9 +28,50 @@ export class AXPLayoutDesignerComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
         this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null);
+        this.service.onUpdate.subscribe((e) => {
+            this.propertyViewer.update(e.values);
+        });
+    }
+    handleKeyboardEvent(event) {
+        if (event.ctrlKey) {
+            switch (event.key.toLowerCase()) { // Convert the key to lowercase to ensure case insensitivity
+                case 'z':
+                    event.preventDefault(); // Prevent the browser's default undo action
+                    this.service.undo();
+                    break;
+                case 'y':
+                    event.preventDefault(); // Prevent the browser's default redo action
+                    this.service.redo();
+                    break;
+                case 'c':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault(); // Prevent the browser's default copy action
+                        this.service.copy();
+                    }
+                    break;
+                case 'd':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault(); // Prevent the browser's default copy action
+                        this.service.clone();
+                    }
+                    break;
+                case 'x':
+                    if (this.service.canCutCopy()) {
+                        event.preventDefault(); // Prevent the browser's default cut action
+                        this.service.cut();
+                    }
+                    break;
+                case 'v':
+                    if (this.service.canPaste()) {
+                        event.preventDefault(); // Prevent the browser's default paste action
+                        this.service.paste();
+                    }
+                    break;
+            }
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", providers: [AXPDesignerService], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-plus ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-b  ax-flex ax-flex-grow ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <div class=\"ax-h-full \">\n        <ax-drawer-container class=\"ax-w-full ax-h-full\">\n          <ax-drawer #bd location=\"start\" mode=\"push\">\n            <ax-content>\n              <div class=\"ax-min-w-80 ax-h-full ax-overflow-auto ax-border-e\"></div>\n            </ax-content>\n          </ax-drawer>\n          <!-- Outline Pnael -->\n          <ax-drawer #outline location=\"start\" mode=\"push\">\n            <ax-content>\n              <axp-designer-outline></axp-designer-outline>\n            </ax-content>\n          </ax-drawer>\n          <!-- History Pnael -->\n          <ax-drawer #history location=\"start\" mode=\"push\">\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\">\n            <axp-designer-board class=\"ax-h-full ax-bg-on-surface ax-flex ax-justify-center\"> </axp-designer-board>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{position:relative;display:block;cursor:pointer;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1);position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1)}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;height:100%;width:100%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], 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: "ngmodule", type: AXTabsModule }, { 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: "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"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.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: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "selectionChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button color=\"ghost\" look=\"twotone\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-b  ax-flex ax-flex-grow ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <div class=\"ax-h-full \">\n        <ax-drawer-container class=\"ax-w-full ax-h-full\">\n          <!-- Pages -->\n          <ax-drawer #pages location=\"start\" mode=\"push\">\n            <ax-content>\n              <axp-designer-pages></axp-designer-pages>\n            </ax-content>\n          </ax-drawer>\n          <!-- Datasources -->\n          <ax-drawer #datasources location=\"start\" mode=\"push\">\n            <ax-content>\n              Datasources\n            </ax-content>\n          </ax-drawer>\n          <!-- Outline Pnael -->\n          <ax-drawer #outline location=\"start\" mode=\"push\">\n            <ax-content>\n              <axp-designer-outline></axp-designer-outline>\n            </ax-content>\n          </ax-drawer>\n          <!-- History Pnael -->\n          <ax-drawer #history location=\"start\" mode=\"push\">\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\">\n            <axp-designer-board class=\"ax-h-full ax-bg-on-surface ax-flex ax-justify-center\"> </axp-designer-board>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{position:relative;display:block;cursor:pointer;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;height:100%;width:100%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-400),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-400),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-400),50%) 0,rgba(var(--ax-color-primary-400),50%) 60%,transparent 0,transparent);background-size:6px 6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], 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: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed", "closeOthers"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.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: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "selectionChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -42,6 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPDesignerOutlineComponent,
                         AXPDesignerHeaderMenuComponent,
                         AXPDesignerHistoryComponent,
+                        AXPDesignerPagesComponent,
                         AXTabsModule,
                         AXButtonModule,
                         AXDrawerModule,
@@ -49,6 +92,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXMenuModule,
                         AXButtonGroupModule,
                         AXDropdownModule,
-                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-plus ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-b  ax-flex ax-flex-grow ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <div class=\"ax-h-full \">\n        <ax-drawer-container class=\"ax-w-full ax-h-full\">\n          <ax-drawer #bd location=\"start\" mode=\"push\">\n            <ax-content>\n              <div class=\"ax-min-w-80 ax-h-full ax-overflow-auto ax-border-e\"></div>\n            </ax-content>\n          </ax-drawer>\n          <!-- Outline Pnael -->\n          <ax-drawer #outline location=\"start\" mode=\"push\">\n            <ax-content>\n              <axp-designer-outline></axp-designer-outline>\n            </ax-content>\n          </ax-drawer>\n          <!-- History Pnael -->\n          <ax-drawer #history location=\"start\" mode=\"push\">\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\">\n            <axp-designer-board class=\"ax-h-full ax-bg-on-surface ax-flex ax-justify-center\"> </axp-designer-board>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{position:relative;display:block;cursor:pointer;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1);position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500),1)}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;height:100%;width:100%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}\n"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS9sYXlvdXQvZGVzaWduZXIvc3JjL2xpYi9kZXNpZ25lci9kZXNpZ25lci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BsYXRmb3JtL2xheW91dC9kZXNpZ25lci9zcmMvbGliL2Rlc2lnbmVyL2Rlc2lnbmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsc0JBQXNCLEVBQW1CLE1BQU0saUNBQWlDLENBQUM7QUFDMUYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFlLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RixPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3JFLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3pELE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3RGLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzNFLE9BQU8sRUFBRSxnQ0FBZ0MsRUFBRSxNQUFNLHFEQUFxRCxDQUFDO0FBQ3ZHLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7Ozs7OztBQTJCM0UsTUFBTSxPQUFPLDBCQUEwQjtJQXpCdkM7UUEyQlksWUFBTyxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBRXJDLGVBQVUsR0FBRyxRQUFRLENBQXlCLEdBQUcsRUFBRSxDQUMzRCxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsQ0FBRSxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLEVBQUUsRUFBRSxpQkFBaUIsQ0FBNEIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUNySCxDQUFDO0tBRUg7OEdBUlksMEJBQTBCO2tHQUExQiwwQkFBMEIsa0VBRjFCLENBQUMsa0JBQWtCLENBQUMsMEJDMUNqQyxrdExBbUhzQixxK0JEekZsQixZQUFZLDRIQUNaLHNCQUFzQiwrQkFDdEIseUJBQXlCLCtEQUN6QixnQ0FBZ0MsbUhBQ2hDLCtCQUErQixxRUFDL0IsMkJBQTJCLGlFQUMzQiw4QkFBOEIscUVBQzlCLDJCQUEyQixnRUFDM0IsWUFBWSw4QkFDWixjQUFjLDh2QkFDZCxjQUFjLDhUQUNkLGlCQUFpQix1VkFDakIsWUFBWSw4QkFDWixtQkFBbUIseVFBQ25CLGdCQUFnQjs7MkZBSVAsMEJBQTBCO2tCQXpCdEMsU0FBUzsrQkFDRSxxQkFBcUIsaUJBR2hCLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osc0JBQXNCO3dCQUN0Qix5QkFBeUI7d0JBQ3pCLGdDQUFnQzt3QkFDaEMsK0JBQStCO3dCQUMvQiwyQkFBMkI7d0JBQzNCLDhCQUE4Qjt3QkFDOUIsMkJBQTJCO3dCQUMzQixZQUFZO3dCQUNaLGNBQWM7d0JBQ2QsY0FBYzt3QkFDZCxpQkFBaUI7d0JBQ2pCLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixnQkFBZ0I7cUJBQ2pCLGFBQ1UsQ0FBQyxrQkFBa0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQgeyBBWEJ1dHRvbkdyb3VwTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbi1ncm91cCc7XG5pbXBvcnQgeyBBWERlY29yYXRvck1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9kZWNvcmF0b3JzJztcbmltcG9ydCB7IEFYRHJhd2VyTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2RyYXdlcic7XG5pbXBvcnQgeyBBWERyb3Bkb3duTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2Ryb3Bkb3duJztcbmltcG9ydCB7IEFYTWVudU1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9tZW51JztcbmltcG9ydCB7IEFYVGFic01vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy90YWJzJztcbmltcG9ydCB7IEFYUExheW91dEJ1aWxkZXJNb2R1bGUsIEFYUFdpZGdldENvbmZpZyB9IGZyb20gJ0BhY29yZXgvcGxhdGZvcm0vbGF5b3V0L2J1aWxkZXInO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIEhvc3RCaW5kaW5nLCBpbmplY3QsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBnZXQgfSBmcm9tICdsb2Rhc2gtZXMnO1xuaW1wb3J0IHsgQVhQRGVzaWduZXJCb2FyZENvbXBvbmVudCB9IGZyb20gJy4uL2JvYXJkL2JvYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWFBEZXNpZ25lckJyZWFkY3J1bWJzQ29tcG9uZW50IH0gZnJvbSAnLi4vYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuY29tcG9uZW50JztcbmltcG9ydCB7IEFYUERlc2lnbmVyU2VydmljZSB9IGZyb20gJy4uL2Rlc2lnbmVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgQVhQRGVzaWduZXJIZWFkZXJNZW51Q29tcG9uZW50IH0gZnJvbSAnLi4vaGVhZGVyLW1lbnUvaGVhZGVyLW1lbnUuY29tcG9uZW50JztcbmltcG9ydCB7IEFYUERlc2lnbmVyT3V0bGluZUNvbXBvbmVudCB9IGZyb20gJy4uL291dGxpbmUvb3V0bGluZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhQV2lkZ2V0UHJvcGVydHlWaWV3ZXJDb21wb25lbnQgfSBmcm9tICcuLi9wcm9wZXJ0eS12aWV3ZXIvd2lkZ2V0LXByb3BlcnR5LXZpZXdlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhQRGVzaWduZXJIaXN0b3J5Q29tcG9uZW50IH0gZnJvbSAnLi4vaGlzdG9yeS9oaXN0b3J5LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4cC1sYXlvdXQtZGVzaWduZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVzaWduZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZXNpZ25lci5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEFYUExheW91dEJ1aWxkZXJNb2R1bGUsXG4gICAgQVhQRGVzaWduZXJCb2FyZENvbXBvbmVudCxcbiAgICBBWFBXaWRnZXRQcm9wZXJ0eVZpZXdlckNvbXBvbmVudCxcbiAgICBBWFBEZXNpZ25lckJyZWFkY3J1bWJzQ29tcG9uZW50LFxuICAgIEFYUERlc2lnbmVyT3V0bGluZUNvbXBvbmVudCxcbiAgICBBWFBEZXNpZ25lckhlYWRlck1lbnVDb21wb25lbnQsXG4gICAgQVhQRGVzaWduZXJIaXN0b3J5Q29tcG9uZW50LFxuICAgIEFYVGFic01vZHVsZSxcbiAgICBBWEJ1dHRvbk1vZHVsZSxcbiAgICBBWERyYXdlck1vZHVsZSxcbiAgICBBWERlY29yYXRvck1vZHVsZSxcbiAgICBBWE1lbnVNb2R1bGUsXG4gICAgQVhCdXR0b25Hcm91cE1vZHVsZSxcbiAgICBBWERyb3Bkb3duTW9kdWxlLFxuICBdLFxuICBwcm92aWRlcnM6IFtBWFBEZXNpZ25lclNlcnZpY2VdLFxufSlcbmV4cG9ydCBjbGFzcyBBWFBMYXlvdXREZXNpZ25lckNvbXBvbmVudCB7XG5cbiAgcHJvdGVjdGVkIHNlcnZpY2UgPSBpbmplY3QoQVhQRGVzaWduZXJTZXJ2aWNlKTtcblxuICBwcm90ZWN0ZWQgbm9kZUNvbmZpZyA9IGNvbXB1dGVkPEFYUFdpZGdldENvbmZpZyB8IG51bGw+KCgpID0+XG4gICAgdGhpcy5zZXJ2aWNlLnNlbGVjdGVkTm9kZSgpID8gKGdldCh0aGlzLnNlcnZpY2Uuc2VsZWN0ZWROb2RlKCksICdfX21ldGFfXy5jb25maWcnKSBhcyBhbnkgYXMgQVhQV2lkZ2V0Q29uZmlnKSA6IG51bGxcbiAgKTtcblxufVxuIiwiPGF4LWRyYXdlci1jb250YWluZXIgY2xhc3M9XCJheC1oLWZ1bGwgYXgtdy1mdWxsIGF4LWZsZXggYXgtcmVsYXRpdmUgY2hpbGQ6YXgtaC1mdWxsIGF4LW92ZXJmbG93LWhpZGRlbiBheC1kYXJrXCI+XG4gIDxheC1jb250ZW50IGNsYXNzPVwiYXgtY29udGVudHNcIj5cbiAgICA8IS0tIFRvb2xiYXIgU2lkZSAtLT5cbiAgICA8ZGl2IGNsYXNzPVwiYXgtbWluLXctMTAgYXgtYmctc3VyZmFjZSBheC1ib3JkZXItZSBheC14cyBheC1mbGV4IGF4LWZsZXgtY29sIGF4LWl0ZW1zLWNlbnRlciBcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJheC1taW4tdy0xMCBheC1oLTEwIGF4LWZsZXggYXgtaXRlbXMtY2VudGVyIGF4LWp1c3RpZnktY2VudGVyIGF4LWJvcmRlci1iXCI+XG4gICAgICAgIDxpbWcgc3JjPVwiYXNzZXRzL2xvZ29zL2xvZ28ucG5nXCIgY2xhc3M9XCJheC13LTZcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiYXgtcHktMVwiPjwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImF4LWZsZXggYXgtZmxleC1jb2wgYXgtZ2FwLTJcIj5cbiAgICAgICAgPGF4LWJ1dHRvbiBjb2xvcj1cImdob3N0XCIgbG9vaz1cInR3b3RvbmVcIj5cbiAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLXNvbGlkIGZhLXB1enpsZSBheC10ZXh0LXNtXCI+IDwvYXgtaWNvbj5cbiAgICAgICAgPC9heC1idXR0b24+XG4gICAgICAgIDxheC1idXR0b24gY29sb3I9XCJnaG9zdFwiIGxvb2s9XCJ0d290b25lXCI+XG4gICAgICAgICAgPGF4LWljb24gY2xhc3M9XCJmYS1zb2xpZCBmYS1wbHVzIGF4LXRleHQtc21cIj4gPC9heC1pY29uPlxuICAgICAgICA8L2F4LWJ1dHRvbj5cbiAgICAgICAgPGF4LWJ1dHRvbiBjb2xvcj1cImdob3N0XCIgbG9vaz1cInR3b3RvbmVcIj5cbiAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLXNvbGlkIGZhLWRhdGFiYXNlIGF4LXRleHQtc21cIj4gPC9heC1pY29uPlxuICAgICAgICA8L2F4LWJ1dHRvbj5cbiAgICAgICAgPGF4LWJ1dHRvbiBjb2xvcj1cImdob3N0XCIgbG9vaz1cInR3b3RvbmVcIiAob25DbGljayk9XCJvdXRsaW5lLnRvZ2dsZSgpXCIgdGl0bGU9XCJPdXRsaW5lXCI+XG4gICAgICAgICAgPGF4LWljb24gY2xhc3M9XCJmYS1zb2xpZCBmYS1saXN0LXRyZWUgYXgtdGV4dC1zbVwiPiA8L2F4LWljb24+XG4gICAgICAgIDwvYXgtYnV0dG9uPlxuICAgICAgICA8YXgtYnV0dG9uIGNvbG9yPVwiZ2hvc3RcIiBsb29rPVwidHdvdG9uZVwiIChvbkNsaWNrKT1cImhpc3RvcnkudG9nZ2xlKClcIiB0aXRsZT1cIkhpc3RvcnlcIj5cbiAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLXNvbGlkIGZhLWNsb2NrLXJvdGF0ZS1sZWZ0IGF4LXRleHQtc21cIj4gPC9heC1pY29uPlxuICAgICAgICA8L2F4LWJ1dHRvbj5cbiAgICAgICAgPGF4LWJ1dHRvbiBjb2xvcj1cImdob3N0XCIgbG9vaz1cInR3b3RvbmVcIiB0aXRsZT1cIlRpbWVsaW5lXCI+XG4gICAgICAgICAgPGF4LWljb24gY2xhc3M9XCJmYS1zb2xpZCBmYS1kaWFncmFtLXNhbmtleSBheC10ZXh0LXNtXCI+IDwvYXgtaWNvbj5cbiAgICAgICAgPC9heC1idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8IS0tIE1haW4gU2lkZSAtLT5cbiAgICA8ZGl2IGNsYXNzPVwiYXgtY29sLXNwYW4tMTAgYXgtZmxleCBheC1mbGV4LWNvbCBheC1mbGV4LTFcIj5cbiAgICAgIDwhLS0gSGVhZGVyIFRvb2xiYXIgLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwiYXgtbWluLWgtMTAgYXgtYmctc3VyZmFjZSBheC1ib3JkZXItYiAgYXgtZmxleCBheC1mbGV4LWdyb3cgYXgtanVzdGlmeS1iZXR3ZWVuIGF4LXB4LTJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImF4LWZsZXggYXgtaXRlbXMtY2VudGVyIGF4LWp1c3RpZnktY2VudGVyIGF4LXRleHQtd2hpdGVcIj5cbiAgICAgICAgICA8YXhwLWRlc2lnbmVyLWhlYWRlci1tZW51PjwvYXhwLWRlc2lnbmVyLWhlYWRlci1tZW51PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImF4LWZsZXggYXgtZmxleC1yb3cgYXgtZ2FwLTIgYXgteHMgYXgtaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgPGF4LWJ1dHRvbi1ncm91cCBjb2xvcj1cImdob3N0XCIgbG9vaz1cInR3b3RvbmVcIiBbc2VsZWN0aW9uXT1cIidzaW5nbGUnXCI+XG4gICAgICAgICAgICA8YXgtYnV0dG9uLWl0ZW0gW3NlbGVjdGVkXT1cInNlcnZpY2Uuc2l6ZSgpID09ICd4bCdcIiBbZGF0YV09XCIneGwnXCIgKG9uQ2xpY2spPVwic2VydmljZS5zaXplLnNldCgneGwnKVwiPlxuICAgICAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLWxpZ2h0IGZhLWRlc2t0b3BcIj48L2F4LWljb24+XG4gICAgICAgICAgICA8L2F4LWJ1dHRvbi1pdGVtPlxuICAgICAgICAgICAgPGF4LWJ1dHRvbi1pdGVtIFtzZWxlY3RlZF09XCJzZXJ2aWNlLnNpemUoKSA9PSAnbGcnXCIgW2RhdGFdPVwiJ2xnJ1wiIChvbkNsaWNrKT1cInNlcnZpY2Uuc2l6ZS5zZXQoJ2xnJylcIj5cbiAgICAgICAgICAgICAgPGF4LWljb24gY2xhc3M9XCJmYS1saWdodCBmYS10YWJsZXRcIj48L2F4LWljb24+XG4gICAgICAgICAgICA8L2F4LWJ1dHRvbi1pdGVtPlxuICAgICAgICAgICAgPGF4LWJ1dHRvbi1pdGVtIFtzZWxlY3RlZF09XCJzZXJ2aWNlLnNpemUoKSA9PSAnc20nXCIgW2RhdGFdPVwiJ3NtJ1wiIChvbkNsaWNrKT1cInNlcnZpY2Uuc2l6ZS5zZXQoJ3NtJylcIj5cbiAgICAgICAgICAgICAgPGF4LWljb24gY2xhc3M9XCJmYS1saWdodCBmYS1tb2JpbGVcIj48L2F4LWljb24+XG4gICAgICAgICAgICA8L2F4LWJ1dHRvbi1pdGVtPlxuICAgICAgICAgIDwvYXgtYnV0dG9uLWdyb3VwPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImF4LWZsZXggYXgtZmxleC1yb3cgYXgtZ2FwLTIgYXgteHMgYXgtaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgPGF4LWJ1dHRvbiB0ZXh0PVwiRGVzaWduXCIgbG9vaz1cIm91dGxpbmVcIiBjbGFzcz1cImF4LXhzXCI+XG4gICAgICAgICAgICA8YXgtc3VmZml4PlxuICAgICAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLWxpZ2h0IGZhLWNoZXZyb24tZG93blwiPjwvYXgtaWNvbj5cbiAgICAgICAgICAgIDwvYXgtc3VmZml4PlxuICAgICAgICAgICAgPGF4LWRyb3Bkb3duLXBhbmVsPlxuICAgICAgICAgICAgICA8YXgtYnV0dG9uLWl0ZW0tbGlzdD5cbiAgICAgICAgICAgICAgICA8YXgtYnV0dG9uLWl0ZW0gdGV4dD1cIlByaW50XCIgbmFtZT1cInByaW50XCI+IDwvYXgtYnV0dG9uLWl0ZW0+XG4gICAgICAgICAgICAgICAgPGF4LWJ1dHRvbi1pdGVtIHRleHQ9XCJWaWV3XCIgbmFtZT1cInZpZXdcIj4gPC9heC1idXR0b24taXRlbT5cbiAgICAgICAgICAgICAgPC9heC1idXR0b24taXRlbS1saXN0PlxuICAgICAgICAgICAgPC9heC1kcm9wZG93bi1wYW5lbD5cbiAgICAgICAgICA8L2F4LWJ1dHRvbj5cbiAgICAgICAgICA8YXgtYnV0dG9uIGNvbG9yPVwic3VjY2Vzc1wiIGxvb2s9XCJvdXRsaW5lXCIgdGV4dD1cIlByZXZpZXdcIiBjbGFzcz1cImF4LXhzXCI+XG4gICAgICAgICAgICA8YXgtc3VmZml4PlxuICAgICAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLXNvbGlkIGZhLXBsYXlcIj48L2F4LWljb24+XG4gICAgICAgICAgICA8L2F4LXN1ZmZpeD5cbiAgICAgICAgICA8L2F4LWJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDwhLS0gQm9hcmQgLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwiYXgtaC1mdWxsIFwiPlxuICAgICAgICA8YXgtZHJhd2VyLWNvbnRhaW5lciBjbGFzcz1cImF4LXctZnVsbCBheC1oLWZ1bGxcIj5cbiAgICAgICAgICA8YXgtZHJhd2VyICNiZCBsb2NhdGlvbj1cInN0YXJ0XCIgbW9kZT1cInB1c2hcIj5cbiAgICAgICAgICAgIDxheC1jb250ZW50PlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYXgtbWluLXctODAgYXgtaC1mdWxsIGF4LW92ZXJmbG93LWF1dG8gYXgtYm9yZGVyLWVcIj48L2Rpdj5cbiAgICAgICAgICAgIDwvYXgtY29udGVudD5cbiAgICAgICAgICA8L2F4LWRyYXdlcj5cbiAgICAgICAgICA8IS0tIE91dGxpbmUgUG5hZWwgLS0+XG4gICAgICAgICAgPGF4LWRyYXdlciAjb3V0bGluZSBsb2NhdGlvbj1cInN0YXJ0XCIgbW9kZT1cInB1c2hcIj5cbiAgICAgICAgICAgIDxheC1jb250ZW50PlxuICAgICAgICAgICAgICA8YXhwLWRlc2lnbmVyLW91dGxpbmU+PC9heHAtZGVzaWduZXItb3V0bGluZT5cbiAgICAgICAgICAgIDwvYXgtY29udGVudD5cbiAgICAgICAgICA8L2F4LWRyYXdlcj5cbiAgICAgICAgICA8IS0tIEhpc3RvcnkgUG5hZWwgLS0+XG4gICAgICAgICAgPGF4LWRyYXdlciAjaGlzdG9yeSBsb2NhdGlvbj1cInN0YXJ0XCIgbW9kZT1cInB1c2hcIj5cbiAgICAgICAgICAgIDxheC1jb250ZW50PlxuICAgICAgICAgICAgICA8YXhwLWRlc2lnbmVyLWhpc3Rvcnk+PC9heHAtZGVzaWduZXItaGlzdG9yeT5cbiAgICAgICAgICAgIDwvYXgtY29udGVudD5cbiAgICAgICAgICA8L2F4LWRyYXdlcj5cbiAgICAgICAgICA8IS0tIENvbnRlbnQgb2YgYm9hcmQgLS0+XG4gICAgICAgICAgPGF4LWNvbnRlbnQgY2xhc3M9XCJheC1saWdodFwiPlxuICAgICAgICAgICAgPGF4cC1kZXNpZ25lci1ib2FyZCBjbGFzcz1cImF4LWgtZnVsbCBheC1iZy1vbi1zdXJmYWNlIGF4LWZsZXggYXgtanVzdGlmeS1jZW50ZXJcIj4gPC9heHAtZGVzaWduZXItYm9hcmQ+XG4gICAgICAgICAgPC9heC1jb250ZW50PlxuICAgICAgICA8L2F4LWRyYXdlci1jb250YWluZXI+XG4gICAgICA8L2Rpdj5cbiAgICAgIDwhLS0gRm9vdGVyIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cImF4LW1pbi1oLTEwIGF4LWJnLXN1cmZhY2UgYXgtYm9yZGVyLXQgIGF4LWZsZXggYXgtaXRlbXMtY2VudGVyXCI+XG4gICAgICAgIDxheHAtZGVzaWduZXItYnJlYWRjcnVtYnMgY2xhc3M9XCJheC1ib3JkZXItZGVmYXVsdCBheC1ib3JkZXItdCBheC1wLTIgYXgtZm9udC1ub3JtYWxcIj5cbiAgICAgICAgPC9heHAtZGVzaWduZXItYnJlYWRjcnVtYnM+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9heC1jb250ZW50PlxuICA8IS0tIFByb3BlcnR5IFNpZGUgLS0+XG4gIDxheC1kcmF3ZXIgY2xhc3M9XCJheC13LTgwIGF4LWJvcmRlci1zXCIgbG9jYXRpb249XCJlbmRcIiBtb2RlPVwicHVzaFwiIFtjb2xsYXBzZWRdPVwiZmFsc2VcIiAjcGQ+XG4gICAgPGF4LWNvbnRlbnQ+XG4gICAgICA8ZGl2IGNsYXNzPVwiYXgtZmxleCBheC1mbGV4LXJvdyBheC13LWZ1bGwgYXgtanVzdGlmeS1iZXR3ZWVuIGF4LXRleHQtd2hpdGUgYXgtcHktMiBheC1weC00IGF4LWJvcmRlci1iXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJheC1mbGV4IGF4LWZsZXgtcm93IGF4LWdhcC0yIGF4LWl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgIDxpIFtuZ0NsYXNzXT1cIm5vZGVDb25maWcoKT8uaWNvblwiPjwvaT5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImF4LWZvbnQtc2VtaWJvbGRcIj57eyBub2RlQ29uZmlnKCk/LnRpdGxlIH19PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGF4cC13aWRnZXQtcHJvcGVydHktdmlld2VyIFt3aWRnZXRdPVwic2VydmljZS5zZWxlY3RlZE5vZGUoKSFcIlxuICAgICAgICAob25DaGFuZ2VkKT1cInNlcnZpY2UudXBkYXRlKHsgdmFsdWVzOiAkZXZlbnQudmFsdWVzLCBtb2RlOiAkZXZlbnQubW9kZSB9KVwiIGNsYXNzPVwiYXgtdy0xLzRcIj5cbiAgICAgIDwvYXhwLXdpZGdldC1wcm9wZXJ0eS12aWV3ZXI+XG4gICAgPC9heC1jb250ZW50PlxuICA8L2F4LWRyYXdlcj5cbjwvYXgtZHJhd2VyLWNvbnRhaW5lcj4iXX0=
+                    ], providers: [AXPDesignerService], template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative child:ax-h-full ax-overflow-hidden ax-dark\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-surface ax-border-e ax-xs ax-flex ax-flex-col ax-items-center \">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/logos/logo.png\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button color=\"ghost\" look=\"twotone\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button color=\"ghost\" look=\"twotone\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button color=\"ghost\" look=\"twotone\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-b  ax-flex ax-flex-grow ax-justify-between ax-px-2\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-text-white\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button-group color=\"ghost\" look=\"twotone\" [selection]=\"'single'\">\n            <ax-button-item [selected]=\"service.size() == 'xl'\" [data]=\"'xl'\" (onClick)=\"service.size.set('xl')\">\n              <ax-icon class=\"fa-light fa-desktop\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'lg'\" [data]=\"'lg'\" (onClick)=\"service.size.set('lg')\">\n              <ax-icon class=\"fa-light fa-tablet\"></ax-icon>\n            </ax-button-item>\n            <ax-button-item [selected]=\"service.size() == 'sm'\" [data]=\"'sm'\" (onClick)=\"service.size.set('sm')\">\n              <ax-icon class=\"fa-light fa-mobile\"></ax-icon>\n            </ax-button-item>\n          </ax-button-group>\n        </div>\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-xs ax-items-center\">\n          <ax-button text=\"Design\" look=\"outline\" class=\"ax-xs\">\n            <ax-suffix>\n              <ax-icon class=\"fa-light fa-chevron-down\"></ax-icon>\n            </ax-suffix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item text=\"Print\" name=\"print\"> </ax-button-item>\n                <ax-button-item text=\"View\" name=\"view\"> </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n          <ax-button color=\"success\" look=\"outline\" text=\"Preview\" class=\"ax-xs\" (onClick)=\"service.openPreview()\">\n            <ax-suffix>\n              <ax-icon class=\"fa-solid fa-play\"></ax-icon>\n            </ax-suffix>\n          </ax-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <div class=\"ax-h-full \">\n        <ax-drawer-container class=\"ax-w-full ax-h-full\">\n          <!-- Pages -->\n          <ax-drawer #pages location=\"start\" mode=\"push\">\n            <ax-content>\n              <axp-designer-pages></axp-designer-pages>\n            </ax-content>\n          </ax-drawer>\n          <!-- Datasources -->\n          <ax-drawer #datasources location=\"start\" mode=\"push\">\n            <ax-content>\n              Datasources\n            </ax-content>\n          </ax-drawer>\n          <!-- Outline Pnael -->\n          <ax-drawer #outline location=\"start\" mode=\"push\">\n            <ax-content>\n              <axp-designer-outline></axp-designer-outline>\n            </ax-content>\n          </ax-drawer>\n          <!-- History Pnael -->\n          <ax-drawer #history location=\"start\" mode=\"push\">\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\">\n            <axp-designer-board class=\"ax-h-full ax-bg-on-surface ax-flex ax-justify-center\"> </axp-designer-board>\n          </ax-content>\n        </ax-drawer-container>\n      </div>\n      <!-- Footer -->\n      <div class=\"ax-min-h-10 ax-bg-surface ax-border-t  ax-flex ax-items-center\">\n        <axp-designer-breadcrumbs class=\"ax-border-default ax-border-t ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-w-80 ax-border-s\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content>\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-py-2 ax-px-4 ax-border-b\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-w-1/4\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: [".axp-designer-board{display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.75rem}.axp-designer-board.axp-state-design .axp-widget-host{position:relative;display:block;cursor:pointer;padding:.25rem}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6;position:relative}.axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:1px;outline-offset:1px;outline-color:#8b5cf6}.axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;height:100%;width:100%;background:rgba(202,123,123,.39)}@keyframes moveLight{0%{background-position:0% 50%}to{background-position:100% 50%}}.axp-designer-board .axp-empty-space{background-color:rgba(var(--ax-color-primary-400),10%);background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-400),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-400),50%) 0,rgba(var(--ax-color-primary-400),50%) 60%,transparent 0,transparent);background-size:6px 6px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { propertyViewer: [{
+                type: ViewChild,
+                args: [AXPWidgetPropertyViewerComponent, { static: true }]
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS9sYXlvdXQvZGVzaWduZXIvc3JjL2xpYi9kZXNpZ25lci9kZXNpZ25lci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BsYXRmb3JtL2xheW91dC9kZXNpZ25lci9zcmMvbGliL2Rlc2lnbmVyL2Rlc2lnbmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsc0JBQXNCLEVBQW1CLE1BQU0saUNBQWlDLENBQUM7QUFDMUYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFlLFlBQVksRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JILE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDaEMsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDckUsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDekQsT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdEYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDM0UsT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0scURBQXFELENBQUM7QUFDdkcsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDM0UsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7O0FBNEJyRSxNQUFNLE9BQU8sMEJBQTBCO0lBWXJDO1FBVlUsWUFBTyxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBS3JDLGVBQVUsR0FBRyxRQUFRLENBQXlCLEdBQUcsRUFBRSxDQUMzRCxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsQ0FBRSxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLEVBQUUsRUFBRSxpQkFBaUIsQ0FBNEIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUNySCxDQUFDO1FBSUEsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDcEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3ZDLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUdPLG1CQUFtQixDQUFDLEtBQW9CO1FBQzlDLElBQUksS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2xCLFFBQVEsS0FBSyxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsRUFBRSxDQUFDLENBQUMsNERBQTREO2dCQUM3RixLQUFLLEdBQUc7b0JBQ04sS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDLENBQUUsNENBQTRDO29CQUNyRSxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO29CQUNwQixNQUFNO2dCQUNSLEtBQUssR0FBRztvQkFDTixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBRSw0Q0FBNEM7b0JBQ3JFLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7b0JBQ3BCLE1BQU07Z0JBQ1IsS0FBSyxHQUFHO29CQUNOLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsRUFBRSxDQUFDO3dCQUM5QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBRSw0Q0FBNEM7d0JBQ3JFLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7b0JBQ3RCLENBQUM7b0JBQ0QsTUFBTTtnQkFDUixLQUFLLEdBQUc7b0JBQ04sSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUM7d0JBQzlCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFFLDRDQUE0Qzt3QkFDckUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztvQkFDdkIsQ0FBQztvQkFDRCxNQUFNO2dCQUNSLEtBQUssR0FBRztvQkFDTixJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxFQUFFLEVBQUUsQ0FBQzt3QkFDOUIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDLENBQUUsMkNBQTJDO3dCQUNwRSxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxDQUFDO29CQUNyQixDQUFDO29CQUNELE1BQU07Z0JBQ1IsS0FBSyxHQUFHO29CQUNOLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO3dCQUM1QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBRSw2Q0FBNkM7d0JBQ3RFLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUM7b0JBQ3ZCLENBQUM7b0JBQ0QsTUFBTTtZQUNWLENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzs4R0F4RFUsMEJBQTBCO2tHQUExQiwwQkFBMEIsOElBRjFCLENBQUMsa0JBQWtCLENBQUMsMEVBTXBCLGdDQUFnQyw4RENsRDdDLDBqTUEwSHNCLDh2Q0QvRmxCLFlBQVksNEhBQ1osc0JBQXNCLCtCQUN0Qix5QkFBeUIsK0RBQ3pCLGdDQUFnQyxtSEFDaEMsK0JBQStCLHFFQUMvQiwyQkFBMkIsaUVBQzNCLDhCQUE4QixxRUFDOUIsMkJBQTJCLGlFQUMzQix5QkFBeUIsOERBQ3pCLFlBQVksOEJBQ1osY0FBYyw4dkJBQ2QsY0FBYyw2VUFDZCxpQkFBaUIsdVZBQ2pCLFlBQVksOEJBQ1osbUJBQW1CLHlRQUNuQixnQkFBZ0I7OzJGQUlQLDBCQUEwQjtrQkExQnRDLFNBQVM7K0JBQ0UscUJBQXFCLGlCQUdoQixpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLHNCQUFzQjt3QkFDdEIseUJBQXlCO3dCQUN6QixnQ0FBZ0M7d0JBQ2hDLCtCQUErQjt3QkFDL0IsMkJBQTJCO3dCQUMzQiw4QkFBOEI7d0JBQzlCLDJCQUEyQjt3QkFDM0IseUJBQXlCO3dCQUN6QixZQUFZO3dCQUNaLGNBQWM7d0JBQ2QsY0FBYzt3QkFDZCxpQkFBaUI7d0JBQ2pCLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixnQkFBZ0I7cUJBQ2pCLGFBQ1UsQ0FBQyxrQkFBa0IsQ0FBQzt3REFPdkIsY0FBYztzQkFEckIsU0FBUzt1QkFBQyxnQ0FBZ0MsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBZXJELG1CQUFtQjtzQkFEMUIsWUFBWTt1QkFBQyxrQkFBa0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQgeyBBWEJ1dHRvbkdyb3VwTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbi1ncm91cCc7XG5pbXBvcnQgeyBBWERlY29yYXRvck1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9kZWNvcmF0b3JzJztcbmltcG9ydCB7IEFYRHJhd2VyTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2RyYXdlcic7XG5pbXBvcnQgeyBBWERyb3Bkb3duTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2Ryb3Bkb3duJztcbmltcG9ydCB7IEFYTWVudU1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9tZW51JztcbmltcG9ydCB7IEFYVGFic01vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy90YWJzJztcbmltcG9ydCB7IEFYUExheW91dEJ1aWxkZXJNb2R1bGUsIEFYUFdpZGdldENvbmZpZyB9IGZyb20gJ0BhY29yZXgvcGxhdGZvcm0vbGF5b3V0L2J1aWxkZXInO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIGluamVjdCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZ2V0IH0gZnJvbSAnbG9kYXNoLWVzJztcbmltcG9ydCB7IEFYUERlc2lnbmVyQm9hcmRDb21wb25lbnQgfSBmcm9tICcuLi9ib2FyZC9ib2FyZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhQRGVzaWduZXJCcmVhZGNydW1ic0NvbXBvbmVudCB9IGZyb20gJy4uL2JyZWFkY3J1bWJzL2JyZWFkY3J1bWJzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWFBEZXNpZ25lclNlcnZpY2UgfSBmcm9tICcuLi9kZXNpZ25lci5zZXJ2aWNlJztcbmltcG9ydCB7IEFYUERlc2lnbmVySGVhZGVyTWVudUNvbXBvbmVudCB9IGZyb20gJy4uL2hlYWRlci1tZW51L2hlYWRlci1tZW51LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWFBEZXNpZ25lck91dGxpbmVDb21wb25lbnQgfSBmcm9tICcuLi9vdXRsaW5lL291dGxpbmUuY29tcG9uZW50JztcbmltcG9ydCB7IEFYUFdpZGdldFByb3BlcnR5Vmlld2VyQ29tcG9uZW50IH0gZnJvbSAnLi4vcHJvcGVydHktdmlld2VyL3dpZGdldC1wcm9wZXJ0eS12aWV3ZXIuY29tcG9uZW50JztcbmltcG9ydCB7IEFYUERlc2lnbmVySGlzdG9yeUNvbXBvbmVudCB9IGZyb20gJy4uL2hpc3RvcnkvaGlzdG9yeS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhQRGVzaWduZXJQYWdlc0NvbXBvbmVudCB9IGZyb20gJy4uL3BhZ2VzL3BhZ2VzLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4cC1sYXlvdXQtZGVzaWduZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVzaWduZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZXNpZ25lci5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEFYUExheW91dEJ1aWxkZXJNb2R1bGUsXG4gICAgQVhQRGVzaWduZXJCb2FyZENvbXBvbmVudCxcbiAgICBBWFBXaWRnZXRQcm9wZXJ0eVZpZXdlckNvbXBvbmVudCxcbiAgICBBWFBEZXNpZ25lckJyZWFkY3J1bWJzQ29tcG9uZW50LFxuICAgIEFYUERlc2lnbmVyT3V0bGluZUNvbXBvbmVudCxcbiAgICBBWFBEZXNpZ25lckhlYWRlck1lbnVDb21wb25lbnQsXG4gICAgQVhQRGVzaWduZXJIaXN0b3J5Q29tcG9uZW50LFxuICAgIEFYUERlc2lnbmVyUGFnZXNDb21wb25lbnQsXG4gICAgQVhUYWJzTW9kdWxlLFxuICAgIEFYQnV0dG9uTW9kdWxlLFxuICAgIEFYRHJhd2VyTW9kdWxlLFxuICAgIEFYRGVjb3JhdG9yTW9kdWxlLFxuICAgIEFYTWVudU1vZHVsZSxcbiAgICBBWEJ1dHRvbkdyb3VwTW9kdWxlLFxuICAgIEFYRHJvcGRvd25Nb2R1bGUsXG4gIF0sXG4gIHByb3ZpZGVyczogW0FYUERlc2lnbmVyU2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIEFYUExheW91dERlc2lnbmVyQ29tcG9uZW50IHtcblxuICBwcm90ZWN0ZWQgc2VydmljZSA9IGluamVjdChBWFBEZXNpZ25lclNlcnZpY2UpO1xuXG4gIEBWaWV3Q2hpbGQoQVhQV2lkZ2V0UHJvcGVydHlWaWV3ZXJDb21wb25lbnQsIHsgc3RhdGljOiB0cnVlIH0pXG4gIHByaXZhdGUgcHJvcGVydHlWaWV3ZXI6IEFYUFdpZGdldFByb3BlcnR5Vmlld2VyQ29tcG9uZW50O1xuXG4gIHByb3RlY3RlZCBub2RlQ29uZmlnID0gY29tcHV0ZWQ8QVhQV2lkZ2V0Q29uZmlnIHwgbnVsbD4oKCkgPT5cbiAgICB0aGlzLnNlcnZpY2Uuc2VsZWN0ZWROb2RlKCkgPyAoZ2V0KHRoaXMuc2VydmljZS5zZWxlY3RlZE5vZGUoKSwgJ19fbWV0YV9fLmNvbmZpZycpIGFzIGFueSBhcyBBWFBXaWRnZXRDb25maWcpIDogbnVsbFxuICApO1xuXG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5zZXJ2aWNlLm9uVXBkYXRlLnN1YnNjcmliZSgoZSkgPT4ge1xuICAgICAgdGhpcy5wcm9wZXJ0eVZpZXdlci51cGRhdGUoZS52YWx1ZXMpO1xuICAgIH0pXG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duJywgWyckZXZlbnQnXSlcbiAgcHJpdmF0ZSBoYW5kbGVLZXlib2FyZEV2ZW50KGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LmN0cmxLZXkpIHtcbiAgICAgIHN3aXRjaCAoZXZlbnQua2V5LnRvTG93ZXJDYXNlKCkpIHsgLy8gQ29udmVydCB0aGUga2V5IHRvIGxvd2VyY2FzZSB0byBlbnN1cmUgY2FzZSBpbnNlbnNpdGl2aXR5XG4gICAgICAgIGNhc2UgJ3onOlxuICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7ICAvLyBQcmV2ZW50IHRoZSBicm93c2VyJ3MgZGVmYXVsdCB1bmRvIGFjdGlvblxuICAgICAgICAgIHRoaXMuc2VydmljZS51bmRvKCk7XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ3knOlxuICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7ICAvLyBQcmV2ZW50IHRoZSBicm93c2VyJ3MgZGVmYXVsdCByZWRvIGFjdGlvblxuICAgICAgICAgIHRoaXMuc2VydmljZS5yZWRvKCk7XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ2MnOlxuICAgICAgICAgIGlmICh0aGlzLnNlcnZpY2UuY2FuQ3V0Q29weSgpKSB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOyAgLy8gUHJldmVudCB0aGUgYnJvd3NlcidzIGRlZmF1bHQgY29weSBhY3Rpb25cbiAgICAgICAgICAgIHRoaXMuc2VydmljZS5jb3B5KCk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGJyZWFrO1xuICAgICAgICBjYXNlICdkJzpcbiAgICAgICAgICBpZiAodGhpcy5zZXJ2aWNlLmNhbkN1dENvcHkoKSkge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTsgIC8vIFByZXZlbnQgdGhlIGJyb3dzZXIncyBkZWZhdWx0IGNvcHkgYWN0aW9uXG4gICAgICAgICAgICB0aGlzLnNlcnZpY2UuY2xvbmUoKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ3gnOlxuICAgICAgICAgIGlmICh0aGlzLnNlcnZpY2UuY2FuQ3V0Q29weSgpKSB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOyAgLy8gUHJldmVudCB0aGUgYnJvd3NlcidzIGRlZmF1bHQgY3V0IGFjdGlvblxuICAgICAgICAgICAgdGhpcy5zZXJ2aWNlLmN1dCgpO1xuICAgICAgICAgIH1cbiAgICAgICAgICBicmVhaztcbiAgICAgICAgY2FzZSAndic6XG4gICAgICAgICAgaWYgKHRoaXMuc2VydmljZS5jYW5QYXN0ZSgpKSB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOyAgLy8gUHJldmVudCB0aGUgYnJvd3NlcidzIGRlZmF1bHQgcGFzdGUgYWN0aW9uXG4gICAgICAgICAgICB0aGlzLnNlcnZpY2UucGFzdGUoKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgYnJlYWs7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbn1cbiIsIjxheC1kcmF3ZXItY29udGFpbmVyIGNsYXNzPVwiYXgtaC1mdWxsIGF4LXctZnVsbCBheC1mbGV4IGF4LXJlbGF0aXZlIGNoaWxkOmF4LWgtZnVsbCBheC1vdmVyZmxvdy1oaWRkZW4gYXgtZGFya1wiPlxuICA8YXgtY29udGVudCBjbGFzcz1cImF4LWNvbnRlbnRzXCI+XG4gICAgPCEtLSBUb29sYmFyIFNpZGUgLS0+XG4gICAgPGRpdiBjbGFzcz1cImF4LW1pbi13LTEwIGF4LWJnLXN1cmZhY2UgYXgtYm9yZGVyLWUgYXgteHMgYXgtZmxleCBheC1mbGV4LWNvbCBheC1pdGVtcy1jZW50ZXIgXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiYXgtbWluLXctMTAgYXgtaC0xMCBheC1mbGV4IGF4LWl0ZW1zLWNlbnRlciBheC1qdXN0aWZ5LWNlbnRlciBheC1ib3JkZXItYlwiPlxuICAgICAgICA8aW1nIHNyYz1cImFzc2V0cy9sb2dvcy9sb2dvLnBuZ1wiIGNsYXNzPVwiYXgtdy02XCIgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImF4LXB5LTFcIj48L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJheC1mbGV4IGF4LWZsZXgtY29sIGF4LWdhcC0yXCI+XG4gICAgICAgIDwhLS0gPGF4LWJ1dHRvbiBjb2xvcj1cImdob3N0XCIgbG9vaz1cInR3b3RvbmVcIj5cbiAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLXNvbGlkIGZhLXB1enpsZSBheC10ZXh0LXNtXCI+IDwvYXgtaWNvbj5cbiAgICAgICAgPC9heC1idXR0b24+IC0tPlxuICAgICAgICA8YXgtYnV0dG9uIGNvbG9yPVwiZ2hvc3RcIiBsb29rPVwidHdvdG9uZVwiIChvbkNsaWNrKT1cInBhZ2VzLnRvZ2dsZSgpXCIgdGl0bGU9XCJQYWdlc1wiPlxuICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtc29saWQgZmEtcGFnZSBheC10ZXh0LXNtXCI+IDwvYXgtaWNvbj5cbiAgICAgICAgPC9heC1idXR0b24+XG4gICAgICAgIDxheC1idXR0b24gY29sb3I9XCJnaG9zdFwiIGxvb2s9XCJ0d290b25lXCIgKG9uQ2xpY2spPVwiZGF0YXNvdXJjZXMudG9nZ2xlKClcIiB0aXRsZT1cIkRhdGEgU291cmNlc1wiPlxuICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtc29saWQgZmEtZGF0YWJhc2UgYXgtdGV4dC1zbVwiPiA8L2F4LWljb24+XG4gICAgICAgIDwvYXgtYnV0dG9uPlxuICAgICAgICA8YXgtYnV0dG9uIGNvbG9yPVwiZ2hvc3RcIiBsb29rPVwidHdvdG9uZVwiIChvbkNsaWNrKT1cIm91dGxpbmUudG9nZ2xlKClcIiB0aXRsZT1cIk91dGxpbmVcIj5cbiAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLXNvbGlkIGZhLWxpc3QtdHJlZSBheC10ZXh0LXNtXCI+IDwvYXgtaWNvbj5cbiAgICAgICAgPC9heC1idXR0b24+XG4gICAgICAgIDxheC1idXR0b24gY29sb3I9XCJnaG9zdFwiIGxvb2s9XCJ0d290b25lXCIgKG9uQ2xpY2spPVwiaGlzdG9yeS50b2dnbGUoKVwiIHRpdGxlPVwiSGlzdG9yeVwiPlxuICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtc29saWQgZmEtY2xvY2stcm90YXRlLWxlZnQgYXgtdGV4dC1zbVwiPiA8L2F4LWljb24+XG4gICAgICAgIDwvYXgtYnV0dG9uPlxuICAgICAgICA8IS0tIDxheC1idXR0b24gY29sb3I9XCJnaG9zdFwiIGxvb2s9XCJ0d290b25lXCIgdGl0bGU9XCJUaW1lbGluZVwiPlxuICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtc29saWQgZmEtZGlhZ3JhbS1zYW5rZXkgYXgtdGV4dC1zbVwiPiA8L2F4LWljb24+XG4gICAgICAgIDwvYXgtYnV0dG9uPiAtLT5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDwhLS0gTWFpbiBTaWRlIC0tPlxuICAgIDxkaXYgY2xhc3M9XCJheC1jb2wtc3Bhbi0xMCBheC1mbGV4IGF4LWZsZXgtY29sIGF4LWZsZXgtMVwiPlxuICAgICAgPCEtLSBIZWFkZXIgVG9vbGJhciAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJheC1taW4taC0xMCBheC1iZy1zdXJmYWNlIGF4LWJvcmRlci1iICBheC1mbGV4IGF4LWZsZXgtZ3JvdyBheC1qdXN0aWZ5LWJldHdlZW4gYXgtcHgtMlwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYXgtZmxleCBheC1pdGVtcy1jZW50ZXIgYXgtanVzdGlmeS1jZW50ZXIgYXgtdGV4dC13aGl0ZVwiPlxuICAgICAgICAgIDxheHAtZGVzaWduZXItaGVhZGVyLW1lbnU+PC9heHAtZGVzaWduZXItaGVhZGVyLW1lbnU+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYXgtZmxleCBheC1mbGV4LXJvdyBheC1nYXAtMiBheC14cyBheC1pdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICA8YXgtYnV0dG9uLWdyb3VwIGNvbG9yPVwiZ2hvc3RcIiBsb29rPVwidHdvdG9uZVwiIFtzZWxlY3Rpb25dPVwiJ3NpbmdsZSdcIj5cbiAgICAgICAgICAgIDxheC1idXR0b24taXRlbSBbc2VsZWN0ZWRdPVwic2VydmljZS5zaXplKCkgPT0gJ3hsJ1wiIFtkYXRhXT1cIid4bCdcIiAob25DbGljayk9XCJzZXJ2aWNlLnNpemUuc2V0KCd4bCcpXCI+XG4gICAgICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtbGlnaHQgZmEtZGVza3RvcFwiPjwvYXgtaWNvbj5cbiAgICAgICAgICAgIDwvYXgtYnV0dG9uLWl0ZW0+XG4gICAgICAgICAgICA8YXgtYnV0dG9uLWl0ZW0gW3NlbGVjdGVkXT1cInNlcnZpY2Uuc2l6ZSgpID09ICdsZydcIiBbZGF0YV09XCInbGcnXCIgKG9uQ2xpY2spPVwic2VydmljZS5zaXplLnNldCgnbGcnKVwiPlxuICAgICAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLWxpZ2h0IGZhLXRhYmxldFwiPjwvYXgtaWNvbj5cbiAgICAgICAgICAgIDwvYXgtYnV0dG9uLWl0ZW0+XG4gICAgICAgICAgICA8YXgtYnV0dG9uLWl0ZW0gW3NlbGVjdGVkXT1cInNlcnZpY2Uuc2l6ZSgpID09ICdzbSdcIiBbZGF0YV09XCInc20nXCIgKG9uQ2xpY2spPVwic2VydmljZS5zaXplLnNldCgnc20nKVwiPlxuICAgICAgICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImZhLWxpZ2h0IGZhLW1vYmlsZVwiPjwvYXgtaWNvbj5cbiAgICAgICAgICAgIDwvYXgtYnV0dG9uLWl0ZW0+XG4gICAgICAgICAgPC9heC1idXR0b24tZ3JvdXA+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYXgtZmxleCBheC1mbGV4LXJvdyBheC1nYXAtMiBheC14cyBheC1pdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICA8YXgtYnV0dG9uIHRleHQ9XCJEZXNpZ25cIiBsb29rPVwib3V0bGluZVwiIGNsYXNzPVwiYXgteHNcIj5cbiAgICAgICAgICAgIDxheC1zdWZmaXg+XG4gICAgICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtbGlnaHQgZmEtY2hldnJvbi1kb3duXCI+PC9heC1pY29uPlxuICAgICAgICAgICAgPC9heC1zdWZmaXg+XG4gICAgICAgICAgICA8YXgtZHJvcGRvd24tcGFuZWw+XG4gICAgICAgICAgICAgIDxheC1idXR0b24taXRlbS1saXN0PlxuICAgICAgICAgICAgICAgIDxheC1idXR0b24taXRlbSB0ZXh0PVwiUHJpbnRcIiBuYW1lPVwicHJpbnRcIj4gPC9heC1idXR0b24taXRlbT5cbiAgICAgICAgICAgICAgICA8YXgtYnV0dG9uLWl0ZW0gdGV4dD1cIlZpZXdcIiBuYW1lPVwidmlld1wiPiA8L2F4LWJ1dHRvbi1pdGVtPlxuICAgICAgICAgICAgICA8L2F4LWJ1dHRvbi1pdGVtLWxpc3Q+XG4gICAgICAgICAgICA8L2F4LWRyb3Bkb3duLXBhbmVsPlxuICAgICAgICAgIDwvYXgtYnV0dG9uPlxuICAgICAgICAgIDxheC1idXR0b24gY29sb3I9XCJzdWNjZXNzXCIgbG9vaz1cIm91dGxpbmVcIiB0ZXh0PVwiUHJldmlld1wiIGNsYXNzPVwiYXgteHNcIiAob25DbGljayk9XCJzZXJ2aWNlLm9wZW5QcmV2aWV3KClcIj5cbiAgICAgICAgICAgIDxheC1zdWZmaXg+XG4gICAgICAgICAgICAgIDxheC1pY29uIGNsYXNzPVwiZmEtc29saWQgZmEtcGxheVwiPjwvYXgtaWNvbj5cbiAgICAgICAgICAgIDwvYXgtc3VmZml4PlxuICAgICAgICAgIDwvYXgtYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSBCb2FyZCAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJheC1oLWZ1bGwgXCI+XG4gICAgICAgIDxheC1kcmF3ZXItY29udGFpbmVyIGNsYXNzPVwiYXgtdy1mdWxsIGF4LWgtZnVsbFwiPlxuICAgICAgICAgIDwhLS0gUGFnZXMgLS0+XG4gICAgICAgICAgPGF4LWRyYXdlciAjcGFnZXMgbG9jYXRpb249XCJzdGFydFwiIG1vZGU9XCJwdXNoXCI+XG4gICAgICAgICAgICA8YXgtY29udGVudD5cbiAgICAgICAgICAgICAgPGF4cC1kZXNpZ25lci1wYWdlcz48L2F4cC1kZXNpZ25lci1wYWdlcz5cbiAgICAgICAgICAgIDwvYXgtY29udGVudD5cbiAgICAgICAgICA8L2F4LWRyYXdlcj5cbiAgICAgICAgICA8IS0tIERhdGFzb3VyY2VzIC0tPlxuICAgICAgICAgIDxheC1kcmF3ZXIgI2RhdGFzb3VyY2VzIGxvY2F0aW9uPVwic3RhcnRcIiBtb2RlPVwicHVzaFwiPlxuICAgICAgICAgICAgPGF4LWNvbnRlbnQ+XG4gICAgICAgICAgICAgIERhdGFzb3VyY2VzXG4gICAgICAgICAgICA8L2F4LWNvbnRlbnQ+XG4gICAgICAgICAgPC9heC1kcmF3ZXI+XG4gICAgICAgICAgPCEtLSBPdXRsaW5lIFBuYWVsIC0tPlxuICAgICAgICAgIDxheC1kcmF3ZXIgI291dGxpbmUgbG9jYXRpb249XCJzdGFydFwiIG1vZGU9XCJwdXNoXCI+XG4gICAgICAgICAgICA8YXgtY29udGVudD5cbiAgICAgICAgICAgICAgPGF4cC1kZXNpZ25lci1vdXRsaW5lPjwvYXhwLWRlc2lnbmVyLW91dGxpbmU+XG4gICAgICAgICAgICA8L2F4LWNvbnRlbnQ+XG4gICAgICAgICAgPC9heC1kcmF3ZXI+XG4gICAgICAgICAgPCEtLSBIaXN0b3J5IFBuYWVsIC0tPlxuICAgICAgICAgIDxheC1kcmF3ZXIgI2hpc3RvcnkgbG9jYXRpb249XCJzdGFydFwiIG1vZGU9XCJwdXNoXCI+XG4gICAgICAgICAgICA8YXgtY29udGVudD5cbiAgICAgICAgICAgICAgPGF4cC1kZXNpZ25lci1oaXN0b3J5PjwvYXhwLWRlc2lnbmVyLWhpc3Rvcnk+XG4gICAgICAgICAgICA8L2F4LWNvbnRlbnQ+XG4gICAgICAgICAgPC9heC1kcmF3ZXI+XG4gICAgICAgICAgPCEtLSBDb250ZW50IG9mIGJvYXJkIC0tPlxuICAgICAgICAgIDxheC1jb250ZW50IGNsYXNzPVwiYXgtbGlnaHRcIj5cbiAgICAgICAgICAgIDxheHAtZGVzaWduZXItYm9hcmQgY2xhc3M9XCJheC1oLWZ1bGwgYXgtYmctb24tc3VyZmFjZSBheC1mbGV4IGF4LWp1c3RpZnktY2VudGVyXCI+IDwvYXhwLWRlc2lnbmVyLWJvYXJkPlxuICAgICAgICAgIDwvYXgtY29udGVudD5cbiAgICAgICAgPC9heC1kcmF3ZXItY29udGFpbmVyPlxuICAgICAgPC9kaXY+XG4gICAgICA8IS0tIEZvb3RlciAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJheC1taW4taC0xMCBheC1iZy1zdXJmYWNlIGF4LWJvcmRlci10ICBheC1mbGV4IGF4LWl0ZW1zLWNlbnRlclwiPlxuICAgICAgICA8YXhwLWRlc2lnbmVyLWJyZWFkY3J1bWJzIGNsYXNzPVwiYXgtYm9yZGVyLWRlZmF1bHQgYXgtYm9yZGVyLXQgYXgtcC0yIGF4LWZvbnQtbm9ybWFsXCI+XG4gICAgICAgIDwvYXhwLWRlc2lnbmVyLWJyZWFkY3J1bWJzPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvYXgtY29udGVudD5cbiAgPCEtLSBQcm9wZXJ0eSBTaWRlIC0tPlxuICA8YXgtZHJhd2VyIGNsYXNzPVwiYXgtdy04MCBheC1ib3JkZXItc1wiIGxvY2F0aW9uPVwiZW5kXCIgbW9kZT1cInB1c2hcIiBbY29sbGFwc2VkXT1cImZhbHNlXCIgI3BkPlxuICAgIDxheC1jb250ZW50PlxuICAgICAgPGRpdiBjbGFzcz1cImF4LWZsZXggYXgtZmxleC1yb3cgYXgtdy1mdWxsIGF4LWp1c3RpZnktYmV0d2VlbiBheC10ZXh0LXdoaXRlIGF4LXB5LTIgYXgtcHgtNCBheC1ib3JkZXItYlwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYXgtZmxleCBheC1mbGV4LXJvdyBheC1nYXAtMiBheC1pdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICA8aSBbbmdDbGFzc109XCJub2RlQ29uZmlnKCk/Lmljb25cIj48L2k+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJheC1mb250LXNlbWlib2xkXCI+e3sgbm9kZUNvbmZpZygpPy50aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxheHAtd2lkZ2V0LXByb3BlcnR5LXZpZXdlciBbd2lkZ2V0XT1cInNlcnZpY2Uuc2VsZWN0ZWROb2RlKCkhXCJcbiAgICAgICAgKG9uQ2hhbmdlZCk9XCJzZXJ2aWNlLnVwZGF0ZSh7IHZhbHVlczogJGV2ZW50LnZhbHVlcywgbW9kZTogJGV2ZW50Lm1vZGUgfSlcIiBjbGFzcz1cImF4LXctMS80XCI+XG4gICAgICA8L2F4cC13aWRnZXQtcHJvcGVydHktdmlld2VyPlxuICAgIDwvYXgtY29udGVudD5cbiAgPC9heC1kcmF3ZXI+XG48L2F4LWRyYXdlci1jb250YWluZXI+Il19