@acorex/platform 20.6.0-next.9 → 20.6.0

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

@@ -1,4 +1,4 @@
-import * as i5$1 from '@acorex/components/button';
+import * as i5$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1$2 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
@@ -15,18 +15,18 @@ import { AXPWorkflowService } from '@acorex/platform/workflow';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, untracked, EventEmitter, Output, linkedSignal, HostListener, ViewChildren, Input } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, EventEmitter, untracked, Output, linkedSignal, HostListener, ViewChildren, Input } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import * as i1 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
-import * as i4$2 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i2$2 from '@acorex/components/tree-view';
-import { AXTreeViewModule } from '@acorex/components/tree-view';
 import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i5$1 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i2$2 from '@acorex/components/tree-view-legacy';
+import { AXTreeViewLegacyModule } from '@acorex/components/tree-view-legacy';
 import * as i2$3 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import * as i3 from '@acorex/components/switch';
@@ -35,37 +35,37 @@ import * as i3$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { cloneDeep, sortBy, isEmpty, isNil, isEqual, camelCase, merge, capitalize, unionBy, isArray, set } from 'lodash-es';
-import * as i2$5 from '@acorex/components/form';
+import { cloneDeep, sortBy, isNil, isEmpty, merge, unionBy, isArray, set, isEqual, get, camelCase, capitalize } from 'lodash-es';
+import * as i2$6 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i4$4 from '@acorex/components/text-box';
+import * as i4$3 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i2$4 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i3$1 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import * as i3$2 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
-import * as i4$3 from '@acorex/components/data-table';
+import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetGroupEnum, createStringProperty, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
+import * as i4$2 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXPopupService } from '@acorex/components/popup';
 import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
-import * as i5$2 from '@acorex/components/select-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i1$3 from '@acorex/components/accordion';
 import { AXAccordionModule } from '@acorex/components/accordion';
-import * as i2$6 from '@acorex/components/tabs';
+import * as i2$5 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
+import * as i5$3 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i7 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i5$3 from '@acorex/components/tag-box';
+import * as i5$4 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
-import { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
+import { AXPFilterOperatorMiddlewareService, AXPSettingService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
 import * as i1$4 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
 import * as i3$4 from '@acorex/components/toolbar';
@@ -786,7 +786,7 @@ class AXPCategoryTreeComponent {
                 title: '@general:terms.interface.selection.all-items',
                 description: '',
                 parentId: undefined,
-                childCount: 0,
+                childrenCount: 0,
                 expand: true,
                 children: [],
             },
@@ -873,7 +873,7 @@ class AXPCategoryTreeComponent {
             title: node.title,
             description: node.description,
             parentId: node.parentId,
-            childCount: node.childCount
+            childrenCount: node.childrenCount,
         };
         this.nodeClick.emit(entity);
         this.events().onNodeClick?.(entity);
@@ -886,7 +886,7 @@ class AXPCategoryTreeComponent {
             title: node.title,
             description: node.description,
             parentId: node.parentId,
-            childCount: node.childCount
+            childrenCount: node.childrenCount,
         };
         this.collapseChange.emit(entity);
         this.events().onCollapseChange?.(entity);
@@ -925,7 +925,7 @@ class AXPCategoryTreeComponent {
             title: node.title,
             description: node.description,
             parentId: node.parentId,
-            childCount: node.childCount
+            childrenCount: node.childrenCount,
         };
         this.nodeCreate.emit(entity);
         this.events().onNodeCreate?.(entity);
@@ -939,7 +939,7 @@ class AXPCategoryTreeComponent {
             title: node.title,
             description: node.description,
             parentId: node.parentId,
-            childCount: node.childCount
+            childrenCount: node.childrenCount,
         };
         this.nodeUpdate.emit(entity);
         this.events().onNodeUpdate?.(entity);
@@ -953,7 +953,7 @@ class AXPCategoryTreeComponent {
             title: node.title,
             description: node.description,
             parentId: node.parentId,
-            childCount: node.childCount
+            childrenCount: node.childrenCount,
         };
         this.nodeDelete.emit(entity);
         this.events().onNodeDelete?.(entity);
@@ -961,11 +961,11 @@ class AXPCategoryTreeComponent {
     //#endregion
     //#region ----   Utility Methods   ----
     convertEntitiesToTreeNodes(entities) {
-        return entities.map(entity => ({
+        return entities.map((entity) => ({
             ...entity,
-            children: entity.childCount > 0 ? [] : undefined, // Set children to empty array if has children, undefined if no children
+            children: entity.childrenCount > 0 ? [] : undefined, // Set children to empty array if has children, undefined if no children
             expand: false,
-            hasChild: entity.childCount > 0, // Set hasChild based on childCount
+            hasChild: entity.childrenCount > 0, // Set hasChild based on childrenCount
         }));
     }
     updateNodeChildren(parentId, children) {
@@ -1022,14 +1022,14 @@ class AXPCategoryTreeComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"actions().createChildLabel || 'Add New Child'\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"actions().updateLabel || 'Edit'\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"actions().deleteLabel || 'Delete'\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$2.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.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: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"actions().createChildLabel || 'Add New Child'\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"actions().updateLabel || 'Edit'\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"actions().deleteLabel || 'Delete'\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.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: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i5$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-category-tree', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         AXDecoratorModule,
-                        AXTreeViewModule,
+                        AXTreeViewLegacyModule,
                         AXSkeletonModule,
                         AXPThemeLayoutBlockComponent,
                         AXSearchBoxModule,
@@ -1039,7 +1039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXButtonModule,
                         AXDropdownModule,
                         AXPStateMessageComponent,
-                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"actions().createChildLabel || 'Add New Child'\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"actions().updateLabel || 'Edit'\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"actions().deleteLabel || 'Delete'\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n" }]
+                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"actions().createChildLabel || 'Add New Child'\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"actions().updateLabel || 'Edit'\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"actions().deleteLabel || 'Delete'\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n" }]
         }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeCreate: [{ type: i0.Output, args: ["nodeCreate"] }], nodeUpdate: [{ type: i0.Output, args: ["nodeUpdate"] }], nodeDelete: [{ type: i0.Output, args: ["nodeDelete"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
 
 //#region ----   Tree Node Interface   ----
@@ -1069,10 +1069,14 @@ class AXPColorPalettePickerComponent {
          * Make the palette readonly
          */
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        /**
+         * Show empty/null option to clear selection
+         */
+        this.allowClear = input(true, ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
         //#endregion
         //#region ----   Outputs   ----
         /**
-         * Emits when a color is selected
+         * Emits when a color is selected or cleared (null/undefined)
          */
         this.colorSelected = output();
     }
@@ -1088,12 +1092,12 @@ class AXPColorPalettePickerComponent {
         this.colorSelected.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPColorPalettePickerComponent, isStandalone: true, selector: "axp-color-palette-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<div class=\"axp-color-palette-picker\">\n    <div class=\"__swatches\">\n        @for (color of colors(); track color) {\n        <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n            [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n            [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n            @if (selectedColor() === color) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n    </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPColorPalettePickerComponent, isStandalone: true, selector: "axp-color-palette-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<div class=\"axp-color-palette-picker\">\n    <div class=\"__swatches\">\n        @if (allowClear()) {\n        <button type=\"button\" class=\"__swatch __empty\"\n            [class.__selected]=\"selectedColor() === null || selectedColor() === undefined\"\n            [class.__disabled]=\"disabled() || readonly()\" [disabled]=\"disabled() || readonly()\"\n            (click)=\"handleColorSelect(null)\">\n            @if (selectedColor() === null || selectedColor() === undefined) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            } @else {\n            <svg class=\"__clear-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n        @for (color of colors(); track color) {\n        <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n            [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n            [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n            @if (selectedColor() === color) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n    </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}.axp-color-palette-picker .__swatches .__swatch.__empty{border-width:2px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-color:var(--ax-color-border);background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,var(--ax-color-border) 2px,var(--ax-color-border) 4px)}.axp-color-palette-picker .__swatches .__swatch.__empty:hover:not(.__disabled){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty .__clear-icon{height:1rem;width:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty.__selected .__checkmark{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPalettePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-color-palette-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"axp-color-palette-picker\">\n    <div class=\"__swatches\">\n        @for (color of colors(); track color) {\n        <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n            [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n            [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n            @if (selectedColor() === color) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n    </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"] }]
-        }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], colorSelected: [{ type: i0.Output, args: ["colorSelected"] }] } });
+            args: [{ selector: 'axp-color-palette-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"axp-color-palette-picker\">\n    <div class=\"__swatches\">\n        @if (allowClear()) {\n        <button type=\"button\" class=\"__swatch __empty\"\n            [class.__selected]=\"selectedColor() === null || selectedColor() === undefined\"\n            [class.__disabled]=\"disabled() || readonly()\" [disabled]=\"disabled() || readonly()\"\n            (click)=\"handleColorSelect(null)\">\n            @if (selectedColor() === null || selectedColor() === undefined) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            } @else {\n            <svg class=\"__clear-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n        @for (color of colors(); track color) {\n        <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n            [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n            [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n            @if (selectedColor() === color) {\n            <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" />\n            </svg>\n            }\n        </button>\n        }\n    </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}.axp-color-palette-picker .__swatches .__swatch.__empty{border-width:2px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-color:var(--ax-color-border);background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,var(--ax-color-border) 2px,var(--ax-color-border) 4px)}.axp-color-palette-picker .__swatches .__swatch.__empty:hover:not(.__disabled){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty .__clear-icon{height:1rem;width:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty.__selected .__checkmark{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}\n"] }]
+        }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], colorSelected: [{ type: i0.Output, args: ["colorSelected"] }] } });
 
 class AXPColumnItemListComponent {
     constructor() {
@@ -1160,7 +1164,7 @@ class AXPColumnItemListComponent {
         </div>
       </div>
     </ax-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
             type: Component,
@@ -1360,7 +1364,7 @@ class AXPCompareViewComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;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-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;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-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),.05)}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),.05)}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
@@ -1382,7 +1386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXTranslationModule,
                         // Platform
                         AXPWidgetCoreModule
