@acorex/platform 21.0.0-next.39 → 21.0.0-next.40

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

@@ -2,10 +2,10 @@ import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i1$2 from '@acorex/platform/layout/widget-core';
+import * as i1$3 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutBaseWidgetComponent, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
+import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, viewChild, afterNextRender, 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';
@@ -15,30 +15,30 @@ import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as me
 import { AXPBroadcastEventService, AXPPlatformScope, AXPDataSourceDefinitionProviderService } from '@acorex/platform/core';
 import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import * as i2$1 from '@acorex/cdk/common';
+import * as i1$1 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i7 from '@acorex/components/search-box';
+import * as i6 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i6 from '@acorex/components/tabs';
+import * as i5 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXPSettingsService, AXPStickyDirective, AXPClipBoardService } from '@acorex/platform/common';
 import { AXPWidgetItemComponent, AXPStateMessageComponent, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i1$2 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$4 from '@acorex/components/button-group';
+import * as i1$5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
-import * as i3$1 from '@acorex/components/drawer';
+import * as i3 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i5 from '@acorex/components/dropdown-button';
+import * as i5$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import * as i2$2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i1$3 from '@acorex/components/breadcrumbs';
+import * as i1$4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -314,6 +314,15 @@ const AXPDesignerMessageKeys = {
     FormSaved: 'designer-form-saved-content',
 };
 
+/**
+ * Suffixes for `forms:widgets:picker:last-tab:{id}` user settings keys.
+ * Use one id per distinct widget-picker host (different tab strips / widget sets).
+ */
+const AXP_WIDGET_PICKER_TAB_CONTEXT = {
+    layoutDesignerFormElements: 'layout-designer-form-elements',
+    dashboardHome: 'dashboard-home',
+};
+
 class AXPWidgetPickerService {
     constructor() {
         this.popupService = inject(AXPopupService);
@@ -331,6 +340,7 @@ class AXPWidgetPickerService {
             closeButton: true,
             data: {
                 widgets: sortBy(filteredWidgets, (c) => c.title),
+                tabPersistenceContext: options.tabPersistenceContext,
             },
         });
         //
@@ -482,7 +492,10 @@ class AXPDesignerService {
         return undefined;
     }
     async showPicker(currentNode = this.selectedNode()) {
-        const widgets = await this.widgetPickerService.showPicker({ groups: [AXPWidgetGroupEnum.FormElement] });
+        const widgets = await this.widgetPickerService.showPicker({
+            groups: [AXPWidgetGroupEnum.FormElement],
+            tabPersistenceContext: AXP_WIDGET_PICKER_TAB_CONTEXT.layoutDesignerFormElements,
+        });
         const result = [];
         if (widgets.length) {
             widgets.forEach((c) => {
@@ -1290,6 +1303,7 @@ const WIDGET_PICKER_I18N = {
     searchPlaceholder: '@form-template-management:designer.components.widget-picker.search-placeholder',
     selectedCount: '@form-template-management:designer.components.widget-picker.selected-count',
     tabAll: '@form-template-management:designer.components.widget-picker.tab-all',
+    pinnedSectionTitle: '@form-template-management:designer.components.widget-picker.pinned-section-title',
 };
 /**
  * Maps AXPDisplayWidgetConfig to generic AXPWidgetItemData
@@ -1304,23 +1318,33 @@ function mapToWidgetItemData(widget) {
     };
 }
 class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
+    //#endregion
+    //#region ---- Constructor ----
     constructor() {
-        super(...arguments);
+        super();
+        //#region ---- Services & Dependencies ----
+        this.injector = inject(Injector);
         this.settingsService = inject(AXPSettingsService);
         this.mlResolver = inject(AXTranslationService);
         this.pinnedSettingKey = 'forms:widgets:picker:pinned';
+        /** Keeps the line indicator in sync when the selected index is set programmatically (e.g. restored tab). */
+        this.tabsHost = viewChild('tabsHost', ...(ngDevMode ? [{ debugName: "tabsHost" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Class Properties ----
         this.i18n = WIDGET_PICKER_I18N;
         this.searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
-        // Signals
         this.widgets = [];
         this.allWidgets = signal([], ...(ngDevMode ? [{ debugName: "allWidgets" }] : /* istanbul ignore next */ []));
         this.pinnedWidgets = signal([], ...(ngDevMode ? [{ debugName: "pinnedWidgets" }] : /* istanbul ignore next */ []));
+        this.selectedWidgets = signal([], ...(ngDevMode ? [{ debugName: "selectedWidgets" }] : /* istanbul ignore next */ []));
+        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : /* istanbul ignore next */ []));
+        /** Avoid persisting spurious tab events before restore + first paint complete. */
+        this.allowTabPersistence = false;
+        //#endregion
+        //#region ---- Computed Properties ----
         this.displayWidgets = computed(() => {
             return this.allWidgets().map((c) => ({ ...c, pinned: this.pinnedWidgets().includes(c.name) }));
         }, ...(ngDevMode ? [{ debugName: "displayWidgets" }] : /* istanbul ignore next */ []));
-        // Signal to track selected widgets
-        this.selectedWidgets = signal([], ...(ngDevMode ? [{ debugName: "selectedWidgets" }] : /* istanbul ignore next */ []));
-        // Computed for filtered and ordered widget list
         this.orderedList = computed(() => {
             const search = this.searchTerm().toLowerCase();
             const selectedTabName = this.selectedTab().name;
@@ -1332,33 +1356,163 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
                 return matchesTab && matchesSearch;
             }), [(w) => w.pinned, (w) => this.mlResolver.resolve(w.title)], ['desc', 'asc']);
         }, ...(ngDevMode ? [{ debugName: "orderedList" }] : /* istanbul ignore next */ []));
-        // Pinned and regular lists
         this.pinnedList = computed(() => this.orderedList().filter((c) => c.pinned), ...(ngDevMode ? [{ debugName: "pinnedList" }] : /* istanbul ignore next */ []));
         this.regularList = computed(() => this.orderedList().filter((c) => !c.pinned), ...(ngDevMode ? [{ debugName: "regularList" }] : /* istanbul ignore next */ []));
-        // Mapped data for generic widget items
         this.pinnedWidgetItems = computed(() => this.pinnedList().map(mapToWidgetItemData), ...(ngDevMode ? [{ debugName: "pinnedWidgetItems" }] : /* istanbul ignore next */ []));
-        this.regularWidgetItems = computed(() => this.regularList().map(mapToWidgetItemData), ...(ngDevMode ? [{ debugName: "regularWidgetItems" }] : /* istanbul ignore next */ []));
-        // Tabs for the widget groups
+        this.regularGroupedSections = computed(() => {
+            const tabName = this.selectedTab().name;
+            const list = this.regularList();
+            if (tabName === 'all') {
+                return this.buildAllTabSections(list);
+            }
+            return this.buildCategoryTabSections(list);
+        }, ...(ngDevMode ? [{ debugName: "regularGroupedSections" }] : /* istanbul ignore next */ []));
         this.categories = computed(() => uniqBy(this.allWidgets()
             .map((w) => castArray(w.categories ?? []))
             .filter((c) => c.length > 0)
             .flat(), 'name'), ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
         this.tabs = computed(() => orderBy([{ name: 'all', title: WIDGET_PICKER_I18N.tabAll, order: 0 }, ...this.categories()], (c) => c.order), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-        // 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)), ...(ngDevMode ? [{ debugName: "maxVisibleWidgets" }] : /* istanbul ignore next */ []));
-        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : /* istanbul ignore next */ []));
+        this.maxVisibleWidgets = computed(() => Math.max(1, ...this.categories().map((cat) => this.allWidgets().filter((w) => castArray(w.categories ?? []).some((wc) => wc.name === cat.name)).length)), ...(ngDevMode ? [{ debugName: "maxVisibleWidgets" }] : /* istanbul ignore next */ []));
         this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()], ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+        this.pickerShellClass = computed(() => `axp-designer-widget-picker ax-flex ax-flex-col ax-h-[95vh] ${this.maxVisibleWidgets() > 10 ? 'lg:ax-h-[75vh]' : 'lg:ax-h-[50vh]'}`, ...(ngDevMode ? [{ debugName: "pickerShellClass" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.allowTabPersistence = true;
+        }, { injector: this.injector });
     }
+    //#endregion
+    //#region ---- Lifecycle Methods ----
     async ngOnInit() {
         super.ngOnInit();
         this.allWidgets.set(this.widgets);
         this.pinnedWidgets.set((await this.settingsService.get(this.pinnedSettingKey)) || []);
+        await this.restoreLastTabFromSettings();
+    }
+    //#endregion
+    //#region ---- Tab persistence (user settings) ----
+    lastTabSettingKey(context) {
+        return `forms:widgets:picker:last-tab:${context}`;
+    }
+    async restoreLastTabFromSettings() {
+        const ctx = this.tabPersistenceContext;
+        if (!ctx) {
+            return;
+        }
+        const saved = await this.settingsService.get(this.lastTabSettingKey(ctx));
+        if (!saved) {
+            return;
+        }
+        const idx = this.tabs().findIndex((t) => t.name === saved);
+        if (idx >= 0) {
+            this.currentTabIndex.set(idx);
+            this.syncTabsStripToIndex(idx);
+        }
+    }
+    /**
+     * `ax-tab-item` [active] updates labels, but `ax-tabs` keeps the underline from its own index until `select` runs.
+     */
+    syncTabsStripToIndex(index) {
+        afterNextRender(() => {
+            this.tabsHost()?.select(index);
+        }, { injector: this.injector });
+    }
+    async persistTabSelection(tabIndex) {
+        const ctx = this.tabPersistenceContext;
+        if (!ctx) {
+            return;
+        }
+        const tab = this.tabs()[tabIndex];
+        if (!tab) {
+            return;
+        }
+        await this.settingsService.scope(AXPPlatformScope.User).set(this.lastTabSettingKey(ctx), tab.name);
     }
-    handleTabChange(event) {
+    //#endregion
+    //#region ---- Grouped sections (All = parent only; category tab = sub-category) ----
+    /**
+     * Picks the primary parent category for the "All" tab (lowest `order` wins).
+     */
+    primaryCategory(widget) {
+        const cats = castArray(widget.categories ?? []);
+        if (cats.length === 0) {
+            return null;
+        }
+        return orderBy(cats, (c) => c.order)[0];
+    }
+    buildAllTabSections(list) {
+        const categoryMeta = this.categories();
+        const withCat = list.filter((w) => castArray(w.categories ?? []).length > 0);
+        const withoutCat = list.filter((w) => castArray(w.categories ?? []).length === 0);
+        const byPrimaryName = new Map();
+        for (const w of withCat) {
+            const primary = this.primaryCategory(w);
+            if (primary == null) {
+                continue;
+            }
+            const key = primary.name;
+            const bucket = byPrimaryName.get(key) ?? [];
+            bucket.push(w);
+            byPrimaryName.set(key, bucket);
+        }
+        const orderedNames = orderBy([...byPrimaryName.keys()], (name) => categoryMeta.find((c) => c.name === name)?.order ?? 999);
+        const sections = orderedNames.map((name) => {
+            const cat = categoryMeta.find((c) => c.name === name);
+            const widgets = orderBy(byPrimaryName.get(name), (w) => this.mlResolver.resolve(w.title), 'asc');
+            return {
+                trackKey: `cat:${name}`,
+                title: cat?.title ?? null,
+                widgetItems: widgets.map(mapToWidgetItemData),
+            };
+        });
+        if (withoutCat.length > 0) {
+            const widgets = orderBy(withoutCat, (w) => this.mlResolver.resolve(w.title), 'asc');
+            sections.push({
+                trackKey: 'cat:uncategorized',
+                title: null,
+                widgetItems: widgets.map(mapToWidgetItemData),
+            });
+        }
+        return sections;
+    }
+    buildCategoryTabSections(list) {
+        const withSub = list.filter((w) => w.subCategory != null);
+        const withoutSub = list.filter((w) => w.subCategory == null);
+        const bySubName = new Map();
+        for (const w of withSub) {
+            const key = w.subCategory.name;
+            const bucket = bySubName.get(key) ?? [];
+            bucket.push(w);
+            bySubName.set(key, bucket);
+        }
+        const orderedSubNames = orderBy([...bySubName.keys()], (k) => bySubName.get(k)[0].subCategory.order);
+        const sections = orderedSubNames.map((name) => {
+            const widgets = orderBy(bySubName.get(name), (w) => this.mlResolver.resolve(w.title), 'asc');
+            const sub = widgets[0].subCategory;
+            return {
+                trackKey: `sub:${name}`,
+                title: sub.title,
+                widgetItems: widgets.map(mapToWidgetItemData),
+            };
+        });
+        if (withoutSub.length > 0) {
+            const widgets = orderBy(withoutSub, (w) => this.mlResolver.resolve(w.title), 'asc');
+            sections.push({
+                trackKey: 'sub:ungrouped',
+                title: null,
+                widgetItems: widgets.map(mapToWidgetItemData),
+            });
+        }
+        return sections;
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    async handleTabChange(event) {
         const indx = event.index;
         if (this.currentTabIndex() != indx) {
             this.currentTabIndex.set(indx);
         }
+        if (this.allowTabPersistence) {
+            await this.persistTabSelection(indx);
+        }
     }
     handleWidgetClick(clickEvent) {
         const { event, widget } = clickEvent;
@@ -1367,16 +1521,13 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
             const currentSelection = this.selectedWidgets();
             const isAlreadySelected = currentSelection.some((w) => w === originalWidget);
             if (isAlreadySelected) {
-                // Deselect widget if already selected
                 this.selectedWidgets.set(currentSelection.filter((w) => w !== originalWidget));
             }
             else {
-                // Add widget to selection
                 this.selectedWidgets.set([...currentSelection, originalWidget]);
             }
         }
         else {
-            // If CTRL is not pressed, select only the clicked widget
             this.close({ widgets: [originalWidget] });
         }
     }
@@ -1384,9 +1535,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         const { widget } = clickEvent;
         const originalWidget = widget.data;
         originalWidget.pinned = !originalWidget.pinned;
-        // Get the current list of pinned widgets from settings
         let pinnedWidgets = (await this.settingsService.get(this.pinnedSettingKey)) || [];
-        // Update the list of pinned widgets based on the pinned status
         if (originalWidget.pinned) {
             if (!pinnedWidgets.includes(originalWidget.name)) {
                 pinnedWidgets.push(originalWidget.name);
@@ -1395,25 +1544,23 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         else {
             pinnedWidgets = pinnedWidgets.filter((name) => name !== originalWidget.name);
         }
-        // Save the updated list of pinned widgets
         await this.settingsService.scope(AXPPlatformScope.User).set(this.pinnedSettingKey, pinnedWidgets);
-        // Trigger a re-render of the widgets
         this.pinnedWidgets.set(pinnedWidgets);
     }
-    // Check if a widget is selected
+    handleConfirmSelection() {
+        this.close({ widgets: this.selectedWidgets() });
+    }
+    //#endregion
+    //#region ---- Selection state ----
     isWidgetSelected(widget) {
         return this.selectedWidgets().includes(widget);
     }
-    // Check if a generic widget item is selected
     isWidgetItemSelected(widgetItem) {
         const originalWidget = widgetItem.data;
         return this.isWidgetSelected(originalWidget);
     }
-    handleConfirmSelection() {
-        this.close({ widgets: this.selectedWidgets() });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"$index.toString()\"\n          [active]=\"currentTabIndex() === $index\"\n        ></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]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\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      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n          <axp-widget-item\n            [widget]=\"widgetItem\"\n            [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n            (onWidgetClick)=\"handleWidgetClick($event)\"\n            (onPinClick)=\"handleWidgetPinClick($event)\"\n          >\n          </axp-widget-item>\n        }\n      </div>\n      @if (pinnedWidgetItems().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 (widgetItem of regularWidgetItems(); track $any(widgetItem.data).name) {\n          <axp-widget-item\n            [widget]=\"widgetItem\"\n            [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n            (onWidgetClick)=\"handleWidgetClick($event)\"\n            (onPinClick)=\"handleWidgetPinClick($event)\"\n          >\n          </axp-widget-item>\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]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "autoSearch"], 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"] }, { kind: "component", type: AXPWidgetItemComponent, selector: "axp-widget-item", inputs: ["widget", "isSelected", "showPinButton", "customClasses"], outputs: ["onWidgetClick", "onPinClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, viewQueries: [{ propertyName: "tabsHost", first: true, predicate: ["tabsHost"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></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]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\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      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\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]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: [".axp-designer-widget-picker__group-heading{margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem;padding-bottom:.25rem}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}.axp-designer-widget-picker__group-line{min-width:1rem;flex:1 1 0%;border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}.axp-designer-widget-picker__section{margin-top:1.5rem;padding-top:.25rem}.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], 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"] }, { kind: "component", type: AXPWidgetItemComponent, selector: "axp-widget-item", inputs: ["widget", "isSelected", "showPinButton", "customClasses"], outputs: ["onWidgetClick", "onPinClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
@@ -1428,8 +1575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPStickyDirective,
                         AXPWidgetItemComponent,
                         AXTranslationModule,
-                    ], 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\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"$index.toString()\"\n          [active]=\"currentTabIndex() === $index\"\n        ></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]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\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      <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n        @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n          <axp-widget-item\n            [widget]=\"widgetItem\"\n            [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n            (onWidgetClick)=\"handleWidgetClick($event)\"\n            (onPinClick)=\"handleWidgetPinClick($event)\"\n          >\n          </axp-widget-item>\n        }\n      </div>\n      @if (pinnedWidgetItems().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 (widgetItem of regularWidgetItems(); track $any(widgetItem.data).name) {\n          <axp-widget-item\n            [widget]=\"widgetItem\"\n            [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n            (onWidgetClick)=\"handleWidgetClick($event)\"\n            (onPinClick)=\"handleWidgetPinClick($event)\"\n          >\n          </axp-widget-item>\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]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n" }]
-        }], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }] } });
+                    ], encapsulation: ViewEncapsulation.None, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></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]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\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      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"ax-grid ax-grid-cols-2 ax-gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\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]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: [".axp-designer-widget-picker__group-heading{margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem;padding-bottom:.25rem}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1))}.axp-designer-widget-picker__group-line{min-width:1rem;flex:1 1 0%;border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}.axp-designer-widget-picker__section{margin-top:1.5rem;padding-top:.25rem}.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabsHost: [{ type: i0.ViewChild, args: ['tabsHost', { isSignal: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }] } });
 
 var widgetPicker_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1894,7 +2041,7 @@ class AXPDesignerBoardComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
