@acorex/platform 20.3.0-next.0 → 20.3.0-next.1

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

@@ -2,18 +2,19 @@ import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i1$2 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutBaseWidgetComponent, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import * as i1$3 from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent } from '@acorex/platform/layout/builder';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
+import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, untracked, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXToastService } from '@acorex/components/toast';
 import { AXFileService } from '@acorex/core/file';
-import { merge, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, isEqual } from 'lodash-es';
+import { merge, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, capitalize, unionBy, isArray, isEqual } from 'lodash-es';
 import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as merge$1 } from 'rxjs';
 import { AXPBroadcastEventService, AXPPlatformScope, AXPDataSourceDefinitionProviderService } from '@acorex/platform/core';
-import { AXTranslationService } from '@acorex/core/translation';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import * as i2$1 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -22,22 +23,24 @@ import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i6 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXPSettingService, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
-import { AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
+import { AXPWidgetItemComponent } from '@acorex/platform/layout/components';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$4 from '@acorex/components/button-group';
+import * as i1$5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i3$1 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i5 from '@acorex/components/dropdown-button';
+import * as i5$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import * as i2$2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i1$3 from '@acorex/components/breadcrumbs';
+import * as i1$2 from '@acorex/components/collapse';
+import { AXCollapseModule } from '@acorex/components/collapse';
+import * as i1$4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -1011,7 +1014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class AXPDesignerAddWidgetButtonComponent {
     constructor() {
         this.designerService = inject(AXPDesignerService);
-        this.parent = inject(AXPLayoutBaseWidgetComponent);
+        this.parent = inject(AXPLayoutWidgetComponent);
     }
     async handleClick(e) {
         e.nativeEvent.stopPropagation();
@@ -1082,7 +1085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class AXPDesignerAddWidgetMiniButtonComponent {
     constructor() {
         this.designerService = inject(AXPDesignerService);
-        this.parent = inject(AXPLayoutBaseWidgetComponent);
+        this.parent = inject(AXPLayoutWidgetComponent);
         this.onClick = new EventEmitter();
     }
     async handleClick(e) {
@@ -1100,19 +1103,16 @@ class AXPDesignerAddWidgetMiniButtonComponent {
         //
         cls[`ax-flex`] = true;
         cls[`ax-w-full`] = true;
-        cls[`ax-h-full`] = true;
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPDesignerAddWidgetMiniButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-mini-button", outputs: { onClick: "onClick" }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
     <div class="axp-empty-space">
-      <div class="ax-m-auto ax-py-4 ax-px-8">
-        <div
-          class="ax-flex ax-items-center ax-justify-center ax-size-4 hover:ax-scale-125 ax-cursor-pointer"
-          (click)="handleClick($event)"
-        >
-          <i class="fa-solid fa-plus"></i>
-        </div>
+      <div
+        class="ax-m-auto ax-py-4 ax-px-8 ax-text-primary-500 hover:ax-text-primary-700 ax-cursor-pointer"
+        (click)="handleClick($event)"
+      >
+        <i class="fa-solid fa-plus "></i>
       </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1123,19 +1123,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-designer-add-widget-mini-button',
                     template: `
     <div class="axp-empty-space">
-      <div class="ax-m-auto ax-py-4 ax-px-8">
-        <div
-          class="ax-flex ax-items-center ax-justify-center ax-size-4 hover:ax-scale-125 ax-cursor-pointer"
-          (click)="handleClick($event)"
-        >
-          <i class="fa-solid fa-plus"></i>
-        </div>
+      <div
+        class="ax-m-auto ax-py-4 ax-px-8 ax-text-primary-500 hover:ax-text-primary-700 ax-cursor-pointer"
+        (click)="handleClick($event)"
+      >
+        <i class="fa-solid fa-plus "></i>
       </div>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXButtonModule, AXDecoratorModule],
-                    encapsulation: ViewEncapsulation.None,
+                    encapsulation: ViewEncapsulation.None
                 }]
         }], propDecorators: { onClick: [{
                 type: Output
@@ -1144,63 +1142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 args: ['class']
             }] } });
 
-class AXPDesignerFlexDrawerComponent {
-    constructor() {
-        this.itemsCount = model(12, ...(ngDevMode ? [{ debugName: "itemsCount", alias: 'items' }] : [{ alias: 'items' }]));
-        this.onSelect = output();
-        this.items = computed(() => Array.from({ length: this.itemsCount() }).map((v, index) => index + 1), ...(ngDevMode ? [{ debugName: "items" }] : []));
-        this.range = signal(0, ...(ngDevMode ? [{ debugName: "range" }] : []));
-    }
-    handleMouseHover(c) {
-        this.range.set(c);
-    }
-    handleClick(c) {
-        this.onSelect.emit(c);
-    }
-    handleMouseLeave(event) {
-        this.range.set(0);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerFlexDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPDesignerFlexDrawerComponent, isStandalone: true, selector: "axp-designer-flex-drawer", inputs: { itemsCount: { classPropertyName: "itemsCount", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsCount: "itemsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" } }, ngImport: i0, template: `
-    <table class="table-picker">
-      <tbody>
-        <tr>
-          @for (c of items(); track $index) {
-            <td (mouseenter)="handleMouseHover(c)" [class.picked]="c <= range()" (click)="handleClick(c)"></td>
-          }
-        </tr>
-        <tr>
-          <td [attr.colspan]="items().length" class="ax-text-center">
-            <small>{{ range() }}</small>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `, isInline: true, styles: [":host{width:100%}:host table{width:100%;border-collapse:collapse;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:2.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerFlexDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-designer-flex-drawer', template: `
-    <table class="table-picker">
-      <tbody>
-        <tr>
-          @for (c of items(); track $index) {
-            <td (mouseenter)="handleMouseHover(c)" [class.picked]="c <= range()" (click)="handleClick(c)"></td>
-          }
-        </tr>
-        <tr>
-          <td [attr.colspan]="items().length" class="ax-text-center">
-            <small>{{ range() }}</small>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{width:100%}:host table{width:100%;border-collapse:collapse;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:2.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"] }]
-        }], propDecorators: { handleMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave', ['$event']]
-            }] } });
-
 class AXPDesignerGridDrawerComponent {
     constructor() {
         this.rowsCount = model(5, ...(ngDevMode ? [{ debugName: "rowsCount", alias: 'rows' }] : [{ alias: 'rows' }]));
@@ -1244,7 +1185,7 @@ class AXPDesignerGridDrawerComponent {
         }
         <tr>
           <td [attr.colspan]="columns().length" class="ax-text-center">
-            <small>{{ rangeC() }}×{{ rangeR() }}</small>
+            <small>{{ rangeC() }}*{{ rangeR() }}</small>
           </td>
         </tr>
       </tbody>
@@ -1269,7 +1210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }
         <tr>
           <td [attr.colspan]="columns().length" class="ax-text-center">
-            <small>{{ rangeC() }}×{{ rangeR() }}</small>
+            <small>{{ rangeC() }}*{{ rangeR() }}</small>
           </td>
         </tr>
       </tbody>
@@ -1423,6 +1364,110 @@ var widgetPicker_component = /*#__PURE__*/Object.freeze({
     AXPDesignerWidgetPickerComponent: AXPDesignerWidgetPickerComponent
 });
 
+class AXPWidgetPropertyViewerComponent {
+    constructor() {
+        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.widgetRegistryService = inject(AXPWidgetRegistryService);
+        this.connector = inject(AXPDesignerConnector);
+        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : []));
+        this.config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.allPoperties = [];
+        this.tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.groups = computed(() => {
+            return this.tabs().length ? this.tabs()[this.currentTabIndex()].groups : [];
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        this.groupCollapsedStates = new Map();
+        this.onChanged = new EventEmitter();
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.initialContext = {};
+        effect(() => {
+            if (!this.widget())
+                return;
+            const config = this.widgetRegistryService.resolve(this.widget()?.type);
+            if (config) {
+                this.initialContext = {};
+                this.config.set(config);
+                this.fillTabs();
+            }
+            else {
+                console.error(`Invalid widget name: ${this.widget()}`);
+            }
+        });
+    }
+    update(values) {
+        this.context.set(merge(cloneDeep(this.context()), values));
+    }
+    fillTabs() {
+        const tabs = [
+            {
+                name: 'general',
+                title: 'General',
+                groups: [],
+            },
+        ];
+        Object.entries(this.config()?.components ?? {}).forEach((c) => {
+            if (c[1].component != null && c[1].properties?.length) {
+                tabs.push({ name: c[0], title: capitalize(c[0]), groups: [] });
+            }
+        });
+        ///
+        this.allPoperties = [];
+        ///
+        tabs.forEach((tab) => {
+            const props = tab.name == 'general'
+                ? (this.config()?.properties ?? [])
+                : ((this.config()?.components)[tab.name]?.properties ?? []);
+            //
+            const visibleProps = props.filter((c) => c.visible != false);
+            this.allPoperties.push(...props);
+            tab.groups = unionBy(sortBy(visibleProps.map((pg) => ({
+                isCollapsed: !!this.groupCollapsedStates.get(pg.group.name),
+                name: pg.group.name,
+                title: pg.group.title,
+                props: sortBy(visibleProps.filter((p) => p.group.name == pg.group.name && pg.visible), ['order', 'title']),
+            })), ['order', 'title']), 'name').filter((c) => c.props.length);
+        });
+        this.tabs.set(tabs.filter((c) => c.groups.length));
+        //
+        this.initialContext = this.allPoperties
+            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) ||
+            (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
+            .reduce((acc, c) => {
+            set(acc, c.schema.interface.path, c.schema.defaultValue);
+            return acc;
+        }, {});
+        //
+        untracked(() => {
+            this.context.set(merge(cloneDeep(this.initialContext), this.widget()));
+            this.onChanged.emit({ values: this.context(), mode: 'init' });
+        });
+    }
+    handleContextChange(e) {
+        untracked(() => {
+            this.context.set(e.data);
+            this.onChanged.emit({ values: this.context(), mode: e.state == 'initiated' ? 'init' : 'update' });
+        });
+    }
+    handleTabChange(event) {
+        const indx = event.index;
+        if (this.currentTabIndex() != indx) {
+            this.currentTabIndex.set(indx);
+        }
+    }
+    handleCollapsedChange(group, collapsed) {
+        this.groupCollapsedStates.set(group, collapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    @if(tabs().length > 1){\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    }\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  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</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    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host 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"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    @if(tabs().length > 1){\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    }\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  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</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    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onChanged: [{
+                type: Output
+            }] } });
+
 class AXPWidgetDesignerRendererDirective {
     /**
      * @ignore
@@ -1876,7 +1921,7 @@ class AXPDesignerBoardComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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: 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: "20.1.6", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
@@ -1917,7 +1962,7 @@ class AXPDesignerBreadcrumbsComponent {
         <i class="ax-icon ax-icon-chevron-right"></i>
       </ng-template>
     </ax-breadcrumbs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$3.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$3.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -2191,7 +2236,7 @@ class AXPDesignerViewSizeToolbarComponent {
         <ax-icon class="fa-light fa-mobile fa-fw "></ax-icon>
       </ax-button-group-item>
     </ax-button-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$4.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$4.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$5.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
             type: Component,
@@ -2235,7 +2280,7 @@ class AXPLayoutDesignerComponent {
         return styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, 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 ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\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/images/logos/icon-light.svg\" 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  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (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 look=\"blank\" (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 look=\"blank\" (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  look=\"blank\" 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-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\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\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\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\" class=\"ax-dark ax-bg-lightest\">\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 ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  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-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\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 [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.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", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, 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 ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\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/images/logos/icon-light.svg\" 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  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (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 look=\"blank\" (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 look=\"blank\" (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  look=\"blank\" 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-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\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\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\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\" class=\"ax-dark ax-bg-lightest\">\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 ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  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-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\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 [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25%,#fff 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.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", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -2307,7 +2352,7 @@ class AXPLayoutDesignerPreviewViewerComponent {
     <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: AXPLayoutBuilderModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ 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"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
             type: Component,
@@ -2461,5 +2506,5 @@ var preview_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, cloneWidgetMenu };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXPWidgetPropertyViewerComponent, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, cloneWidgetMenu };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map