-                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;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-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;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-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),.05)}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),.05)}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
         }], propDecorators: { inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 class AXPComponentSlot {
@@ -1593,8 +1597,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 
 //#endregion
 class AXPDataSelectorComponent extends AXBasePageComponent {
+    //#endregion
     constructor() {
-        super(...arguments);
+        super();
         //#region ----   Properties   ----
         this.config = signal({
             title: '',
@@ -1602,30 +1607,29 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             columns: [],
             selectionMode: 'single',
             searchFields: [],
+            initialSearchTerm: undefined,
             parentField: undefined,
             allowCreate: false,
             filters: undefined
         }, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.searchTerm = '';
+        this.searchPlaceholderText = signal('', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : []));
         this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
         this.initialSelectedItems = [];
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         // Category Filter State
         this.activeCategoryFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeCategoryFilter" }] : []));
+        this.placeholderUpdateToken = 0;
+        this.initialSearchApplied = false;
         //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.translationService = inject(AXTranslationService);
         //#region ----   Computed Properties   ----
         this.allowSelect = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "allowSelect" }] : []));
         this.hasSearch = computed(() => {
             const searchFields = this.config().searchFields;
             return searchFields && searchFields.length > 0;
         }, ...(ngDevMode ? [{ debugName: "hasSearch" }] : []));
-        this.searchPlaceholder = computed(() => {
-            const searchFields = this.config().searchFields;
-            if (!searchFields || searchFields.length === 0) {
-                return 'Search...';
-            }
-            return `Search in ${searchFields.join(', ')}...`;
-        }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
         // Category Tree Configuration
         this.categoryTreeConfig = computed(() => ({
             textField: 'title',
@@ -1644,6 +1648,18 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             canDelete: false,
             canCreateChild: false,
         }), ...(ngDevMode ? [{ debugName: "categoryTreeActions" }] : []));
+        effect(() => {
+            const searchFields = this.config().searchFields;
+            void this.updateSearchPlaceholder(searchFields);
+        });
+        effect(() => {
+            const initialTerm = this.config().initialSearchTerm ?? '';
+            if (!this.initialSearchApplied && initialTerm && initialTerm.trim().length > 0) {
+                this.initialSearchApplied = true;
+                this.searchTerm = initialTerm;
+                queueMicrotask(() => this.applySearchFilter(initialTerm));
+            }
+        });
     }
     //#endregion
     //#region ----   Lifecycle Methods   ----
@@ -1692,7 +1708,9 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
     }
     handleChangeSearchValue(e) {
         if (e.isUserInteraction) {
-            this.applySearchFilter(e.value);
+            const value = e.value ?? '';
+            this.searchTerm = value;
+            this.applySearchFilter(value);
         }
     }
     async handleCreateNewClick() {
@@ -1742,7 +1760,8 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         if (!searchFields || searchFields.length === 0) {
             return;
         }
-        if (isEmpty(searchTerm) || isNil(searchTerm)) {
+        const normalizedTerm = isNil(searchTerm) ? '' : `${searchTerm}`.trim();
+        if (isEmpty(normalizedTerm)) {
             // Apply only base filters when search is cleared
             const baseFilters = this.config().filters;
             if (baseFilters) {
@@ -1756,14 +1775,20 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
         // Get base filters from config
         const baseFilters = this.config().filters;
-        // Create search filter
-        const searchFilter = {
-            field: 'title',
-            value: searchTerm,
+        // Create search filters for all configured fields
+        const searchFilters = searchFields.map((field) => ({
+            field: field.name,
+            value: normalizedTerm,
             operator: { type: 'contains' }
+        }));
+        const orFilter = {
+            field: null,
+            logic: 'or',
+            operator: null,
+            filters: searchFilters
         };
         // Merge base filters with search filter
-        const allFilters = baseFilters ? [baseFilters, searchFilter] : [searchFilter];
+        const allFilters = baseFilters ? [baseFilters, orFilter] : [orFilter];
         const filter = {
             field: null,
             logic: 'and',
@@ -1808,8 +1833,36 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         this.config().dataSource.filter(filter);
         this.config().dataSource.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n      <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n        <axp-category-tree\n          [dataSource]=\"config().categoryFilter!.dataSource\"\n          [config]=\"categoryTreeConfig()\"\n          [actions]=\"categoryTreeActions()\"\n          (nodeClick)=\"handleCategoryFilterClick($event)\"\n        >\n        </axp-category-tree>\n      </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n        <div class=\"ax-w-full ax-mb-2\">\n          <ax-search-box\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm\"\n            (onValueChanged)=\"handleChangeSearchValue($event)\"\n            [axAutoFocus]=\"true\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </div>\n      }\n\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-h-[50vh]\"\n        [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\n        @if (config().selectionMode === 'multiple') {\n          <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n          @if (col.visible) {\n            <axp-widget-column-renderer\n              [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n              [caption]=\"col.title | translate | async\"\n              [node]=\"{\n                path: col.dataPath || col.name,\n                type: col.widget.type,\n                options: col.widget.options,\n              }\"\n            >\n            </axp-widget-column-renderer>\n          }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\"\n    >\n    </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$3.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    async updateSearchPlaceholder(searchFields) {
+        const updateToken = ++this.placeholderUpdateToken;
+        if (!searchFields || searchFields.length === 0) {
+            const fallback = await this.translationService.translateAsync('@general:actions.search.title');
+            if (updateToken !== this.placeholderUpdateToken) {
+                return;
+            }
+            const placeholder = fallback ? `${fallback}...` : '';
+            this.searchPlaceholderText.set(placeholder);
+            return;
+        }
+        const translatedFields = await Promise.all(searchFields.map(async (field) => {
+            const translated = await this.translationService.translateAsync(field.title || field.name);
+            return translated ?? field.title ?? field.name;
+        }));
+        const fieldsText = translatedFields
+            .filter((value) => Boolean(value && value.trim().length > 0))
+            .join(', ') || searchFields.map((field) => field.title || field.name).join(', ');
+        const placeholder = await this.translationService.translateAsync('@general:widgets.lookup.search-placeholder', {
+            params: {
+                fields: fieldsText
+            }
+        });
+        if (updateToken !== this.placeholderUpdateToken) {
+            return;
+        }
+        this.searchPlaceholderText.set(placeholder ?? `Search in ${fieldsText}...`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        @if (config().selectionMode === 'multiple') {\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowDetailsTemplate", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.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: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -1826,8 +1879,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXTranslationModule,
                         AXBadgeModule,
                         AXPCategoryTreeComponent,
-                    ], inputs: [], template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n      <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n        <axp-category-tree\n          [dataSource]=\"config().categoryFilter!.dataSource\"\n          [config]=\"categoryTreeConfig()\"\n          [actions]=\"categoryTreeActions()\"\n          (nodeClick)=\"handleCategoryFilterClick($event)\"\n        >\n        </axp-category-tree>\n      </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n        <div class=\"ax-w-full ax-mb-2\">\n          <ax-search-box\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm\"\n            (onValueChanged)=\"handleChangeSearchValue($event)\"\n            [axAutoFocus]=\"true\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </div>\n      }\n\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-h-[50vh]\"\n        [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\n        @if (config().selectionMode === 'multiple') {\n          <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n          @if (col.visible) {\n            <axp-widget-column-renderer\n              [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n              [caption]=\"col.title | translate | async\"\n              [node]=\"{\n                path: col.dataPath || col.name,\n                type: col.widget.type,\n                options: col.widget.options,\n              }\"\n            >\n            </axp-widget-column-renderer>\n          }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\"\n    >\n    </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"] }]
-        }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+                    ], inputs: [], template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        @if (config().selectionMode === 'multiple') {\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
 var dataSelector_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1918,16 +1971,237 @@ class AXPDragDropListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDragDropListComponent, isStandalone: true, selector: "axp-drag-drop-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemClick: "itemClick", dropListDropped: "dropListDropped" }, host: { classAttribute: "axp-drag-drop-list" }, ngImport: i0, template: "<div\n  class=\"axp-drag-drop-list-container ax-divide-y\"\n  [attr.id]=\"listId()\"\n  [attr.data-orientation]=\"orientation()\"\n  axDropList\n  [dropListGroup]=\"dropListGroup()\"\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDrop($event)\"\n  [sortingDisabled]=\"disable()\"\n>\n  @if (items().length === 0) {\n    <div class=\"axp-drag-drop-list-empty\">\n      <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n    </div>\n  }\n\n  @for (item of items(); track item.id; let i = $index) {\n    <div\n      class=\"axp-drag-drop-list-item\"\n      [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n      [class]=\"item.cssClass\"\n      axDrag\n      [dragDisabled]=\"item.disabled || false\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n        <i class=\"fa-solid fa-bars\"></i>\n      </div>\n\n      <div class=\"axp-drag-drop-list-item-content\">\n        {{ item.content }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px rgba(0,0,0,.2);opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDragDropListComponent, isStandalone: true, selector: "axp-drag-drop-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemClick: "itemClick", dropListDropped: "dropListDropped" }, host: { classAttribute: "axp-drag-drop-list" }, ngImport: i0, template: "<div\n  class=\"axp-drag-drop-list-container ax-divide-y\"\n  [attr.id]=\"listId()\"\n  [attr.data-orientation]=\"orientation()\"\n  axDropList\n  [dropListGroup]=\"dropListGroup()\"\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDrop($event)\"\n  [sortingDisabled]=\"disable()\"\n>\n  @if (items().length === 0) {\n    <div class=\"axp-drag-drop-list-empty\">\n      <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n    </div>\n  }\n\n  @for (item of items(); track item.id; let i = $index) {\n    <div\n      class=\"axp-drag-drop-list-item\"\n      [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n      [class]=\"item.cssClass\"\n      axDrag\n      [dragDisabled]=\"item.disabled || false\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n        <i class=\"fa-solid fa-bars\"></i>\n      </div>\n\n      <div class=\"axp-drag-drop-list-item-content\">\n        {{ item.content }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px #0003;opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px #00000026;opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDragDropListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-drag-drop-list', standalone: true, imports: [CommonModule, AXDragDirective, AXDragHandleDirective, AXDropListDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'axp-drag-drop-list',
-                    }, template: "<div\n  class=\"axp-drag-drop-list-container ax-divide-y\"\n  [attr.id]=\"listId()\"\n  [attr.data-orientation]=\"orientation()\"\n  axDropList\n  [dropListGroup]=\"dropListGroup()\"\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDrop($event)\"\n  [sortingDisabled]=\"disable()\"\n>\n  @if (items().length === 0) {\n    <div class=\"axp-drag-drop-list-empty\">\n      <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n    </div>\n  }\n\n  @for (item of items(); track item.id; let i = $index) {\n    <div\n      class=\"axp-drag-drop-list-item\"\n      [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n      [class]=\"item.cssClass\"\n      axDrag\n      [dragDisabled]=\"item.disabled || false\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n        <i class=\"fa-solid fa-bars\"></i>\n      </div>\n\n      <div class=\"axp-drag-drop-list-item-content\">\n        {{ item.content }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px rgba(0,0,0,.2);opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.9}\n"] }]
+                    }, template: "<div\n  class=\"axp-drag-drop-list-container ax-divide-y\"\n  [attr.id]=\"listId()\"\n  [attr.data-orientation]=\"orientation()\"\n  axDropList\n  [dropListGroup]=\"dropListGroup()\"\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDrop($event)\"\n  [sortingDisabled]=\"disable()\"\n>\n  @if (items().length === 0) {\n    <div class=\"axp-drag-drop-list-empty\">\n      <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n    </div>\n  }\n\n  @for (item of items(); track item.id; let i = $index) {\n    <div\n      class=\"axp-drag-drop-list-item\"\n      [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n      [class]=\"item.cssClass\"\n      axDrag\n      [dragDisabled]=\"item.disabled || false\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n        <i class=\"fa-solid fa-bars\"></i>\n      </div>\n\n      <div class=\"axp-drag-drop-list-item-content\">\n        {{ item.content }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px #0003;opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px #00000026;opacity:.9}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }] } });
 