@@ -1928,14 +2075,14 @@ class AXPDesignerBreadcrumbsComponent {
     <ax-breadcrumbs>
       @for( b of service.breadcrumbs();track $index){
       <ax-breadcrumbs-item>
-        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) }}</a>
+        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) | translate | async }}</a>
       </ax-breadcrumbs-item>
       }
       <ng-template #divider>
         <i class="ax-icon ax-icon-chevron-right"></i>
       </ng-template>
     </ax-breadcrumbs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$3.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$3.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -1945,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     <ax-breadcrumbs>
       @for( b of service.breadcrumbs();track $index){
       <ax-breadcrumbs-item>
-        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) }}</a>
+        <a (click)="handleClick(b)" (mouseover)="handleMouseOver(b)"> {{ getTitle(b) | translate | async }}</a>
       </ax-breadcrumbs-item>
       }
       <ng-template #divider>
@@ -1955,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPWidgetCoreModule, AXBreadcrumbsModule, AXDecoratorModule]
+                    imports: [AXPWidgetCoreModule, AXBreadcrumbsModule, AXDecoratorModule, AXTranslationModule, AsyncPipe]
                 }]
         }] });
 
@@ -2016,7 +2163,7 @@ class AXPDesignerHistoryComponent {
         this.service = inject(AXPDesignerService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.ax-italic]=\"step.isFuture\"\n            [class.ax-text-neutral-400]=\"step.isFuture\"\n            [class.ax-state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n            {{ step.description }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-history\"\n        [title]=\"'@layout-designer:components.history.empty-states.no-changes.title'\"\n        [description]=\"'@layout-designer:components.history.empty-states.no-changes.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.ax-italic]=\"step.isFuture\"\n            [class.ax-text-neutral-400]=\"step.isFuture\"\n            [class.ax-state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"ax-me-1\" [ngClass]=\"step.icon\"></i>\n            {{ step.description }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-history\"\n        [title]=\"'@layout-designer:components.history.empty-states.no-changes.title'\"\n        [description]=\"'@layout-designer:components.history.empty-states.no-changes.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
             type: Component,
@@ -2069,7 +2216,7 @@ class AXPDesignerOutlineComponent {
         this.service.focus({ widget: node });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n        @for (node of root().children; track $index) {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div\n            [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\"\n          >\n            <span class=\"ax-w-5\">\n              @if (item.children?.length) {\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-chevron-right]=\"isCollapsed(item)\"\n                  (click)=\"handleToggleClick($event, item)\"\n                  [class.fa-chevron-down]=\"!isCollapsed(item)\"\n                ></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"ax-w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2 ax-justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-shapes\"\n        [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\"\n        [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\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: AXDecoratorModule }, { 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: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <ul class=\"ax-space-y-1 ax-p-1 ax-text-white ax-text-sm\">\n        @for (node of root().children; track $index) {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div\n            [class.ax-bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"ax-flex ax-flex-row ax-items-center ax-cursor-pointer ax-transition ax-duration-150 ax-ease-in-out ax-hover:bg-gray-700 ax-py-1 ax-px-2 ax-rounded-sm ax-group\"\n          >\n            <span class=\"ax-w-5\">\n              @if (item.children?.length) {\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-chevron-right]=\"isCollapsed(item)\"\n                  (click)=\"handleToggleClick($event, item)\"\n                  [class.fa-chevron-down]=\"!isCollapsed(item)\"\n                ></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"ax-w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"ax-truncate ax-flex-1 ax-pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"ax-invisible group-hover:ax-visible ax-flex ax-gap-2 ax-justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:ax-text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:ax-text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"ax-space-y-1 ax-ps-3 ax-text-white ax-text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-shapes\"\n        [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\"\n        [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
             type: Component,
@@ -2212,7 +2359,7 @@ class AXPDesignerViewSizeToolbarComponent {
         <ax-icon class="fa-light fa-mobile fa-fw "></ax-icon>
       </ax-button-group-item>
     </ax-button-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$4.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$4.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$5.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXMenuModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDesignerViewSizeToolbarComponent, decorators: [{
             type: Component,
@@ -2256,7 +2403,7 @@ class AXPLayoutDesignerComponent {
         return styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/images/logos/icon-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { 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", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.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: "21.2.9", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"ax-h-full ax-w-full ax-flex ax-relative ax-overflow-hidden\">\n  <ax-content class=\"ax-contents\">\n    <!-- Toolbar Side -->\n    <div class=\"ax-min-w-10 ax-bg-lightest ax-border-e ax-sm ax-flex ax-flex-col ax-items-center ax-dark\">\n      <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-border-b\">\n        <img src=\"assets/images/logos/icon-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title | translate | async }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], 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", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -2280,7 +2427,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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/images/logos/icon-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"] }]
+                        AXTranslationModule,
+                    ], 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/images/logos/icon-light.svg\" class=\"ax-w-6\" />\n      </div>\n      <div class=\"ax-py-1\"></div>\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"datasources.toggle()\" title=\"Data Sources\">\n          <ax-icon class=\"fa-solid fa-database ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left ax-text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey ax-text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"ax-col-span-10 ax-flex ax-flex-col ax-flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-b ax-flex ax-justify-between ax-px-2 ax-dark\">\n        <div class=\"ax-flex ax-flex-1 ax-items-center ax-text-white ax-justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-center\">\n          <axp-designer-view-sizes [(size)]=\"service.size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"ax-flex ax-flex-1 ax-flex-row ax-gap-2 ax-sm ax-items-center ax-justify-end\">\n          <ax-dropdown-button mode=\"split\" look=\"solid\" text=\"Preview\" class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\">\n            <ax-button-item-list>\n              <ax-button-item text=\"Open in new window\" (onClick)=\"service.openPreviewWindow()\">\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"ax-w-full ax-flex-1\">\n        <!-- Pages -->\n        <ax-drawer #pages location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer #datasources location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer #outline location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer #history location=\"start\" mode=\"push\" class=\"ax-dark ax-bg-lightest\">\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light ax-bg-lighter ax-flex ax-justify-center ax-p-10\">\n          <axp-designer-board class=\"ax-rounded-lg ax-bg-lightest ax-shadow-md\"> </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-h-10 ax-bg-lightest ax-border-t ax-flex ax-items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"ax-border-default  ax-p-2 ax-font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer class=\"ax-dark axp-designer-prop-side\" location=\"end\" mode=\"push\" [collapsed]=\"false\" #pd>\n    <ax-content class=\"ax-flex ax-flex-col ax-h-full ax-overflow-hidden \">\n      <div class=\"ax-flex ax-flex-row ax-w-full ax-justify-between ax-text-white ax-px-4 ax-border-b ax-h-10\">\n        <div class=\"ax-flex ax-flex-row ax-gap-2 ax-items-center\">\n          <i [ngClass]=\"nodeConfig()?.icon\"></i>\n          <span class=\"ax-font-semibold\">{{ nodeConfig()?.title | translate | async }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer [mode]=\"'advanced'\" [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"service.update({ values: $event.values, mode: $event.mode })\" class=\"ax-flex-1 ax-overflow-auto\">\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.75rem}axp-layout-designer .axp-designer-board ax-drawer{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:dashed;outline-width:1px;outline-offset:2px;outline-color:#d1d5db}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{cursor:pointer;position:relative}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-lightest-surface),1);outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:dashed;outline-width:2px;outline-offset:2px;outline-color:#d946ef}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:#60a5fa}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1 1 0%;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}axp-layout-designer .axp-designer-board .axp-page-widget-header:hover,axp-layout-designer .axp-designer-board .axp-page-widget-footer:hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:.5rem}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:.5rem}axp-layout-designer .axp-designer-prop-side{width:20rem;border-inline-start-width:1px;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-designer-drawer-content ul.axp-designer-drawer-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:.125rem;padding:.25rem .5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li.ax-state-selected{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:1rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], propertyViewer: [{
                 type: ViewChild,
                 args: [AXPWidgetPropertyViewerComponent, { static: true }]
@@ -2328,7 +2476,7 @@ class AXPLayoutDesignerPreviewViewerComponent {
     <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
       <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
     </axp-widgets-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, decorators: [{
             type: Component,
@@ -2458,7 +2606,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         await this.settings.scope(AXPPlatformScope.User).set(this.jsonSettingsKey, !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-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>", styles: [""], dependencies: [{ 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", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"ax-w-1/3 ax-border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark ax-flex ax-flex-col ax-h-full ax-relative ax-bg-default\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-h-12 ax-bg-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>", styles: [""], dependencies: [{ 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.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
             type: Component,
@@ -2482,5 +2630,5 @@ var preview_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, cloneWidgetMenu };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, AXP_WIDGET_PICKER_TAB_CONTEXT, cloneWidgetMenu };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map