npm - @acorex/platform - Versions diffs - 19.2.20 → 19.3.0-next.0 - Mend

@acorex/platform 19.2.20 → 19.3.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (193) hide show

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

@@ -3,16 +3,17 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$3 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXPWidgetComponent, AXP_WIDGETS_GROUPS, AXPWidgetDataSourceProviderService, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN, AXPWidgetStatus } from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPWidgetComponent, AXPWidgetDataSourceProviderService, AXPLayoutBuilderModule, AXP_WIDGET_TOKEN, AXPWidgetStatus } 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, 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, get, sortBy, set, isNil, isEmpty, orderBy, capitalize, unionBy, isArray, 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 } from '@acorex/platform/core';
+import { AXPBroadcastEventService, AXPPlatformScope } from '@acorex/platform/core';
+import { AXTranslationService } from '@acorex/core/translation';
 import * as i2$1 from '@acorex/components/common';
 import { AXCommonModule } from '@acorex/components/common';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -20,7 +21,7 @@ import * as i7 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i6 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import { AXPSettingService, AXPSettingScope, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
+import { AXPSettingService, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
@@ -313,6 +314,42 @@ const AXPDesignerMessageKeys = {
     FormSaved: 'designer-form-saved-content',
 };
+class AXPWidgetPickerService {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+        this.widgetRegistryService = inject(AXPWidgetRegistryService);
+        this.translationService = inject(AXTranslationService);
+    }
+    async showPicker(options) {
+        const com = await Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent);
+        const widgets = this.widgetRegistryService.all();
+        const filteredWidgets = widgets.filter((c) => options.groups.some((d) => c.groups?.includes(d)));
+        //
+        const result = await this.popupService.open(com, {
+            title: await this.translationService.translateAsync('widget-picker.title', { scope: 'form-template-management' }),
+            size: 'md',
+            closeButton: true,
+            data: {
+                widgets: sortBy(filteredWidgets, (c) => c.title),
+            },
+        });
+        //
+        const selectedWidgets = (result.data?.widgets ?? []);
+        return selectedWidgets.map((c) => ({
+            type: c.name,
+            meta: c.meta,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPickerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 class AXPDesignerService {
     #ef;
     constructor() {
@@ -323,6 +360,7 @@ class AXPDesignerService {
         this.widgetRegisteryService = inject(AXPWidgetRegistryService);
         this.connector = inject(AXPDesignerConnector);
         this.eventService = inject(AXPBroadcastEventService);
+        this.widgetPickerService = inject(AXPWidgetPickerService);
         this.document = signal(this.createDoc());
         this.currentPageIndex = signal(0);
         this.currentPage = signal(this.document().children?.[0]);
@@ -442,23 +480,14 @@ class AXPDesignerService {
         return undefined;
     }
     async showPicker(currentNode = this.selectedNode()) {
-        const com = await Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent);
-        const result = await this.popupService.open(com, {
-            title: 'Widget Gallery',
-            size: 'md',
-            closeButton: true,
-            data: {
-                widgets: sortBy(this.widgetRegisteryService.all().filter((c) => c.visible != false), (c) => c.title),
-            },
-        });
-        const widgets = [];
-        if ((result.data?.widgets ?? []).length) {
-            const selected = result.data?.widgets;
-            selected.forEach((c) => {
-                widgets.push(this.addWidget(currentNode, { type: c.name }));
+        const widgets = await this.widgetPickerService.showPicker({ groups: [AXPWidgetGroupEnum.FormElement] });
+        const result = [];
+        if (widgets.length) {
+            widgets.forEach((c) => {
+                result.push(this.addWidget(currentNode, { type: c.type }));
             });
         }
-        return widgets;
+        return result;
     }
     new() {
         this.commandManager.clear();
@@ -1199,7 +1228,11 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         this.searchTerm = model('');
         // Signals
         this.widgets = [];
-        this.displayWidgets = signal([]);
+        this.allWidgets = signal([]);
+        this.pinnedWidgets = signal([]);
+        this.displayWidgets = computed(() => {
+            return this.allWidgets().map((c) => ({ ...c, pinned: this.pinnedWidgets().includes(c.name) }));
+        });
         // Signal to track selected widgets
         this.selectedWidgets = signal([]);
         // Computed for filtered and ordered widget list
@@ -1207,7 +1240,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
             const search = this.searchTerm().toLowerCase();
             const selectedTabName = this.selectedTab().name;
             return orderBy(this.displayWidgets().filter((w) => {
-                const matchesTab = selectedTabName === 'all' || w.group.name === selectedTabName;
+                const matchesTab = selectedTabName === 'all' || castArray(w.categories ?? []).some((c) => c.name === selectedTabName);
                 const matchesSearch = !search || w.title.toLowerCase().includes(search) || w.description?.toLowerCase().includes(search);
                 return matchesTab && matchesSearch;
             }), ['pinned', 'title'], ['desc', 'asc']);
@@ -1216,14 +1249,22 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         this.pinnedList = computed(() => this.orderedList().filter((c) => c.pinned));
         this.regularList = computed(() => this.orderedList().filter((c) => !c.pinned));
         // Tabs for the widget groups
-        this.tabs = orderBy([{ name: 'all', title: 'All', order: 0 }, ...AXP_WIDGETS_GROUPS.filter((g) => g.hidden != true)], (c) => c.order);
+        this.categories = computed(() => uniqBy(this.allWidgets()
+            .map((w) => castArray(w.categories ?? []))
+            .filter((c) => c.length > 0)
+            .flat(), 'name'));
+        this.tabs = computed(() => orderBy([{ name: 'all', title: 'All', order: 0 }, ...this.categories()], (c) => c.order));
+        // computed max visible widgets in a tab
+        this.maxVisibleWidgets = computed(() => Math.max(...this.categories().map(c => this.allWidgets()
+            .filter(w => castArray(w.categories ?? [])
+            .some(c => c.name === c.name)).length)));
         this.currentTabIndex = signal(0);
-        this.selectedTab = computed(() => this.tabs[this.currentTabIndex()]);
+        this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()]);
     }
     async ngOnInit() {
         super.ngOnInit();
-        const pinnedWidgets = (await this.settingService.get(this.pinnedSettingKey)) || [];
-        this.displayWidgets.set(this.widgets.map((c) => ({ ...c, pinned: pinnedWidgets.includes(c.name) })));
+        this.allWidgets.set(this.widgets);
+        this.pinnedWidgets.set((await this.settingService.get(this.pinnedSettingKey)) || []);
     }
     handleTabChange(event) {
         const indx = event.index;
@@ -1264,9 +1305,9 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
             pinnedWidgets = pinnedWidgets.filter((name) => name !== widget.name);
         }
         // Save the updated list of pinned widgets
-        await this.settingService.scope(AXPSettingScope.User).set(this.pinnedSettingKey, pinnedWidgets);
+        await this.settingService.scope(AXPPlatformScope.User).set(this.pinnedSettingKey, pinnedWidgets);
         // Trigger a re-render of the widgets
-        this.displayWidgets.set([...this.displayWidgets()]);
+        this.pinnedWidgets.set(pinnedWidgets);
     }
     // Check if a widget is selected
     isWidgetSelected(widget) {
@@ -1276,7 +1317,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         this.close({ widgets: this.selectedWidgets() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs;track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n      <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n        [axAutoFocus]=\"true\">\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <ng-template #itemTpl let-w>\n        @let isSelected= isWidgetSelected(w);\n        <div (click)=\"handleClick($event, w)\"\n          class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer\"\n          [class.ax-bg-primary-lightest]=\"isSelected\" [class.ax-text-primary-on-lightest]=\"isSelected\"\n          [class.ax-border-primary-lightest]=\"isSelected\">\n          <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border\n            group-hover:ax-bg-primary-lighter\n            group-hover:ax-text-primary-on-lighter\n            group-hover:ax-border-primary-lighter\" [class.ax-bg-primary-light]=\"isSelected\"\n            [class.ax-text-primary-on-light]=\"isSelected\" [class.ax-border-primary-light]=\"isSelected\"\n            [class.ax-surface]=\"!isSelected\">\n            <i [ngClass]=\"w.icon\" class=\"ax-text-lg\"></i>\n          </div>\n          <div class=\" ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n            <div class=\"ax-flex ax-items-center ax-gap-2\">\n              <div class=\"ax-font-semibold ax-text-sm\">{{ w.title }}</div>\n              <div (click)=\"handlePinClick($event, w)\">\n                @if (w.pinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm  ax-rotate-45\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm  ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                }\n              </div>\n            </div>\n            <span class=\"ax-text-xs  ax-truncate\">\n              {{ w.description }}\n            </span>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of pinnedList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of regularList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: 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: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-flex ax-flex-col ax-h-[95vh]\"\n  [ngClass]=\"{ 'lg:ax-h-[75vh]': maxVisibleWidgets() > 10, 'lg:ax-h-[50vh]': maxVisibleWidgets() <= 10 }\"\n>\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs();track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <ng-template #itemTpl let-w>\n        @let isSelected= isWidgetSelected(w);\n        <div\n          (click)=\"handleClick($event, w)\"\n          class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer\"\n          [class.ax-bg-primary-lightest]=\"isSelected\"\n          [class.ax-text-primary-on-lightest]=\"isSelected\"\n          [class.ax-border-primary-lightest]=\"isSelected\"\n        >\n          <div\n            class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n            [class.ax-bg-primary-light]=\"isSelected\"\n            [class.ax-text-primary-on-light]=\"isSelected\"\n            [class.ax-border-primary-light]=\"isSelected\"\n            [class.ax-surface]=\"!isSelected\"\n          >\n            <i [ngClass]=\"w.icon\" class=\"ax-text-lg\"></i>\n          </div>\n          <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n            <div class=\"ax-flex ax-items-center ax-gap-2\">\n              <div class=\"ax-font-semibold ax-text-sm\">{{ w.title }}</div>\n              <div (click)=\"handlePinClick($event, w)\">\n                @if (w.pinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                }\n              </div>\n            </div>\n            <span class=\"ax-text-xs ax-truncate\">\n              {{ w.description }}\n            </span>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of pinnedList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of regularList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: 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: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
@@ -1289,7 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXTabsModule,
                         AXSearchBoxModule,
                         AXPStickyDirective,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs;track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n      <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n        [axAutoFocus]=\"true\">\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <ng-template #itemTpl let-w>\n        @let isSelected= isWidgetSelected(w);\n        <div (click)=\"handleClick($event, w)\"\n          class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer\"\n          [class.ax-bg-primary-lightest]=\"isSelected\" [class.ax-text-primary-on-lightest]=\"isSelected\"\n          [class.ax-border-primary-lightest]=\"isSelected\">\n          <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border\n            group-hover:ax-bg-primary-lighter\n            group-hover:ax-text-primary-on-lighter\n            group-hover:ax-border-primary-lighter\" [class.ax-bg-primary-light]=\"isSelected\"\n            [class.ax-text-primary-on-light]=\"isSelected\" [class.ax-border-primary-light]=\"isSelected\"\n            [class.ax-surface]=\"!isSelected\">\n            <i [ngClass]=\"w.icon\" class=\"ax-text-lg\"></i>\n          </div>\n          <div class=\" ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n            <div class=\"ax-flex ax-items-center ax-gap-2\">\n              <div class=\"ax-font-semibold ax-text-sm\">{{ w.title }}</div>\n              <div (click)=\"handlePinClick($event, w)\">\n                @if (w.pinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm  ax-rotate-45\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm  ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                }\n              </div>\n            </div>\n            <span class=\"ax-text-xs  ax-truncate\">\n              {{ w.description }}\n            </span>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of pinnedList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of regularList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ax-flex ax-flex-col ax-h-[95vh]\"\n  [ngClass]=\"{ 'lg:ax-h-[75vh]': maxVisibleWidgets() > 10, 'lg:ax-h-[50vh]': maxVisibleWidgets() <= 10 }\"\n>\n  <div>\n    <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for(w of tabs();track $index) {\n      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n      <ng-template #itemTpl let-w>\n        @let isSelected= isWidgetSelected(w);\n        <div\n          (click)=\"handleClick($event, w)\"\n          class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer\"\n          [class.ax-bg-primary-lightest]=\"isSelected\"\n          [class.ax-text-primary-on-lightest]=\"isSelected\"\n          [class.ax-border-primary-lightest]=\"isSelected\"\n        >\n          <div\n            class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n            [class.ax-bg-primary-light]=\"isSelected\"\n            [class.ax-text-primary-on-light]=\"isSelected\"\n            [class.ax-border-primary-light]=\"isSelected\"\n            [class.ax-surface]=\"!isSelected\"\n          >\n            <i [ngClass]=\"w.icon\" class=\"ax-text-lg\"></i>\n          </div>\n          <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n            <div class=\"ax-flex ax-items-center ax-gap-2\">\n              <div class=\"ax-font-semibold ax-text-sm\">{{ w.title }}</div>\n              <div (click)=\"handlePinClick($event, w)\">\n                @if (w.pinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                }\n              </div>\n            </div>\n            <span class=\"ax-text-xs ax-truncate\">\n              {{ w.description }}\n            </span>\n          </div>\n        </div>\n      </ng-template>\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of pinnedList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\n      <hr class=\"ax-my-4 ax-border-dashed\" />\n      }\n      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for(w of regularList();track $index) {\n        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"] }]
         }] });
 var widgetPicker_component = /*#__PURE__*/Object.freeze({
@@ -1300,6 +1341,7 @@ var widgetPicker_component = /*#__PURE__*/Object.freeze({
 class AXPWidgetPropertyViewerComponent {
     constructor() {
         this.widget = input.required();
+        this.mode = input('simple');
         this.widgetRegistryService = inject(AXPWidgetRegistryService);
         this.connector = inject(AXPDesignerConnector);
         this.dataSourceProvider = inject(AXPWidgetDataSourceProviderService);
@@ -1397,11 +1439,11 @@ class AXPWidgetPropertyViewerComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n</axp-widgets-container>", styles: [":host{--ax-sys-size-base: 1.875rem}ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, 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)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\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 }}</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"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n</axp-widgets-container>", styles: [":host{--ax-sys-size-base: 1.875rem}ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\" [functions]=\"functions\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\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 }}</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
             }] } });
@@ -2182,7 +2224,7 @@ class AXPLayoutDesignerComponent {
         return styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", 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/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  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-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-dark axp-designer-prop-side\" 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-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 [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>\n", 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{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}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:#60a5fa;outline-color:rgba(var(--ax-sys-color-lightest-surface),1)}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;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}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)}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"], 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: "19.0.3", 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/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  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-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-dark axp-designer-prop-side\" 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-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 [widget]=\"service.selectedNode()!\" style=\"--ax-sys-size-base: 1.875rem;\"\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-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{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}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:#60a5fa;outline-color:rgba(var(--ax-sys-color-lightest-surface),1)}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;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -2206,7 +2248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXButtonGroupModule,
                         AXDropdownModule,
                         AXDropdownButtonModule,
-                    ], providers: [AXPDesignerService], 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/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  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-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-dark axp-designer-prop-side\" 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-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 [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>\n", 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{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}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:#60a5fa;outline-color:rgba(var(--ax-sys-color-lightest-surface),1)}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;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}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)}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"] }]
+                    ], providers: [AXPDesignerService], 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/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  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-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-dark axp-designer-prop-side\" 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-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 [widget]=\"service.selectedNode()!\" style=\"--ax-sys-size-base: 1.875rem;\"\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-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{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}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:#60a5fa;outline-color:rgba(var(--ax-sys-color-lightest-surface),1)}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;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}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"] }]
         }], ctorParameters: () => [], propDecorators: { propertyViewer: [{
                 type: ViewChild,
                 args: [AXPWidgetPropertyViewerComponent, { static: true }]
@@ -2388,7 +2430,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         this.clipboard.copy('Json Data', JSON.stringify(this.context()));
     }
     async handleCollapsedChange(value) {
-        await this.settings.scope(AXPSettingScope.User).set(this.jsonSettingsKey, !value);
+        await this.settings.scope(AXPPlatformScope.User).set(this.jsonSettingsKey, !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-bg-[#f3f3fe] ax-flex ax-flex-1 ax-justify-center ax-overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <ax-drawer\n    class=\"ax-w-1/3 ax-border-s\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"jsonViewCollapsed()\"\n    (collapsedChange)=\"handleCollapsedChange($event)\"\n    #jsonView\n  >\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-lightest ax-shadow ax-sm ax-px-2\">\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-start\">\n            <span class=\"ax-text-surface-fore ax-font-semibold\">Form Data</span>\n          </div>\n          <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\"></div>\n          <div class=\"ax-flex ax-flex-1 ax-w-16 ax-justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"ax-px-6 ax-text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "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: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -2416,5 +2458,5 @@ var preview_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, 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 };
+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