-class AXPWidgetPropertyViewerService {
+class AXPPropertyViewerComponent {
+    //#endregion
+    constructor() {
+        //#region ----   Inputs   ----
+        /**
+         * List of tabs that should be rendered inside the property viewer.
+         */
+        this.tabsInput = input([], ...(ngDevMode ? [{ debugName: "tabsInput" }] : []));
+        /**
+         * Determines rendering mode.
+         */
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        /**
+         * Emits when property context changes.
+         */
+        this.onChanged = new EventEmitter();
+        //#endregion
+        //#region ----   Signals   ----
+        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : []));
+        this.tabs = computed(() => {
+            const incomingTabs = this.tabsInput() ?? [];
+            return incomingTabs
+                .map((tab) => ({
+                ...tab,
+                groups: (tab.groups ?? [])
+                    .map((group) => ({
+                    ...group,
+                    isCollapsed: group.isCollapsed ?? false,
+                    props: (group.props ?? []).filter((prop) => prop.visible !== false),
+                }))
+                    .filter((group) => group.props.length > 0),
+            }))
+                .filter((tab) => tab.groups.length > 0);
+        }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.groups = computed(() => {
+            const preparedTabs = this.tabs();
+            if (!preparedTabs.length) {
+                return [];
+            }
+            const index = Math.min(this.currentTabIndex(), preparedTabs.length - 1);
+            if (index !== this.currentTabIndex()) {
+                this.currentTabIndex.set(index);
+            }
+            return preparedTabs[index].groups.map((group) => ({
+                ...group,
+                isCollapsed: this.groupCollapsedStates.get(group.name) ?? !!group.isCollapsed,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.groupCollapsedStates = new Map();
+        effect(() => {
+            const availableTabs = this.tabs();
+            const availableGroups = availableTabs.flatMap((tab) => tab.groups);
+            availableGroups.forEach((group) => {
+                if (!this.groupCollapsedStates.has(group.name) && group.isCollapsed !== undefined) {
+                    this.groupCollapsedStates.set(group.name, !!group.isCollapsed);
+                }
+            });
+            if (!availableTabs.length) {
+                this.currentTabIndex.set(0);
+            }
+            else if (this.currentTabIndex() >= availableTabs.length) {
+                this.currentTabIndex.set(0);
+            }
+        });
+    }
+    //#region ----   Public Methods   ----
+    /**
+     * Replaces the current context with the provided value and emits an init event.
+     */
+    initializeContext(value) {
+        untracked(() => {
+            this.context.set(cloneDeep(value ?? {}));
+            this.onChanged.emit({ values: this.context(), mode: 'init' });
+        });
+    }
+    /**
+     * Merges the provided value into the current context and emits an update event.
+     */
+    update(value) {
+        untracked(() => {
+            this.context.set(merge(cloneDeep(this.context()), value ?? {}));
+            this.onChanged.emit({ values: this.context(), mode: 'update' });
+        });
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handles context changes produced by rendered widgets.
+     */
+    handleContextChange(event) {
+        untracked(() => {
+            this.context.set(event.data);
+            this.onChanged.emit({ values: this.context(), mode: event.state === 'initiated' ? 'init' : 'update' });
+        });
+    }
+    /**
+     * Handles tab selection changes.
+     */
+    handleTabChange(event) {
+        const index = event.index;
+        if (this.currentTabIndex() !== index) {
+            this.currentTabIndex.set(index);
+        }
+    }
+    /**
+     * Stores collapsed state for a group.
+     */
+    handleCollapsedChange(groupName, isCollapsed) {
+        this.groupCollapsedStates.set(groupName, isCollapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n                            <span class=\"ax-font-semibold\">{{ p.title }}</span>\n                            @if (p.schema.interface) {\n                            <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <div class=\"ax-flex ax-flex-col ax-gap-2\">\n            <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n            @if (p.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n            }\n        </div>\n        }\n        }\n    </div>\n    }\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$3.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$3.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXAccordionModule, AXTabsModule, AXPWidgetCoreModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n                            <span class=\"ax-font-semibold\">{{ p.title }}</span>\n                            @if (p.schema.interface) {\n                            <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\">\n                            </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <div class=\"ax-flex ax-flex-col ax-gap-2\">\n            <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n            @if (p.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n            }\n        </div>\n        }\n        }\n    </div>\n    }\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsInput", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChanged: [{
+                type: Output
+            }] } });
+
+class AXPPropertyViewerPopupComponent extends AXBasePageComponent {
+    //#endregion
+    constructor() {
+        super();
+        //#region ----   Inputs   ----
+        this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.propertyViewer = viewChild(AXPPropertyViewerComponent, ...(ngDevMode ? [{ debugName: "propertyViewer" }] : []));
+        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
+        this.currentMode = 'init';
+        effect(() => {
+            const viewer = this.propertyViewer();
+            if (!viewer) {
+                return;
+            }
+            viewer.initializeContext(this.context() ?? {});
+        });
+    }
+    //#region ----   Event Handlers   ----
+    handlePropertyChanged(event) {
+        this.currentValues.set(event.values ?? {});
+        this.currentMode = event.mode;
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleApplyClick() {
+        this.close({
+            values: this.currentValues(),
+            mode: this.currentMode,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: AXPPropertyViewerPopupComponent, isStandalone: true, selector: "axp-property-viewer-popup", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-property-viewer
+        [tabsInput]="tabs()"
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)"
+      ></axp-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          look="solid"
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()"
+        ></ax-button>
+        <ax-button
+          look="solid"
+          color="primary"
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i2$1.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: AXTranslationModule }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-property-viewer-popup',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-property-viewer
+        [tabsInput]="tabs()"
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)"
+      ></axp-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          look="solid"
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()"
+        ></ax-button>
+        <ax-button
+          look="solid"
+          color="primary"
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPPropertyViewerComponent],
+                }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], propertyViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }] } });
+
+class AXPPropertyViewerService {
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.popupService = inject(AXPopupService);
@@ -1935,27 +2209,153 @@ class AXPWidgetPropertyViewerService {
     //#endregion
     //#region ----   Public Methods   ----
     /**
-     * Open widget property viewer popup
+     * Open property viewer popup with predefined tabs and context.
      */
     async open(config) {
-        const component = await Promise.resolve().then(function () { return widgetPropertyViewerPopup_component; }).then(c => c.AXPWidgetPropertyViewerPopupComponent);
-        const result = await this.popupService.open(component, {
+        const result = await this.popupService.open(AXPPropertyViewerPopupComponent, {
             title: config.title,
-            size: config.size || 'lg',
+            size: config.size || 'md',
             data: {
-                widget: signal(config.widget),
-                mode: signal(config.mode || 'simple')
-            }
+                tabs: signal(config.tabs),
+                mode: signal(config.mode || 'simple'),
+                context: signal(config.context ?? {}),
+            },
         });
         return result.data || null;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPWidgetPropertyViewerService {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.widgetRegistryService = inject(AXPWidgetRegistryService);
+        this.propertyViewerService = inject(AXPPropertyViewerService);
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Open widget property viewer popup
+     */
+    async open(config) {
+        const widgetConfig = this.widgetRegistryService.resolve(config.widget?.type);
+        if (!widgetConfig) {
+            console.error(`AXPWidgetPropertyViewerService: Unable to resolve widget config for type "${config.widget?.type}"`);
+            return null;
+        }
+        const custom = config.custom;
+        const tabs = this.buildTabs(widgetConfig, custom);
+        const context = this.buildInitialContext(widgetConfig, config.widget, custom);
+        return await this.propertyViewerService.open({
+            title: config.title,
+            tabs,
+            context,
+            mode: config.mode,
+        });
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    buildTabs(config, custom) {
+        const tabs = [
+            {
+                name: 'general',
+                title: 'General',
+                properties: config.properties ?? [],
+            },
+        ];
+        Object.entries(config.components ?? {}).forEach(([name, component]) => {
+            if (component?.component && component.properties?.length) {
+                tabs.push({
+                    name,
+                    title: component.title ?? name,
+                    properties: component.properties ?? [],
+                });
+            }
+        });
+        // Add custom properties if provided
+        if (custom?.properties?.length) {
+            custom.properties.forEach((entry) => {
+                const defaultTabName = custom.defaultTab?.name ?? tabs[0]?.name ?? 'general';
+                const defaultTabTitle = custom.defaultTab?.title ?? tabs.find((tab) => tab.name === defaultTabName)?.title ?? 'Custom';
+                const targetTabName = entry.tab?.name ?? defaultTabName;
+                const targetTabTitle = entry.tab?.title ?? (targetTabName === defaultTabName ? defaultTabTitle : 'Custom');
+                let targetTab = tabs.find((tab) => tab.name === targetTabName);
+                if (!targetTab) {
+                    targetTab = {
+                        name: targetTabName,
+                        title: targetTabTitle,
+                        properties: [],
+                    };
+                    tabs.push(targetTab);
+                }
+                const baseGroup = targetTab.properties[0]?.group;
+                const defaultGroupName = custom.defaultGroup?.name ?? baseGroup?.name ?? entry.property.group?.name ?? 'custom';
+                const defaultGroupTitle = custom.defaultGroup?.title ?? baseGroup?.title ?? entry.property.group?.title ?? 'Custom';
+                const groupName = entry.group?.name ?? defaultGroupName;
+                const groupTitle = entry.group?.title ?? defaultGroupTitle;
+                targetTab.properties.push({
+                    ...entry.property,
+                    group: {
+                        ...entry.property.group,
+                        name: groupName,
+                        title: groupTitle,
+                        order: entry.property.group?.order ?? baseGroup?.order ?? 0,
+                    },
+                });
+            });
+        }
+        return tabs
+            .map((tab) => {
+            const visibleProps = (tab.properties ?? []).filter((prop) => prop.visible !== false);
+            return {
+                name: tab.name,
+                title: tab.title,
+                groups: unionBy(sortBy(visibleProps.map((prop) => ({
+                    name: prop.group.name,
+                    title: prop.group.title,
+                    isCollapsed: false,
+                    props: sortBy(visibleProps.filter((p) => p.group.name === prop.group.name && prop.visible !== false), ['order', 'title']),
+                })), ['order', 'title']), 'name').filter((group) => group.props.length),
+            };
+        })
+            .filter((tab) => tab.groups.length);
+    }
+    buildInitialContext(config, widget, custom) {
+        const allProperties = [
+            ...(config.properties ?? []),
+            ...Object.values(config.components ?? {}).flatMap((component) => component?.properties ?? []),
+            ...(custom?.properties?.map((item) => item.property) ?? []),
+        ];
+        const defaults = allProperties
+            .filter((prop) => {
+            const defaultValue = prop.schema.defaultValue;
+            if (isArray(defaultValue)) {
+                return !isEmpty(defaultValue);
+            }
+            return !isNil(defaultValue);
+        })
+            .reduce((acc, prop) => {
+            if (prop.schema?.interface?.path) {
+                set(acc, prop.schema.interface.path, prop.schema.defaultValue);
+            }
+            return acc;
+        }, {});
+        return merge(cloneDeep(defaults), cloneDeep(widget));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -2069,6 +2469,18 @@ class AXPDynamicFormDesignerComponent {
         this.canDeleteGroup = computed(() => {
             return this.formDefinition().groups.length > 1;
         }, ...(ngDevMode ? [{ debugName: "canDeleteGroup" }] : []));
+        // Disable preview when only one empty group exists
+        this.isPreviewDisabled = computed(() => {
+            const groups = this.formDefinition().groups || [];
+            if (groups.length === 0) {
+                return true;
+            }
+            if (groups.length === 1) {
+                const [singleGroup] = groups;
+                return !singleGroup.parameters || singleGroup.parameters.length === 0;
+            }
+            return false;
+        }, ...(ngDevMode ? [{ debugName: "isPreviewDisabled" }] : []));
         // Convert form definition to designer groups for template rendering
         this.designerGroups = computed(() => {
             const formDef = this.formDefinition();
@@ -2269,6 +2681,7 @@ class AXPDynamicFormDesignerComponent {
             ...currentDefinition,
             groups: updatedGroups,
         });
+        this.applyDesignerFieldUpdates(fieldId, updates);
         // Reset flag after a delay
         setTimeout(() => {
             this.isInternalUpdate = false;
@@ -2392,6 +2805,7 @@ class AXPDynamicFormDesignerComponent {
         this.isInternalUpdate = true;
         console.log('Set isInternalUpdate flag to prevent external sync');
         this.formDefinition.set(newDefinition);
+        this.applyDesignerGroupUpdates(groupName, updates);
         // Reset flag after a longer delay to ensure all effects have processed
         setTimeout(() => {
             this.isInternalUpdate = false;
@@ -2565,6 +2979,7 @@ class AXPDynamicFormDesignerComponent {
                                 valueField: 'value',
                                 textField: 'text',
                                 dataSource: this.widgetOptions(),
+                                allowSearch: true,
                                 placeholder: widgetTypePlaceholder,
                                 validations: [{ rule: 'required' }],
                             });
@@ -2616,21 +3031,63 @@ class AXPDynamicFormDesignerComponent {
             const title = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.edit-dialog.title', {
                 params: { fieldName: field.title }
             });
+            const customGroup = { name: 'designer', title: 'Designer', order: 0 };
+            const titleProperty = createStringProperty({
+                name: 'designerFieldTitle',
+                title: 'Field Title',
+                path: '__designer.field.title',
+                group: customGroup,
+                defaultValue: field.title ?? '',
+            });
+            const descriptionProperty = createStringProperty({
+                name: 'designerFieldDescription',
+                title: 'Field Description',
+                path: '__designer.field.description',
+                group: customGroup,
+                defaultValue: field.description ?? '',
+            });
             // Use the existing widget property viewer service
             const result = await this.widgetPropertyViewerService.open({
                 title: title,
                 widget: field.widget,
                 mode: 'advanced',
-                size: 'md',
+                custom: {
+                    defaultGroup: { name: customGroup.name, title: customGroup.title },
+                    properties: [
+                        {
+                            property: titleProperty,
+                            group: { name: customGroup.name, title: customGroup.title },
+                        },
+                        {
+                            property: descriptionProperty,
+                            group: { name: customGroup.name, title: customGroup.title },
+                        },
+                    ],
+                },
             });
             if (result && result.values) {
-                // Update the field with the new widget options
-                this.updateField(field.name, {
-                    widget: {
-                        ...field.widget,
-                        options: result.values.options || field.widget.options,
+                console.log('handleFieldEdit - received property viewer result:', result);
+                const updatedWidget = {
+                    ...field.widget,
+                    ...result.values,
+                    options: {
+                        ...(field.widget.options ?? {}),
+                        ...(result.values.options ?? {}),
                     },
-                });
+                };
+                const updatedField = {
+                    widget: updatedWidget,
+                };
+                const updatedTitle = get(result.values, '__designer.field.title');
+                if (typeof updatedTitle === 'string') {
+                    updatedField.title = updatedTitle;
+                }
+                const updatedDescription = get(result.values, '__designer.field.description');
+                if (typeof updatedDescription === 'string') {
+                    updatedField.description = updatedDescription;
+                }
+                // Update the field with the merged widget configuration
+                this.updateField(field.name, updatedField);
             }
         }
         catch (error) {
@@ -3008,63 +3465,7 @@ class AXPDynamicFormDesignerComponent {
                         mainFlex.setDirection('column').setGap('20px');
                         for (const group of formDef.groups) {
                             mainFlex.fieldset((fieldset) => {
-                                if (group.title)
-                                    fieldset.setTitle(group.title);
-                                if (group.description)
-                                    fieldset.setDescription(group.description);
-                                if (group.look)
-                                    fieldset.setLook(group.look);
-                                fieldset.setCols(12);
-                                for (const param of group.parameters) {
-                                    fieldset.formField(param.title || param.path, (f) => {
-                                        f.path(param.path);
-                                        if (param.layout) {
-                                            console.log(`Preview: Applying layout to field ${param.path}:`, param.layout);
-                                            f.layout(param.layout);
-                                        }
-                                        // Map widget types to builder methods
-                                        const widgetType = param.widget?.type;
-                                        const opts = param.widget?.options || {};
-                                        switch (widgetType) {
-                                            case 'text-editor':
-                                                f.textBox(opts);
-                                                break;
-                                            case 'large-text-editor':
-                                                f.largeTextBox(opts);
-                                                break;
-                                            case 'rich-text-editor':
-                                                f.richText(opts);
-                                                break;
-                                            case 'password-editor':
-                                                f.passwordBox(opts);
-                                                break;
-                                            case 'number-editor':
-                                                f.numberBox(opts);
-                                                break;
-                                            case 'select-editor':
-                                                f.selectBox(opts);
-                                                break;
-                                            case 'lookup-editor':
-                                                f.lookupBox(opts);
-                                                break;
-                                            case 'selection-list-editor':
-                                                f.selectionList(opts);
-                                                break;
-                                            case 'date-time-editor':
-                                                f.dateTimeBox(opts);
-                                                break;
-                                            case 'toggle-editor':
-                                                f.toggleSwitch(opts);
-                                                break;
-                                            case 'color-editor':
-                                                f.colorBox(opts);
-                                                break;
-                                            default:
-                                                f.customWidget(widgetType, opts);
-                                                break;
-                                        }
-                                    });
-                                }
+                                this.configurePreviewFieldset(fieldset, group);
                             });
                         }
                     });
@@ -3180,8 +3581,119 @@ class AXPDynamicFormDesignerComponent {
             },
         };
     }
+    configurePreviewFieldset(fieldset, group) {
+        if (group.title)
+            fieldset.setTitle(group.title);
+        if (group.description)
+            fieldset.setDescription(group.description);
+        if (group.look)
+            fieldset.setLook(group.look);
+        fieldset.setCols(12);
+        for (const parameter of group.parameters) {
+            fieldset.formField(parameter.title || parameter.path, (formField) => {
+                this.configurePreviewFormField(formField, parameter);
+            });
+        }
+    }
+    configurePreviewFormField(formField, fieldDefinition) {
+        formField.path(fieldDefinition.path);
+        if (fieldDefinition.mode) {
+            formField.mode(fieldDefinition.mode);
+        }
+        if (fieldDefinition.layout) {
+            console.log(`Preview: Applying layout to field ${fieldDefinition.path}:`, fieldDefinition.layout);
+            formField.layout(fieldDefinition.layout);
+        }
+        const widgetName = fieldDefinition.widget?.name ?? fieldDefinition.path;
+        if (widgetName) {
+            formField.name(widgetName);
+        }
+        this.configureFormFieldWidget(formField, fieldDefinition);
+    }
+    configureFormFieldWidget(formField, fieldDefinition) {
+        const widgetNode = fieldDefinition.widget;
+        if (!widgetNode) {
+            formField.customWidget('text-editor', { path: fieldDefinition.path });
+            return;
+        }
+        if (widgetNode.mode) {
+            formField.mode(widgetNode.mode);
+        }
+        const widgetOptions = this.extractPreviewWidgetOptions(widgetNode, fieldDefinition.path);
+        formField.customWidget(widgetNode.type, widgetOptions);
+    }
+    extractPreviewWidgetOptions(widgetNode, fallbackPath) {
+        const options = cloneDeep(widgetNode.options ?? {});
+        if (widgetNode.name && !options['name']) {
+            options['name'] = widgetNode.name;
+        }
+        if (widgetNode.path || fallbackPath) {
+            options['path'] = widgetNode.path ?? fallbackPath;
+        }
+        if (widgetNode.defaultValue !== undefined && options['defaultValue'] === undefined) {
+            options['defaultValue'] = cloneDeep(widgetNode.defaultValue);
+        }
+        if (widgetNode.children?.length) {
+            options['children'] = widgetNode.children.map((child) => cloneDeep(child));
+        }
+        return options;
+    }
+    applyDesignerFieldUpdates(fieldId, updates) {
+        const currentState = this.designerState();
+        let fieldUpdated = false;
+        const updatedGroups = currentState.groups.map((group) => {
+            const hasTargetField = group.fields.some((field) => field.name === fieldId);
+            if (!hasTargetField) {
+                return group;
+            }
+            fieldUpdated = true;
+            const updatedFields = group.fields.map((field) => {
+                if (field.name !== fieldId) {
+                    return field;
+                }
+                return {
+                    ...field,
+                    ...(updates.title !== undefined ? { title: updates.title } : {}),
+                    ...(updates.description !== undefined ? { description: updates.description } : {}),
+                    ...(updates.mode !== undefined ? { mode: updates.mode } : {}),
+                    ...(updates.layout !== undefined ? { layout: cloneDeep(updates.layout) } : {}),
+                    ...(updates.widget !== undefined ? { widget: cloneDeep(updates.widget) } : {}),
+                };
+            });
+            return {
+                ...group,
+                fields: updatedFields,
+            };
+        });
+        if (fieldUpdated) {
+            this.designerState.set({
+                ...currentState,
+                groups: updatedGroups,
+            });
+        }
+    }
+    applyDesignerGroupUpdates(groupName, updates) {
+        const currentState = this.designerState();
+        const updatedGroups = currentState.groups.map((group) => {
+            if (group.name !== groupName) {
+                return group;
+            }
+            return {
+                ...group,
+                ...(updates.title !== undefined ? { title: updates.title } : {}),
+                ...(updates.description !== undefined ? { description: updates.description } : {}),
+                ...(updates.mode !== undefined ? { mode: updates.mode } : {}),
+                ...(updates.look !== undefined ? { look: updates.look } : {}),
+                ...(updates.layout !== undefined ? { layout: cloneDeep(updates.layout) } : {}),
+            };
+        });
+        this.designerState.set({
+            ...currentState,
+            groups: updatedGroups,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDynamicFormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\">\n      <!-- Left side can be used for other actions in the future -->\n    </div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n        (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (formDefinition().groups.length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n      [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of designerGroups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              {{ group.title || group.name }}\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n              [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n              <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-plus\"\n              [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n              [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n            </axp-state-message>\n            } @else {\n            @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n              [axp-grid-layout]=\"getFieldGridLayout(group)\">\n              <div class=\"__drag-handle\" cdkDragHandle>\n                <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                <div class=\"__item-header\">\n                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n                  (onClick)=\"handleFieldLayoutEdit(field, group)\"\n                  [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n                  <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                </ax-button>\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n                  <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                </ax-button>\n\n                <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n              }\n            </div>\n            }\n            }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\">\n      <!-- Left side can be used for other actions in the future -->\n    </div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n        [disabled]=\"isPreviewDisabled()\" (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (formDefinition().groups.length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n      [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of designerGroups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              {{ group.title || group.name }}\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n              [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n              <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-plus\"\n              [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n              [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n            </axp-state-message>\n            } @else {\n            @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n              [axp-grid-layout]=\"getFieldGridLayout(group)\">\n              <div class=\"__drag-handle\" cdkDragHandle>\n                <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                <div class=\"__item-header\">\n                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n                  (onClick)=\"handleFieldLayoutEdit(field, group)\"\n                  [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n                  <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                </ax-button>\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n                  <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                </ax-button>\n\n                <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n              }\n            </div>\n            }\n            }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;user-select:none}.__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDynamicFormDesignerComponent, decorators: [{
             type: Component,
@@ -3198,7 +3710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXPGridLayoutDirective,
                     ], standalone: true, host: {
                         class: 'ax-w-full ax-h-full',
-                    }, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\">\n      <!-- Left side can be used for other actions in the future -->\n    </div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n        (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (formDefinition().groups.length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n      [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of designerGroups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              {{ group.title || group.name }}\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n              [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n              <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-plus\"\n              [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n              [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n            </axp-state-message>\n            } @else {\n            @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n              [axp-grid-layout]=\"getFieldGridLayout(group)\">\n              <div class=\"__drag-handle\" cdkDragHandle>\n                <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                <div class=\"__item-header\">\n                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n                  (onClick)=\"handleFieldLayoutEdit(field, group)\"\n                  [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n                  <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                </ax-button>\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n                  <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                </ax-button>\n\n                <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n              }\n            </div>\n            }\n            }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
+                    }, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\">\n      <!-- Left side can be used for other actions in the future -->\n    </div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n        [disabled]=\"isPreviewDisabled()\" (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (formDefinition().groups.length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n      [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of designerGroups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              {{ group.title || group.name }}\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n              [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n              <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-plus\"\n              [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n              [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n            </axp-state-message>\n            } @else {\n            @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n              [axp-grid-layout]=\"getFieldGridLayout(group)\">\n              <div class=\"__drag-handle\" cdkDragHandle>\n                <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                <div class=\"__item-header\">\n                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n                  (onClick)=\"handleFieldLayoutEdit(field, group)\"\n                  [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n                  <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                </ax-button>\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n                  <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                </ax-button>\n\n                <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n              }\n            </div>\n            }\n            }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;user-select:none}.__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
         }], propDecorators: { formDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDefinition", required: false }] }, { type: i0.Output, args: ["formDefinitionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 //#endregion
@@ -3542,7 +4054,7 @@ class AXPExtraPropertiesComponent {
         </axp-widgets-container>
       </div>
      
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
             type: Component,
@@ -3756,7 +4268,7 @@ class AXPWidgetPropertyViewerComponent {
         this.groupCollapsedStates.set(group, collapsed);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n  @if (mode() == 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n      @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n          <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n            @for (tab of tabs(); track $index) {\n              <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n              </ax-tab-item>\n            }\n          </ax-tabs>\n        </div>\n      }\n      <div class=\"ax-flex-1 ax-overflow-auto\">\n        <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n          @for (group of groups(); track $index) {\n            <ax-accordion-item\n              class=\"!ax-mb-0\"\n              [caption]=\"group.title\"\n              [isCollapsed]=\"group.isCollapsed\"\n              (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n            >\n              <div class=\"ax-flex ax-flex-col\">\n                @for (p of group.props; track $index) {\n                  <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n                    <span class=\"ax-font-semibold\">{{ p.title }}</span>\n                    @if (p.schema.interface) {\n                      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-accordion-item>\n          }\n        </ax-accordion-group>\n      </div>\n    </div>\n  }\n  <!-- Simple-->\n  @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n      <!-- groups -->\n      @for (group of groups(); track $index) {\n        <!-- props -->\n        @for (p of group.props; track $index) {\n          <div class=\"ax-flex ax-flex-col ax-gap-2\">\n            <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n            @if (p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</axp-widgets-container>\n", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$3.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$3.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n  @if (mode() == 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n      @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n          <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n            @for (tab of tabs(); track $index) {\n              <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n              </ax-tab-item>\n            }\n          </ax-tabs>\n        </div>\n      }\n      <div class=\"ax-flex-1 ax-overflow-auto\">\n        <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n          @for (group of groups(); track $index) {\n            <ax-accordion-item\n              class=\"!ax-mb-0\"\n              [caption]=\"group.title\"\n              [isCollapsed]=\"group.isCollapsed\"\n              (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n            >\n              <div class=\"ax-flex ax-flex-col\">\n                @for (p of group.props; track $index) {\n                  <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n                    <span class=\"ax-font-semibold\">{{ p.title }}</span>\n                    @if (p.schema.interface) {\n                      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-accordion-item>\n          }\n        </ax-accordion-group>\n      </div>\n    </div>\n  }\n  <!-- Simple-->\n  @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n      <!-- groups -->\n      @for (group of groups(); track $index) {\n        <!-- props -->\n        @for (p of group.props; track $index) {\n          <div class=\"ax-flex ax-flex-col ax-gap-2\">\n            <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n            @if (p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</axp-widgets-container>\n", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$3.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$3.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
             type: Component,
@@ -3891,7 +4403,7 @@ class AXPExtraPropertiesSchemaComponent {
         return `${k}${i}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n    <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n        <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n            @for (item of schema(); track item.key) {\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n                [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n                [cdkDragDisabled]=\"false\">\n                <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n                    <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n                        cdkDragHandle></ax-icon>\n                    <div>\n                        <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                    </div>\n                </div>\n                <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                            textField=\"title\"\n                            (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n                    </ax-form-field>\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-text-box [ngModel]=\"item.title\"\n                            (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n                    </ax-form-field>\n                </div>\n                <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n                    <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n                        <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            } @else {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n                <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n            </div>\n            }\n            } @empty {\n            <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n                async\n                }}</div>\n            }\n\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n                <!-- Type -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n                    <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                        textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n                </ax-form-field>\n                <!-- Title -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n                    <ax-text-box [ngModel]=\"newTitle()\"\n                        (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n                </ax-form-field>\n                <!-- Add -->\n                <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n                    <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n                        text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n                        <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded  ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n    @if (mode() === 'edit' && selectedItem()) {\n    <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n        {{selectedItem()?.title}}\n    </div>\n    <div class=\"ax-overflow-y-auto  ax-flex-1\">\n        <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n            [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n    </div>\n    }\n    @else {\n    <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n        translate | async }}</div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n    <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n        <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n            @for (item of schema(); track item.key) {\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n                [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n                [cdkDragDisabled]=\"false\">\n                <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n                    <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n                        cdkDragHandle></ax-icon>\n                    <div>\n                        <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                    </div>\n                </div>\n                <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                            textField=\"title\"\n                            (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n                    </ax-form-field>\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-text-box [ngModel]=\"item.title\"\n                            (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n                    </ax-form-field>\n                </div>\n                <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n                    <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n                        <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            } @else {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n                <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n            </div>\n            }\n            } @empty {\n            <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n                async\n                }}</div>\n            }\n\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n                <!-- Type -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n                    <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                        textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n                </ax-form-field>\n                <!-- Title -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n                    <ax-text-box [ngModel]=\"newTitle()\"\n                        (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n                </ax-form-field>\n                <!-- Add -->\n                <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n                    <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n                        text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n                        <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded  ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n    @if (mode() === 'edit' && selectedItem()) {\n    <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n        {{selectedItem()?.title}}\n    </div>\n    <div class=\"ax-overflow-y-auto  ax-flex-1\">\n        <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n            [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n    </div>\n    }\n    @else {\n    <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n        translate | async }}</div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
             type: Component,
@@ -4042,7 +4554,7 @@ class AXPExtraPropertiesValuesComponent {
         </div>
       </axp-widgets-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
             type: Component,
@@ -4093,9 +4605,11 @@ class AXPQueryFiltersComponent {
         this.translate = inject(AXTranslationService);
         this.calendarService = inject(AXCalendarService);
         this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
+        this.settingService = inject(AXPSettingService);
         this.filtersDefinitions = input([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : []));
         this.initialFilters = input([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : []));
         this.onFiltersChanged = output();
+        this.dateFormat = signal('YYYY/MM/DD', ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
         this.tagBox = viewChild('tagBox', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
         this.widgetRenderer = viewChild('widgetRenderer', ...(ngDevMode ? [{ debugName: "widgetRenderer" }] : []));
         this.selectedField = signal(null, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
@@ -4146,7 +4660,8 @@ class AXPQueryFiltersComponent {
         this.convertIfISOStringDate = (val) => {
             const isISOStringDate = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(val);
             if (isISOStringDate) {
-                return this.calendarService.convert(val).date.toLocaleDateString();
+                const dateResult = this.calendarService.convert(val);
+                return dateResult.format(this.dateFormat());
             }
             return val;
         };
@@ -4158,6 +4673,10 @@ class AXPQueryFiltersComponent {
                     }));
             });
         };
+        this.#dateFormatEffect = effect(async () => {
+            const format = await this.settingService.get('regional:short-date');
+            this.dateFormat.set(format || 'YYYY/MM/DD');
+        }, ...(ngDevMode ? [{ debugName: "#dateFormatEffect" }] : []));
         this.#emitFiltersEffect = effect(() => {
             // Prevent emitting while a filter is actively being edited
             const isEditing = this.activeFilter();
@@ -4291,6 +4810,7 @@ class AXPQueryFiltersComponent {
             return acc;
         }, {});
     }
+    #dateFormatEffect;
     ngOnInit() {
         this.tagBoxInput = this.tagBox()?.getHostElement().querySelector('input');
     }
@@ -4384,14 +4904,6 @@ class AXPQueryFiltersComponent {
     #emitFiltersEffect;
     handleSelectFilters(e) {
         if (e.value?.length < this.selectedFilters().length) {
-            // Find removed filter by comparing old and new values
-            const oldValue = e.oldValue;
-            const newValue = e.value;
-            const removedFilter = oldValue.find((oldFilter) => !newValue.some((newFilter) => newFilter.field === oldFilter.field));
-            // If removed filter is "all" filter, restore its value to tagBox input
-            if (removedFilter?.field === 'all') {
-                this.tagBox()?.inputValue.set(String(removedFilter.value || ''));
-            }
             const hiddenFilters = this.selectedFilters().filter((f) => f.hidden);
             this.selectedFilters.update((prev) => {
                 return hiddenFilters.concat(e.value);
@@ -4401,7 +4913,7 @@ class AXPQueryFiltersComponent {
     handleAddAllInlineFilters() {
         const inputValue = this.tagBox()?.inputValue();
         // Check if input is empty
-        if (!inputValue?.trim()) {
+        if (!inputValue?.trim() || !this.filtersDefinitions().some((f) => f.filterType.inline)) {
             return;
         }
         // Remove existing "all" filter (if exists) and add new one with updated value
@@ -4484,7 +4996,7 @@ class AXPQueryFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$4.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -4500,7 +5012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
         }], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']
@@ -4516,6 +5028,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
         this.showHistory = input(true, ...(ngDevMode ? [{ debugName: "showHistory" }] : []));
         this.look = input('blank', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.aspectRatio = input(undefined, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
         this.container = viewChild(AXImageEditorContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
         this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : []));
         this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : []));
@@ -4545,7 +5058,6 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         }
     }
     handleSave() {
-        this.container()?.save();
         this.close({ data: this.context() });
     }
     handleCancel() {
@@ -4558,10 +5070,15 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-form class="ax-flex ax-justify-center">
       <ax-form-field class="ax-p-2">
-        <ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
+        <ax-image-editor-container
+          [aspectRatio]="[aspectRatio() ?? '16/9']"
+          #container
+          [look]="look()"
+          (onValueChanged)="handleValueChanged($event)"
+        >
           <ax-header>
             <ax-toolbar>
               <ax-prefix>
@@ -4577,13 +5094,18 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
     </ax-form>
     <ax-footer class="ax-flex ax-justify-end ax-gap-2">
       <ax-suffix>
-        <ax-button  look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
+        <ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
         </ax-button>
-        <ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
+        <ax-button
+          color="primary"
+          look="solid"
+          (onClick)="handleSave()"
+          [text]="'@general:actions.save.title' | translate | async"
+        >
         </ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled", "aspectRatio"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: i5$1.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: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+  `, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled", "aspectRatio"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$6.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: i5$2.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: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
             type: Component,
@@ -4598,7 +5120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     ], template: `
     <ax-form class="ax-flex ax-justify-center">
       <ax-form-field class="ax-p-2">
-        <ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
+        <ax-image-editor-container
+          [aspectRatio]="[aspectRatio() ?? '16/9']"
+          #container
+          [look]="look()"
+          (onValueChanged)="handleValueChanged($event)"
+        >
           <ax-header>
             <ax-toolbar>
               <ax-prefix>
@@ -4614,14 +5141,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     </ax-form>
     <ax-footer class="ax-flex ax-justify-end ax-gap-2">
       <ax-suffix>
-        <ax-button  look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
+        <ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
         </ax-button>
-        <ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
+        <ax-button
+          color="primary"
+          look="solid"
+          (onClick)="handleSave()"
+          [text]="'@general:actions.save.title' | translate | async"
+        >
         </ax-button>
       </ax-suffix>
     </ax-footer>
   `, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
-        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
+        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
 
 var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -4641,6 +5173,7 @@ class AXPImageEditorService {
                 image: signal(options?.image),
                 showHistory: signal(options?.showHistory ?? true),
                 look: signal(options?.look ?? 'solid'),
+                aspectRatio: signal(options?.aspectRatio),
             },
         });
         return result?.data?.data?.image ?? null;
@@ -4653,102 +5186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        //#region ----   Inputs   ----
-        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
-        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-        //#endregion
-        //#region ----   Properties   ----
-        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
-    }
-    //#endregion
-    //#region ----   Event Handlers   ----
-    handlePropertyChanged(event) {
-        this.currentValues.set(event.values);
-    }
-    handleCloseClick() {
-        this.close();
-    }
-    handleApplyClick() {
-        this.close({
-            values: this.currentValues(),
-            mode: 'update'
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
-      <axp-widget-property-viewer 
-        [widget]="widget()" 
-        [mode]="mode()"
-        (onChanged)="handlePropertyChanged($event)">
-      </axp-widget-property-viewer>
-    </div>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button 
-          look="solid" 
-          [text]="'@general:actions.close.title' | translate | async"
-          (onClick)="handleCloseClick()">
-        </ax-button>
-        <ax-button 
-          look="solid" 
-          color="primary" 
-          [text]="'@general:actions.apply.title' | translate | async"
-          (onClick)="handleApplyClick()">
-        </ax-button>
-      </ax-suffix>
-    </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: i2$1.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: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-widget-property-viewer-popup',
-                    template: `
-    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
-      <axp-widget-property-viewer 
-        [widget]="widget()" 
-        [mode]="mode()"
-        (onChanged)="handlePropertyChanged($event)">
-      </axp-widget-property-viewer>
-    </div>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button 
-          look="solid" 
-          [text]="'@general:actions.close.title' | translate | async"
-          (onClick)="handleCloseClick()">
-        </ax-button>
-        <ax-button 
-          look="solid" 
-          color="primary" 
-          [text]="'@general:actions.apply.title' | translate | async"
-          (onClick)="handleApplyClick()">
-        </ax-button>
-      </ax-suffix>
-    </ax-footer>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXTranslationModule,
-                        AXPWidgetPropertyViewerComponent
-                    ],
-                }]
-        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
-
-var widgetPropertyViewerPopup_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPWidgetPropertyViewerPopupComponent: AXPWidgetPropertyViewerPopupComponent
-});
-
 class AXPQuerySortsComponent {
     constructor() {
         this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
@@ -4797,7 +5234,7 @@ class AXPQuerySortsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
             type: Component,
@@ -4906,7 +5343,7 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
         </ax-suffix>
       </ax-footer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: i5$1.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: AXFormModule }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: i5$2.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: AXFormModule }, { kind: "component", type: i2$6.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
             type: Component,
@@ -5232,13 +5669,239 @@ class AXPQueryViewsComponent {
         console.log(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQueryViewsComponent, isStandalone: true, selector: "axp-query-views", inputs: { views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { views: "viewsChange", selectedView: "selectedViewChange" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n    </ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQueryViewsComponent, isStandalone: true, selector: "axp-query-views", inputs: { views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { views: "viewsChange", selectedView: "selectedViewChange" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n    </ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-query-views', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTabsModule, AXTranslationModule, CommonModule], template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n    </ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n" }]
         }], propDecorators: { tabs: [{ type: i0.ViewChild, args: ['tabs', { isSignal: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }, { type: i0.Output, args: ["viewsChange"] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: true }] }, { type: i0.Output, args: ["selectedViewChange"] }] } });
 
+//#region ----   Component   ----
+/**
+ * Compact widget field configurator component
+ * Designed to be embedded in entity definition forms for configuring widget properties
+ */
+class AXPWidgetFieldConfiguratorComponent {
+    /**
+     * Enter edit mode (show select box)
+     */
+    enterEditMode() {
+        if (this.readonly())
+            return;
+        this.isEditMode.set(true);
+    }
+    //#endregion
+    //#region ----   Lifecycle   ----
+    constructor() {
+        //#region ----   Inputs   ----
+        /**
+         * Widget node configuration (two-way binding)
+         */
+        this.widget = model({ type: '' }, ...(ngDevMode ? [{ debugName: "widget" }] : []));
+        /**
+         * Label for the widget selector
+         */
+        this.label = input('@general:terms.widget', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * Field name (used in property viewer title)
+         */
+        this.fieldName = input('Field', ...(ngDevMode ? [{ debugName: "fieldName" }] : []));
+        /**
+         * Readonly mode
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.widgetRegistry = inject(AXPWidgetRegistryService);
+        this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
+        this.translationService = inject(AXTranslationService);
+        this.formBuilderService = inject(AXPLayoutBuilderService);
+        //#endregion
+        //#region ----   Class Properties   ----
+        /**
+         * Currently selected widget type
+         */
+        this.selectedWidgetType = signal('', ...(ngDevMode ? [{ debugName: "selectedWidgetType" }] : []));
+        /**
+         * Whether the component is in edit mode (showing select box)
+         */
+        this.isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+        /**
+         * Available widgets filtered by FormElement group
+         */
+        this.availableWidgets = computed(() => {
+            return this.widgetRegistry
+                .all()
+                .filter((widget) => widget.groups?.includes(AXPWidgetGroupEnum.FormElement)
+                && widget.type === 'editor')
+                .map((widget) => ({
+                value: widget.name,
+                text: widget.title,
+                icon: widget.icon,
+                description: widget.description,
+            }))
+                .sort((a, b) => a.text.localeCompare(b.text));
+        }, ...(ngDevMode ? [{ debugName: "availableWidgets" }] : []));
+        /**
+         * Current widget configuration details
+         */
+        this.currentWidgetConfig = computed(() => {
+            const widgetType = this.selectedWidgetType();
+            if (!widgetType)
+                return null;
+            const config = this.widgetRegistry.resolve(widgetType);
+            return config
+                ? {
+                    title: config.title,
+                    description: config.description,
+                    icon: config.icon,
+                    hasProperties: config.properties && config.properties.length > 0,
+                }
+                : null;
+        }, ...(ngDevMode ? [{ debugName: "currentWidgetConfig" }] : []));
+        /**
+         * Whether configure button should be enabled
+         */
+        this.canConfigure = computed(() => {
+            return !!this.selectedWidgetType() && !!this.currentWidgetConfig()?.hasProperties;
+        }, ...(ngDevMode ? [{ debugName: "canConfigure" }] : []));
+        /**
+         * Whether widget has been configured (has options)
+         */
+        this.isConfigured = computed(() => {
+            const widget = this.widget();
+            if (!widget || !widget.options)
+                return false;
+            return Object.keys(widget.options).length > 0;
+        }, ...(ngDevMode ? [{ debugName: "isConfigured" }] : []));
+        /**
+         * Whether preview button should be enabled
+         */
+        this.canPreview = computed(() => {
+            return !!this.selectedWidgetType();
+        }, ...(ngDevMode ? [{ debugName: "canPreview" }] : []));
+        // Sync widget type to internal signal
+        effect(() => {
+            const widget = this.widget();
+            if (widget?.type !== this.selectedWidgetType()) {
+                this.selectedWidgetType.set(widget?.type || '');
+                // Auto-enter edit mode if no widget is selected
+                if (!widget?.type) {
+                    this.isEditMode.set(true);
+                }
+            }
+        });
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle widget type change
+     */
+    async onWidgetTypeChange(event) {
+        if (this.readonly())
+            return;
+        const newType = event?.value ?? event;
+        const currentWidget = this.widget();
+        // If the type hasn't actually changed, don't do anything
+        // This prevents resetting options during initialization
+        if (currentWidget?.type === newType) {
+            return;
+        }
+        this.selectedWidgetType.set(newType);
+        // Create new widget node with selected type
+        // Only reset options when user manually changes the type
+        const newWidget = {
+            type: newType,
+            options: {},
+        };
+        this.widget.set(newWidget);
+        // Exit edit mode after selection (show widget info)
+        this.isEditMode.set(false);
+    }
+    /**
+     * Open widget property viewer
+     */
+    async openPropertyViewer() {
+        if (!this.canConfigure() || this.readonly())
+            return;
+        const currentWidget = cloneDeep(this.widget());
+        const fieldName = this.fieldName();
+        const title = await this.translationService.translateAsync('@general:actions.configure.title', {
+            params: { name: fieldName },
+        });
+        const result = await this.widgetPropertyViewerService.open({
+            title: title || `Configure ${fieldName}`,
+            widget: currentWidget,
+            mode: 'simple',
+        });
+        if (result && result.values) {
+            // Merge the updated values from property viewer into the widget
+            const updatedWidget = {
+                ...currentWidget,
+                ...result.values,
+                options: {
+                    ...(currentWidget.options ?? {}),
+                    ...(result.values.options ?? {}),
+                },
+            };
+            this.widget.set(updatedWidget);
+        }
+    }
+    /**
+     * Open widget preview with actual rendered widget
+     */
+    async openPreview() {
+        if (!this.canPreview())
+            return;
+        try {
+            const currentWidget = cloneDeep(this.widget());
+            const fieldName = this.fieldName();
+            const config = this.currentWidgetConfig();
+            // Use widget title in dialog title
+            const dialogTitle = config?.title || currentWidget.type || fieldName;
+            // Create preview dialog with actual rendered widget
+            const dialogRef = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle(dialogTitle)
+                    .setSize('md')
+                    .setCloseButton(true)
+                    .setContext({})
+                    .content((layoutBuilder) => {
+                    // Create form field directly without fieldset wrapper
+                    layoutBuilder.formField(fieldName, (formField) => {
+                        formField.customWidget(currentWidget.type, currentWidget.options);
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.close.title'));
+            })
+                .show();
+            // Close the dialog
+            dialogRef.close();
+        }
+        catch (error) {
+            console.error('Error showing widget preview:', error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetFieldConfiguratorComponent, isStandalone: true, selector: "axp-widget-field-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange" }, ngImport: i0, template: "<!-- Widget Selector & Info Container -->\n<div class=\"__widget-container\">\n  <!-- Edit Mode: Show Select Box -->\n  @if (isEditMode()) {\n  <div class=\"__widget-selector\">\n    <ax-select-box [(ngModel)]=\"selectedWidgetType\" [dataSource]=\"availableWidgets()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onWidgetTypeChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- View Mode: Show Widget Info -->\n  @if (!isEditMode()) {\n  @if (selectedWidgetType() && currentWidgetConfig(); as config) {\n  <div class=\"__widget-info\">\n    <!-- Widget Header (Clickable to Edit) -->\n    <div class=\"__widget-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ config.description }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        <!-- Configure Button -->\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openPropertyViewer()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        <!-- Preview Button -->\n        <ax-button [disabled]=\"!canPreview()\" [title]=\"('@general:actions.preview.title' | translate | async) ?? ''\"\n          look=\"blank\" size=\"sm\" (onClick)=\"openPreview()\">\n          <ax-icon icon=\"fa-solid fa-eye\"></ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- No Configuration Needed State -->\n    @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    }\n  </div>\n  } @else {\n  <!-- Empty State (Clickable to Edit) -->\n  <div class=\"__widget-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select a widget type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <!-- Widget Item Template (Dropdown Items) -->\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Widget Selected Template (Selected Value Display) -->\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-widget-field-configurator{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-container{border-radius:.375rem;border-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:all .2s ease}axp-widget-field-configurator .__widget-selector{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-selector ax-select-box{width:100%}axp-widget-field-configurator .__widget-info{display:flex;flex-direction:column;gap:.75rem}axp-widget-field-configurator .__widget-info .__widget-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-widget-field-configurator .__widget-info .__widget-header.__editable{cursor:pointer}axp-widget-field-configurator .__widget-info .__widget-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-info .__widget-header:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-info .__description{line-height:1.5}axp-widget-field-configurator .__widget-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-widget-field-configurator .__widget-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-widget-field-configurator .__widget-empty.__editable{cursor:pointer}axp-widget-field-configurator .__widget-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-empty:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-widget-field-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-widget-field-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-widget-field-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-widget-field-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-widget-field-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: AXSelectBoxModule }, { kind: "component", type: i5$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-widget-field-configurator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXButtonModule,
+                        AXSelectBoxModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPStateMessageComponent,
+                        AXSearchBoxModule,
+                    ], template: "<!-- Widget Selector & Info Container -->\n<div class=\"__widget-container\">\n  <!-- Edit Mode: Show Select Box -->\n  @if (isEditMode()) {\n  <div class=\"__widget-selector\">\n    <ax-select-box [(ngModel)]=\"selectedWidgetType\" [dataSource]=\"availableWidgets()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onWidgetTypeChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- View Mode: Show Widget Info -->\n  @if (!isEditMode()) {\n  @if (selectedWidgetType() && currentWidgetConfig(); as config) {\n  <div class=\"__widget-info\">\n    <!-- Widget Header (Clickable to Edit) -->\n    <div class=\"__widget-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ config.description }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        <!-- Configure Button -->\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openPropertyViewer()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        <!-- Preview Button -->\n        <ax-button [disabled]=\"!canPreview()\" [title]=\"('@general:actions.preview.title' | translate | async) ?? ''\"\n          look=\"blank\" size=\"sm\" (onClick)=\"openPreview()\">\n          <ax-icon icon=\"fa-solid fa-eye\"></ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- No Configuration Needed State -->\n    @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    }\n  </div>\n  } @else {\n  <!-- Empty State (Clickable to Edit) -->\n  <div class=\"__widget-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select a widget type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <!-- Widget Item Template (Dropdown Items) -->\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Widget Selected Template (Selected Value Display) -->\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-widget-field-configurator{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-container{border-radius:.375rem;border-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:all .2s ease}axp-widget-field-configurator .__widget-selector{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-selector ax-select-box{width:100%}axp-widget-field-configurator .__widget-info{display:flex;flex-direction:column;gap:.75rem}axp-widget-field-configurator .__widget-info .__widget-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-widget-field-configurator .__widget-info .__widget-header.__editable{cursor:pointer}axp-widget-field-configurator .__widget-info .__widget-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-info .__widget-header:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-info .__description{line-height:1.5}axp-widget-field-configurator .__widget-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-widget-field-configurator .__widget-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-widget-field-configurator .__widget-empty.__editable{cursor:pointer}axp-widget-field-configurator .__widget-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-empty:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-widget-field-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-widget-field-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-widget-field-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-widget-field-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-widget-field-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+
 /**
  * Generic widget item component for displaying selectable widgets with icons, titles, and descriptions.
  * Can be used across different modules for consistent widget display and interaction.
@@ -5293,9 +5956,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{ selector: 'axp-widget-item', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>" }]
         }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], showPinButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPinButton", required: false }] }], customClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], onWidgetClick: [{ type: i0.Output, args: ["onWidgetClick"] }], onPinClick: [{ type: i0.Output, args: ["onPinClick"] }] } });
 
+class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Inputs   ----
+        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    handlePropertyChanged(event) {
+        this.currentValues.set(event.values);
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleApplyClick() {
+        this.close({
+            values: this.currentValues(),
+            mode: 'update'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-widget-property-viewer 
+        [widget]="widget()" 
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)">
+      </axp-widget-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button 
+          look="solid" 
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()">
+        </ax-button>
+        <ax-button 
+          look="solid" 
+          color="primary" 
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.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: i2$1.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: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-property-viewer-popup',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-widget-property-viewer 
+        [widget]="widget()" 
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)">
+      </axp-widget-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button 
+          look="solid" 
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()">
+        </ax-button>
+        <ax-button 
+          look="solid" 
+          color="primary" 
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPWidgetPropertyViewerComponent
+                    ],
+                }]
+        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
+export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map