@acorex/platform 20.6.0-next.18 → 20.6.0-next.19

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

@@ -1,10 +1,10 @@
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, computed, Injector, runInInjectionContext, ChangeDetectorRef, effect, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { inject, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, computed, Injector, runInInjectionContext, afterNextRender, ViewEncapsulation, ChangeDetectorRef, effect, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
 import { Router, RouterModule, ROUTES } from '@angular/router';
 import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i4 from '@acorex/components/loading';
+import * as i1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
@@ -18,9 +18,9 @@ import { CommonModule } from '@angular/common';
 import { castArray, get, cloneDeep, set, merge, orderBy, isNil, isEqual, isEmpty, sortBy } from 'lodash-es';
 import { AXDataSource } from '@acorex/cdk/common';
 import { AXFormatService } from '@acorex/core/format';
-import * as i4$1 from '@acorex/platform/common';
+import * as i4 from '@acorex/platform/common';
 import { AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPReloadEvent, AXPCommonSettings, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
-import * as i1$1 from '@acorex/platform/core';
+import * as i1$3 from '@acorex/platform/core';
 import { resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPBroadcastEventService, AXPPlatformScope, extractValue, setSmart, AXPDeviceService, getChangedPaths, AXPSystemActionType } from '@acorex/platform/core';
 import * as i2$3 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
@@ -31,30 +31,30 @@ import { AXDialogService } from '@acorex/components/dialog';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
-import * as i3$2 from '@acorex/components/decorators';
+import * as i1$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i3$3 from '@acorex/components/search-box';
+import * as i3$2 from '@acorex/components/search-box';
 import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/search-box';
-import * as i4$2 from '@acorex/components/skeleton';
+import * as i4$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import * as i2$1 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i7 from '@acorex/components/select-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i6$1 from '@acorex/components/tag-box';
-import { AXTagBoxModule, AXTagBoxComponent } from '@acorex/components/tag-box';
 import { AXValidationModule } from '@acorex/core/validation';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { AXP_DISABLED_PROPERTY, AXP_ALLOW_CLEAR_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_NAME_PROPERTY, AXPFileUploaderWidgetService } from '@acorex/platform/layout/widgets';
-import * as i4$3 from '@acorex/components/dropdown';
+import * as i4$2 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i1$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i7 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i2$2 from '@acorex/components/text-box';
 import { AXTextBoxModule, AXTextBoxComponent } from '@acorex/components/text-box';
+import * as i6$1 from '@acorex/components/tag-box';
+import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXPDataSelectorService, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { transform, isEqual as isEqual$1 } from 'lodash';
@@ -391,7 +391,7 @@ class AXPEntityDetailPopoverComponent {
         return importantProperties;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityDetailPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityDetailPopoverComponent, isStandalone: true, selector: "axp-entity-detail-popover", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: true, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailPopover", first: true, predicate: ["detailPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-popover [openOn]=\"'manual'\" #detailPopover (openChange)=\"onDetailPopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[400px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold ax-text-on-lightest-surface\">\n        @if (entityDetails()?.entityData?.[textField()]) {\n          {{ entityDetails()?.entityData[textField()] }}\n        } @else {\n          {{ item()?.[textField()] }}\n        }\n      </h3>\n    </div>\n    @if (isLoadingDetails()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading details...</ax-loading>\n      </div>\n    } @else if (entityDetails()) {\n      <div class=\"ax-space-y-3 ax-mb-4\">\n        <!-- Important Entity Data -->\n        @if (entityDetails()?.entityData) {\n          <axp-widgets-container [context]=\"entityDetails()?.entityData\">\n            <div class=\"ax-space-y-2\">\n              @for (item of getEntityPropertiesWithWidgets(); track item.name) {\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\n                  <span class=\"ax-text-sm ax-font-medium\">{{ item.title | translate | async }}:</span>\n                  <div class=\"ax-flex-1 ax-ml-2 ax-max-w-48\">\n                    <ng-container axp-widget-renderer [node]=\"item.node\" [mode]=\"'view'\"></ng-container>\n                  </div>\n                </div>\n              }\n            </div>\n          </axp-widgets-container>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-justify-end ax-sm\">\n        <ax-button [color]=\"'primary'\" [look]=\"'solid'\" text=\"Open Details\" (click)=\"navigateToDetails()\"> </ax-button>\n      </div>\n    }\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: AXPopoverModule }, { kind: "component", type: i2.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: AXPWidgetCoreModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityDetailPopoverComponent, isStandalone: true, selector: "axp-entity-detail-popover", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: true, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailPopover", first: true, predicate: ["detailPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-popover [openOn]=\"'manual'\" #detailPopover (openChange)=\"onDetailPopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[400px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold ax-text-on-lightest-surface\">\n        @if (entityDetails()?.entityData?.[textField()]) {\n          {{ entityDetails()?.entityData[textField()] }}\n        } @else {\n          {{ item()?.[textField()] }}\n        }\n      </h3>\n    </div>\n    @if (isLoadingDetails()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading details...</ax-loading>\n      </div>\n    } @else if (entityDetails()) {\n      <div class=\"ax-space-y-3 ax-mb-4\">\n        <!-- Important Entity Data -->\n        @if (entityDetails()?.entityData) {\n          <axp-widgets-container [context]=\"entityDetails()?.entityData\">\n            <div class=\"ax-space-y-2\">\n              @for (item of getEntityPropertiesWithWidgets(); track item.name) {\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\n                  <span class=\"ax-text-sm ax-font-medium\">{{ item.title | translate | async }}:</span>\n                  <div class=\"ax-flex-1 ax-ml-2 ax-max-w-48\">\n                    <ng-container axp-widget-renderer [node]=\"item.node\" [mode]=\"'view'\"></ng-container>\n                  </div>\n                </div>\n              }\n            </div>\n          </axp-widgets-container>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-justify-end ax-sm\">\n        <ax-button [color]=\"'primary'\" [look]=\"'solid'\" text=\"Open Details\" (click)=\"navigateToDetails()\"> </ax-button>\n      </div>\n    }\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: AXPopoverModule }, { kind: "component", type: i2.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: AXPWidgetCoreModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityDetailPopoverComponent, decorators: [{
             type: Component,
@@ -3222,6 +3222,16 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
     async convert(relatedEntity, context) {
         const { entityDef } = await this.getEntityDefinition(relatedEntity, context.entityResolver);
         const baseHelpers = this.createEntityHelpers(entityDef);
+        // Get update interface to determine editable properties
+        const updateInterface = entityDef?.interfaces?.master?.update;
+        const editablePropertyNames = new Set(updateInterface?.properties?.map((p) => p.name) ?? []);
+        // Check if page should be readonly (no editable properties or all editable properties are readonly)
+        const isPageReadonly = editablePropertyNames.size === 0 ||
+            (editablePropertyNames.size > 0 &&
+                [...editablePropertyNames].every((propName) => {
+                    const prop = entityDef?.properties?.find((p) => p.name === propName);
+                    return prop?.schema?.readonly === true;
+                }));
         // If referenced strategy with mapping and detail type, exclude mapped properties from UI
         const p = relatedEntity?.persistence || {};
         const strategy = p.strategy || 'embedded';
@@ -3258,6 +3268,7 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             title: `${context.rootTitle}`,
             label: relatedEntity.title ?? entityDef?.formats.displayName ?? '',
             icon: relatedEntity.icon || entityDef.icon,
+            isReadonly: isPageReadonly,
             settings: this.createPageSettings(),
             load: this.createLoadFunction(entityDef, relatedEntity, evaluateExpressions),
             execute: this.createExecuteFunction(entityDef, actions, evaluateExpressions, context),
@@ -3962,6 +3973,13 @@ class AXPMainEntityContentBuilder {
         });
         const afterSections = sortRelatedSections(afterExtraSections);
         const combinedSections = [...beforeSections, ...middleBlock, ...afterSections];
+        // Check if page should be readonly (no editable properties or all editable properties are readonly)
+        const isPageReadonly = editablePropertyNames.size === 0 ||
+            (editablePropertyNames.size > 0 &&
+                [...editablePropertyNames].every((propName) => {
+                    const prop = entity?.properties?.find((p) => p.name === propName);
+                    return prop?.schema?.readonly === true;
+                }));
         // Debug: Log final sorted sections for verification
         try {
             const beforeEntityOrderMap = new Map(beforeExtraSections.map((e) => [e.section?.id, e.entityOrder ?? Number.MAX_SAFE_INTEGER]));
@@ -4014,6 +4032,7 @@ class AXPMainEntityContentBuilder {
             icon: entity?.icon,
             actions: await this.buildEvaluatedActions(actions, evaluateExpressions),
             isPrimary: true,
+            isReadonly: isPageReadonly,
             settings: {
                 commands: {
                     reject: {
@@ -4468,7 +4487,7 @@ class AXPLayoutAdapterFactory {
         const title = await dependencies.expressionEvaluator.evaluate(entity.interfaces?.master?.single?.title, rootContext);
         return title;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutAdapterFactory, deps: [{ token: AXPRelatedEntityConverterFactory }, { token: AXPMainEntityContentBuilder }, { token: AXPLayoutAdapterBuilder }, { token: i4$1.AXPFilterOperatorMiddlewareService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutAdapterFactory, deps: [{ token: AXPRelatedEntityConverterFactory }, { token: AXPMainEntityContentBuilder }, { token: AXPLayoutAdapterBuilder }, { token: i4.AXPFilterOperatorMiddlewareService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutAdapterFactory, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutAdapterFactory, decorators: [{
@@ -4476,7 +4495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: AXPRelatedEntityConverterFactory }, { type: AXPMainEntityContentBuilder }, { type: AXPLayoutAdapterBuilder }, { type: i4$1.AXPFilterOperatorMiddlewareService }] });
+        }], ctorParameters: () => [{ type: AXPRelatedEntityConverterFactory }, { type: AXPMainEntityContentBuilder }, { type: AXPLayoutAdapterBuilder }, { type: i4.AXPFilterOperatorMiddlewareService }] });
 
 const AXPLayoutDetailsViewRouteResolver = async (route, state, entityResolver = inject(AXPEntityDefinitionRegistryService), expressionEvaluator = inject(AXPExpressionEvaluatorService), session = inject(AXPSessionService), formatService = inject(AXFormatService), workflowService = inject(AXPWorkflowService), commandService = inject(AXPCommandService), layoutAdapterFactory = inject(AXPLayoutAdapterFactory)) => {
     const moduleName = route.parent?.paramMap.get('module');
@@ -4961,25 +4980,25 @@ class AXPCategoryTreeService {
         const allItemsLabel = await this.translate.translateAsync('@general:terms.interface.selection.all-items');
         const rootNode = {
             id: 'all',
-            label: allItemsLabel,
+            title: allItemsLabel,
             icon: 'fa-solid fa-folder',
             childrenCount: items.length,
             expanded: true,
             data: { [valueField]: 'all', [textField]: allItemsLabel },
         };
         const childNodes = items.map((item) => this.convertToTreeNode(item, config));
-        rootNode.children = childNodes;
+        rootNode['children'] = childNodes;
         return rootNode;
     }
     /**
-     * Convert entity item to AXTreeNode format
+     * Convert entity item to AXTreeViewNode format
      */
     convertToTreeNode(item, config) {
         const textField = config.textField ?? 'title';
         const valueField = config.valueField ?? 'id';
         return {
             id: String(item[valueField] ?? ''),
-            label: String(item[textField] ?? ''),
+            title: String(item[textField] ?? ''),
             icon: 'fa-solid fa-folder',
             childrenCount: item['childrenCount'] || item['children']?.length || 0,
             expanded: false,
@@ -5014,7 +5033,7 @@ class AXPCategoryTreeService {
                 ...treeData.basicQueryEvent,
                 filter: {
                     field: treeData.categoryEntityDef.parentKey,
-                    value: node.id,
+                    value: node['id'],
                     operator: { type: 'equal' },
                 },
             };
@@ -5076,11 +5095,12 @@ class AXPCategoryTreeService {
      */
     updateChildrenAtPath(nodes, targetId, childNodes) {
         return nodes.map((node) => {
-            if (node.id === targetId) {
-                return { ...node, children: childNodes, childrenCount: childNodes.length };
+            if (node['id'] === targetId) {
+                return { ...node, ['children']: childNodes, childrenCount: childNodes.length };
             }
-            if (node.children?.length) {
-                return { ...node, children: this.updateChildrenAtPath(node.children, targetId, childNodes) };
+            const nodeChildren = node['children'];
+            if (nodeChildren?.length) {
+                return { ...node, ['children']: this.updateChildrenAtPath(nodeChildren, targetId, childNodes) };
             }
             return node;
         });
@@ -5106,8 +5126,10 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         this.textField = signal('title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.valueField = signal('id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.allowMultiple = signal(false, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : []));
+        this.selectionBehavior = signal('leaf', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
         this.selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
         this.searchPlaceholder = signal('@general:terms.interface.category.search.placeholder', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+        this.excludedNodeId = signal(undefined, ...(ngDevMode ? [{ debugName: "excludedNodeId" }] : [])); // Node ID to disable
         //#endregion
         //#region ----   View Queries   ----
         this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
@@ -5115,6 +5137,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         //#region ----   Component State   ----
         this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.selectedNodeIds = signal([], ...(ngDevMode ? [{ debugName: "selectedNodeIds" }] : []));
+        this.searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
         //#endregion
         //#region ----   Private Properties   ----
         this.treeData = null;
@@ -5129,10 +5152,31 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             // If no id provided, return root nodes (or search results if available)
             if (!id) {
                 // If we have search results, use them
-                if (this.searchResults) {
+                if (this.searchResults && this.searchResults.length > 0) {
                     const rootNode = await this.categoryTreeService.createRootNode(this.searchResults, this.treeConfig);
+                    // Mark excluded node as disabled in root node structure
+                    const excludedId = this.excludedNodeId();
+                    if (excludedId) {
+                        this.markNodeAsDisabled(rootNode, excludedId);
+                    }
+                    // Mark pre-selected nodes as selected in search results
+                    this.markNodesAsSelected(rootNode);
+                    // After tree loads, programmatically select pre-selected nodes
+                    const treeComponent = this.tree();
+                    if (treeComponent) {
+                        const selectedIds = this.selectedNodeIds();
+                        selectedIds.forEach((selectedId) => {
+                            if (selectedId && selectedId !== 'all') {
+                                treeComponent.selectNode(selectedId);
+                            }
+                        });
+                    }
                     return [rootNode];
                 }
+                // If search was performed but returned no results, return empty array
+                if (this.searchResults !== null && this.searchResults.length === 0) {
+                    return [];
+                }
                 // Otherwise load root categories
                 const items = await this.categoryTreeService.loadRootCategories(this.treeData, this.treeConfig);
                 if (!items) {
@@ -5140,27 +5184,71 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                 }
                 // Cache node data for getSelectedItems
                 items.forEach((item) => {
-                    const itemId = item[this.treeConfig.valueField || 'id'];
-                    if (itemId) {
+                    const itemId = String(item[this.treeConfig.valueField || 'id'] ?? '');
+                    if (itemId && typeof item === 'object' && item !== null) {
                         this.nodeDataCache.set(itemId, item);
                     }
                 });
                 const rootNode = await this.categoryTreeService.createRootNode(items, this.treeConfig);
+                // Mark excluded node as disabled in root node structure
+                const excludedId = this.excludedNodeId();
+                if (excludedId) {
+                    this.markNodeAsDisabled(rootNode, excludedId);
+                }
+                // Mark pre-selected nodes as selected in the root node structure
+                this.markNodesAsSelected(rootNode);
+                // After tree loads, programmatically select pre-selected nodes
+                const treeComponent = this.tree();
+                if (treeComponent) {
+                    const selectedIds = this.selectedNodeIds();
+                    selectedIds.forEach((id) => {
+                        if (id && id !== 'all') {
+                            treeComponent.selectNode(id);
+                        }
+                    });
+                }
                 return [rootNode];
             }
             // Create a minimal node object with just the id (loadChildren only needs node.id)
             const targetNode = {
                 id,
-                label: '',
+                title: '',
                 data: {},
             };
             const childNodes = await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
             // Cache child node data for getSelectedItems
             childNodes.forEach((node) => {
-                if (node.data && node.id) {
-                    this.nodeDataCache.set(node.id, node.data);
+                const nodeId = String(node['id'] ?? '');
+                const nodeData = node['data'];
+                if (nodeData && nodeId && typeof nodeData === 'object') {
+                    this.nodeDataCache.set(nodeId, nodeData);
                 }
             });
+            // Mark excluded node as disabled
+            const excludedId = this.excludedNodeId();
+            if (excludedId) {
+                childNodes.forEach((node) => {
+                    const nodeId = String(node['id'] ?? '');
+                    if (nodeId === excludedId) {
+                        node['disabled'] = true;
+                    }
+                });
+            }
+            // Mark pre-selected nodes as selected in the child nodes
+            childNodes.forEach((node) => {
+                this.markNodeAsSelectedIfNeeded(node);
+            });
+            // After children load, programmatically select pre-selected nodes
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                const selectedIds = this.selectedNodeIds();
+                childNodes.forEach((node) => {
+                    const nodeId = String(node['id'] ?? '');
+                    if (nodeId && selectedIds.includes(nodeId) && nodeId !== 'all') {
+                        treeComponent.selectNode(nodeId);
+                    }
+                });
+            }
             return childNodes;
         };
     }
@@ -5205,94 +5293,125 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     }
     //#endregion
     //#region ----   Public Methods   ----
-    async handleSearchChange(e) {
+    /**
+     * Handles search input value changes
+     */
+    async handleSearchChange(event) {
         if (!this.treeData || !this.treeConfig) {
             return;
         }
+        // Only process user interactions to avoid unnecessary updates
+        if (!event.isUserInteraction) {
+            return;
+        }
+        const searchTerm = (event.value ?? '').trim();
+        this.searchValue.set(searchTerm);
+        // If search is cleared, reset to normal tree view
+        if (!searchTerm) {
+            this.resetSearch();
+            return;
+        }
         this.loading.set(true);
         try {
-            const items = await this.categoryTreeService.searchCategories(e.value, this.treeData, this.treeConfig);
-            if (!items) {
-                this.searchResults = null;
-                return;
-            }
-            // Store search results for datasource callback
-            this.searchResults = items;
+            const items = await this.categoryTreeService.searchCategories(searchTerm, this.treeData, this.treeConfig);
+            // Store search results for datasource callback (even if empty array)
+            this.searchResults = items || null;
             // Cache node data for getSelectedItems
-            items.forEach((item) => {
-                const id = item[this.treeConfig.valueField || 'id'];
-                if (id) {
-                    this.nodeDataCache.set(id, item);
-                }
-            });
+            if (items && items.length > 0) {
+                const valueField = this.treeConfig.valueField || 'id';
+                items.forEach((item) => {
+                    const id = String(item[valueField] ?? '');
+                    if (id) {
+                        this.nodeDataCache.set(id, item);
+                    }
+                });
+            }
             // Trigger tree refresh
             const treeComponent = this.tree();
             if (treeComponent) {
-                treeComponent.refresh?.();
+                treeComponent.refresh();
             }
         }
         catch (error) {
             console.error('Error searching categories:', error);
+            this.resetSearch();
         }
         finally {
             this.loading.set(false);
         }
     }
+    /**
+     * Resets search state and refreshes tree to show normal view
+     */
+    resetSearch() {
+        this.searchResults = null;
+        this.loading.set(false);
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            treeComponent.refresh();
+        }
+    }
     async onNodeToggle(event) {
         // Tree component handles lazy loading via datasource callback
     }
     async onNodeSelect(event) {
         const node = event.node;
-        if (!node || node.id === 'all') {
-            return;
-        }
-        // Cache node data for getSelectedItems
-        if (node.data) {
-            this.nodeDataCache.set(node.id, node.data);
-        }
-        const currentIds = this.selectedNodeIds();
-        if (node.selected) {
-            // Add to selection if not already selected
-            if (!currentIds.includes(node.id)) {
-                this.selectedNodeIds.set([...currentIds, node.id]);
-            }
-        }
-        else {
-            // Remove from selection
-            this.selectedNodeIds.set(currentIds.filter((id) => id !== node.id));
-        }
-    }
-    handleNodeClick(event) {
-        // Extract node from event - could be { node: AXTreeNode } or just AXTreeNode
-        const node = event?.node || event;
-        if (!node || node.id === 'all') {
+        const nodeId = String(node['id'] ?? '');
+        if (!node || nodeId === 'all') {
             return;
         }
         // Cache node data for getSelectedItems
-        if (node.data) {
-            this.nodeDataCache.set(node.id, node.data);
-        }
-        if (this.allowMultiple()) {
-            // In multiple mode with checkboxes, clicking the node should toggle the checkbox
-            // The checkbox state is handled by onNodeSelect, so we just sync the selection here
-            const currentIds = this.selectedNodeIds();
-            const isSelected = currentIds.includes(node.id);
-            // Toggle selection state
-            if (isSelected) {
-                this.selectedNodeIds.set(currentIds.filter((id) => id !== node.id));
-            }
-            else {
-                this.selectedNodeIds.set([...currentIds, node.id]);
+        const nodeData = node['data'];
+        if (nodeData && typeof nodeData === 'object' && nodeData !== null && !Array.isArray(nodeData)) {
+            this.nodeDataCache.set(nodeId, nodeData);
+        }
+    }
+    async onSelectionChange(event) {
+        // Update selected node IDs from the tree component's selection state
+        const selectedNodes = event.selectedNodes || [];
+        const selectedIds = selectedNodes.map((node) => String(node['id'] ?? '')).filter((id) => id && id !== 'all');
+        this.selectedNodeIds.set(selectedIds);
+        // Cache node data for all selected nodes
+        selectedNodes.forEach((node) => {
+            const nodeId = String(node['id'] ?? '');
+            const nodeData = node['data'];
+            if (nodeData && nodeId && typeof nodeData === 'object') {
+                this.nodeDataCache.set(nodeId, nodeData);
             }
-        }
-        else {
-            // Single selection - auto-confirm on click
-            this.selectedNodeIds.set([node.id]);
-            this.close({ selected: this.getSelectedItems() });
-        }
+        });
     }
+    // protected handleNodeClick(event: any): void {
+    //   // Extract node from event - could be { node: AXTreeNode } or just AXTreeNode
+    //   const node: AXTreeViewNode = event?.node || event;
+    //   if (!node || node.id === 'all') {
+    //     return;
+    //   }
+    //   // Cache node data for getSelectedItems
+    //   if (node.data) {
+    //     this.nodeDataCache.set(node.id, node.data);
+    //   }
+    //   if (this.allowMultiple()) {
+    //     // In multiple mode with checkboxes, clicking the node should toggle the checkbox
+    //     // The checkbox state is handled by onNodeSelect event, so we just sync the selection here
+    //     const currentIds = this.selectedNodeIds();
+    //     const isSelected = currentIds.includes(node.id);
+    //     // Toggle selection state
+    //     // Note: The actual checkbox toggle is handled by the tree component's onNodeSelect event
+    //     if (isSelected) {
+    //       this.selectedNodeIds.set(currentIds.filter((id) => id !== node.id));
+    //     } else {
+    //       this.selectedNodeIds.set([...currentIds, node.id]);
+    //     }
+    //   } else {
+    //     // Single selection - auto-confirm on click
+    //     this.selectedNodeIds.set([node.id]);
+    //     this.close({ selected: this.getSelectedItems() });
+    //   }
+    // }
     async onConfirm() {
-        this.close({ selected: this.getSelectedItems() });
+        // Use internal selectedNodeIds state which is kept in sync via onNodeSelect events
+        const selectedItems = await this.getSelectedItems();
+        this.close({ selected: selectedItems });
     }
     async onCancel() {
         await this.close();
@@ -5308,9 +5427,9 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         // Fetch node data for pre-selected items that aren't in the cache
         // This ensures getSelectedItems() can retrieve them even if their branches aren't expanded
         await this.loadMissingNodeData(ids);
-        // Note: Selection syncing is now handled by the tree component
-        // The tree component should handle the selected state based on selectedNodeIds
-        // If the tree component requires manual syncing, we may need to trigger a refresh
+        // Note: Selection state is maintained in selectedNodeIds signal
+        // The tree component will sync selection state when nodes are loaded via datasource
+        // We mark nodes as selected in the datasource callback by setting node.selected = true
     }
     /**
      * Loads node data for IDs that are selected but not yet in the cache.
@@ -5347,7 +5466,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             if (res?.items) {
                 // Cache the fetched node data
                 res.items.forEach((item) => {
-                    const itemId = item[valueField];
+                    const itemId = String(item[valueField] ?? '');
                     if (itemId) {
                         this.nodeDataCache.set(itemId, item);
                     }
@@ -5358,13 +5477,170 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             console.error('Error loading missing node data:', error);
         }
     }
-    getSelectedItems() {
+    /**
+     * Marks nodes as selected in the tree structure based on selectedNodeIds.
+     * This ensures pre-selected nodes appear selected when the tree is rendered.
+     */
+    markNodesAsSelected(node) {
+        const selectedIds = this.selectedNodeIds();
+        if (selectedIds.length === 0) {
+            return;
+        }
+        // Mark the node itself if it's selected
+        this.markNodeAsSelectedIfNeeded(node);
+        // Recursively mark children
+        const nodeChildren = node['children'];
+        if (nodeChildren) {
+            nodeChildren.forEach((child) => {
+                this.markNodesAsSelected(child);
+            });
+        }
+    }
+    /**
+     * Marks a single node as selected if it's in the selectedNodeIds list.
+     */
+    markNodeAsSelectedIfNeeded(node) {
+        const selectedIds = this.selectedNodeIds();
+        const nodeId = String(node['id'] ?? '');
+        if (nodeId && selectedIds.includes(nodeId)) {
+            node['selected'] = true;
+        }
+    }
+    /**
+     * Marks a node and its children as disabled if the node ID matches the excluded ID.
+     */
+    markNodeAsDisabled(node, excludedId) {
+        const nodeId = String(node['id'] ?? '');
+        if (nodeId === excludedId) {
+            node['disabled'] = true;
+        }
+        // Recursively mark children
+        const nodeChildren = node['children'];
+        if (nodeChildren) {
+            nodeChildren.forEach((child) => {
+                this.markNodeAsDisabled(child, excludedId);
+            });
+        }
+    }
+    /**
+     * Calculate the full path from root to the selected node.
+     * Returns an array of strings like ["C", "B"] for node B under parent C.
+     */
+    async calculateNodePath(nodeId, nodeData) {
+        if (!this.treeData || !this.treeConfig) {
+            const title = this.getNodeTitle(nodeData);
+            return title ? [title] : [];
+        }
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            // No parent key means flat structure, return just the node title as array
+            const title = this.getNodeTitle(nodeData);
+            return title ? [title] : [];
+        }
+        const path = [];
+        let currentId = nodeId;
+        let currentData = nodeData;
+        const visitedIds = new Set(); // Prevent infinite loops
+        // Build path by traversing up the parent chain
+        while (currentId && currentData && !visitedIds.has(currentId)) {
+            visitedIds.add(currentId);
+            const title = this.getNodeTitle(currentData);
+            if (title) {
+                path.unshift(title); // Add to beginning to maintain hierarchy order
+            }
+            // Get parent ID from current node data
+            const parentId = currentData[parentKey];
+            if (!parentId || parentId === 'all' || parentId === currentId) {
+                break; // Reached root or invalid parent
+            }
+            // Try to get parent data from cache first
+            let parentData = this.nodeDataCache.get(String(parentId));
+            if (!parentData && this.treeData.categoryEntityQueryFunc) {
+                // Parent not in cache, fetch it
+                try {
+                    const valueField = this.treeConfig.valueField || 'id';
+                    const event = {
+                        ...this.treeData.basicQueryEvent,
+                        filter: {
+                            field: valueField,
+                            value: parentId,
+                            operator: { type: 'equal' },
+                        },
+                    };
+                    const res = await this.treeData.categoryEntityQueryFunc(event);
+                    if (res?.items && res.items.length > 0) {
+                        parentData = res.items[0];
+                        // Cache the parent data
+                        this.nodeDataCache.set(String(parentId), parentData);
+                    }
+                }
+                catch (error) {
+                    console.error('Error fetching parent node:', error);
+                    break;
+                }
+            }
+            if (!parentData) {
+                break; // Parent not found, stop traversal
+            }
+            currentId = String(parentId);
+            currentData = parentData;
+        }
+        // Return path array, or just the node title if no path
+        return path.length > 0 ? path : this.getNodeTitle(nodeData) ? [this.getNodeTitle(nodeData)] : [];
+    }
+    /**
+     * Get the display title for a node.
+     */
+    getNodeTitle(nodeData) {
+        if (!nodeData || !this.treeConfig) {
+            return '';
+        }
+        const textField = this.treeConfig.textField || 'title';
+        return String(nodeData[textField] ?? '');
+    }
+    async getSelectedItems() {
+        // Use tree component's getSelectedNodes if available for more accurate selection
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            const selectedNodes = treeComponent.getSelectedNodes();
+            const items = await Promise.all(selectedNodes.map(async (node) => {
+                const nodeId = String(node['id'] ?? '');
+                if (nodeId === 'all') {
+                    return null;
+                }
+                const nodeData = node['data'] || node;
+                if (!nodeData) {
+                    return null;
+                }
+                // Calculate path for this node
+                const path = await this.calculateNodePath(nodeId, nodeData);
+                return {
+                    ...nodeData,
+                    id: nodeId,
+                    path: path,
+                };
+            }));
+            return items.filter((item) => item != null);
+        }
+        // Fallback to cached data
         const selectedIds = this.selectedNodeIds();
         if (selectedIds.length === 0) {
             return [];
         }
-        // Get node data from cache
-        return selectedIds.map((id) => this.nodeDataCache.get(id)).filter((item) => item != null);
+        // Get node data from cache and calculate paths
+        const items = await Promise.all(selectedIds.map(async (id) => {
+            const nodeData = this.nodeDataCache.get(id);
+            if (!nodeData) {
+                return null;
+            }
+            const path = await this.calculateNodePath(id, nodeData);
+            return {
+                ...nodeData,
+                id: id,
+                path: path,
+            };
+        }));
+        return items.filter((item) => item != null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryTreeSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryTreeSelectorComponent, isStandalone: true, selector: "axp-entity-category-tree-selector", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
@@ -5380,6 +5656,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
           <div class="ax-p-4 ax-border-b">
             <ax-search-box
               (onValueChanged)="handleSearchChange($event)"
+              [value]="searchValue()"
               [delayTime]="300"
               [placeholder]="searchPlaceholder()"
             ></ax-search-box>
@@ -5387,11 +5664,15 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
           <div class="ax-flex-1 ax-overflow-auto ax-p-4">
             <ax-tree-view
               [datasource]="datasource"
-              [showCheckbox]="allowMultiple()"
+              [dragBehavior]="'none'"
+              [selectMode]="allowMultiple() ? 'multiple' : 'single'"
+              [selectionBehavior]="selectionBehavior()"
               [showIcons]="true"
+              [titleField]="textField()"
+              [idField]="valueField()"
               (onNodeSelect)="onNodeSelect($event)"
+              (onSelectionChange)="onSelectionChange($event)"
               (onNodeToggle)="onNodeToggle($event)"
-              (onNodeClick)="handleNodeClick($event)"
               #tree
             >
             </ax-tree-view>
@@ -5403,24 +5684,22 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         </div>
       }
     </div>
-    @if (allowMultiple()) {
-      <ax-footer>
-        <ax-suffix>
-          <ax-button
-            look="solid"
-            [text]="'@general:actions.cancel.title' | translate | async"
-            (onClick)="onCancel()"
-          ></ax-button>
-          <ax-button
-            look="solid"
-            color="primary"
-            [text]="'@general:actions.ok.title' | translate | async"
-            (onClick)="onConfirm()"
-          ></ax-button>
-        </ax-suffix>
-      </ax-footer>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3$2.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: AXSearchBoxModule }, { kind: "component", type: i3$3.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: AXSkeletonModule }, { kind: "component", type: i4$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "showCheckbox", "checkChildrenOnSelect", "intermediateState", "checkOnClick", "dragMode", "dragOperationType", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "nodeHeight", "look", "itemTemplate"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          look="solid"
+          [text]="'@general:actions.cancel.title' | translate | async"
+          (onClick)="onCancel()"
+        ></ax-button>
+        <ax-button
+          look="solid"
+          color="primary"
+          [text]="'@general:actions.ok.title' | translate | async"
+          (onClick)="onConfirm()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$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: AXSearchBoxModule }, { kind: "component", type: i3$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: AXSkeletonModule }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "showCheckbox", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryTreeSelectorComponent, decorators: [{
             type: Component,
@@ -5439,6 +5718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           <div class="ax-p-4 ax-border-b">
             <ax-search-box
               (onValueChanged)="handleSearchChange($event)"
+              [value]="searchValue()"
               [delayTime]="300"
               [placeholder]="searchPlaceholder()"
             ></ax-search-box>
@@ -5446,11 +5726,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           <div class="ax-flex-1 ax-overflow-auto ax-p-4">
             <ax-tree-view
               [datasource]="datasource"
-              [showCheckbox]="allowMultiple()"
+              [dragBehavior]="'none'"
+              [selectMode]="allowMultiple() ? 'multiple' : 'single'"
+              [selectionBehavior]="selectionBehavior()"
               [showIcons]="true"
+              [titleField]="textField()"
+              [idField]="valueField()"
               (onNodeSelect)="onNodeSelect($event)"
+              (onSelectionChange)="onSelectionChange($event)"
               (onNodeToggle)="onNodeToggle($event)"
-              (onNodeClick)="handleNodeClick($event)"
               #tree
             >
             </ax-tree-view>
@@ -5462,23 +5746,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         </div>
       }
     </div>
-    @if (allowMultiple()) {
-      <ax-footer>
-        <ax-suffix>
-          <ax-button
-            look="solid"
-            [text]="'@general:actions.cancel.title' | translate | async"
-            (onClick)="onCancel()"
-          ></ax-button>
-          <ax-button
-            look="solid"
-            color="primary"
-            [text]="'@general:actions.ok.title' | translate | async"
-            (onClick)="onConfirm()"
-          ></ax-button>
-        </ax-suffix>
-      </ax-footer>
-    }
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          look="solid"
+          [text]="'@general:actions.cancel.title' | translate | async"
+          (onClick)="onCancel()"
+        ></ax-button>
+        <ax-button
+          look="solid"
+          color="primary"
+          [text]="'@general:actions.ok.title' | translate | async"
+          (onClick)="onConfirm()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
@@ -5673,20 +5955,397 @@ var entityCategoryWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPEntityCategoryWidgetColumnComponent: AXPEntityCategoryWidgetColumnComponent
 });
 
+//#region ----   Constants   ----
+const DEFAULT_CHARACTER_LIMIT = 20;
+const DEFAULT_SECTION_LIMIT = 2;
+const ELLIPSIS_ICON = 'fa-solid fa-ellipsis';
+const SEPARATOR_ICON = 'fa-solid fa-chevron-right';
+const EYE_ICON = 'fa-solid fa-eye';
+const SEPARATOR_WIDTH = 16; // Approximate width of separator icon + gap
+const ELLIPSIS_WIDTH = 24; // Approximate width of ellipsis icon + gaps
+const MIN_CHAR_WIDTH = 8; // Minimum character width estimate
+const MAX_CHAR_WIDTH = 12; // Maximum character width estimate
+//#endregion
+class AXPTruncatedBreadcrumbComponent {
+    //#endregion
+    //#region ----   Constructor & Lifecycle   ----
+    constructor() {
+        //#region ----   Component Inputs   ----
+        /**
+         * Array of path sections to display
+         */
+        this.sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : []));
+        /**
+         * Maximum number of characters per section.
+         * Can be a number or 'auto' to calculate based on available space.
+         */
+        this.characterLimit = input(DEFAULT_CHARACTER_LIMIT, ...(ngDevMode ? [{ debugName: "characterLimit" }] : []));
+        /**
+         * Maximum number of sections to display before showing ellipsis.
+         * Can be a number or 'auto' to calculate based on available space.
+         */
+        this.sectionLimit = input(DEFAULT_SECTION_LIMIT, ...(ngDevMode ? [{ debugName: "sectionLimit" }] : []));
+        /**
+         * Icon class for separator between sections
+         */
+        this.separatorIcon = input(SEPARATOR_ICON, ...(ngDevMode ? [{ debugName: "separatorIcon" }] : []));
+        /**
+         * Icon class for ellipsis
+         */
+        this.ellipsisIcon = input(ELLIPSIS_ICON, ...(ngDevMode ? [{ debugName: "ellipsisIcon" }] : []));
+        /**
+         * Icon class for eye icon (collapse button)
+         */
+        this.eyeIcon = input(EYE_ICON, ...(ngDevMode ? [{ debugName: "eyeIcon" }] : []));
+        //#endregion
+        //#region ----   View Queries   ----
+        this.container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : []));
+        //#endregion
+        //#region ----   Component State   ----
+        this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+        this.containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+        this.resizeObserver = null;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Effective character limit (calculated if 'auto', otherwise uses input value)
+         */
+        this.effectiveCharacterLimit = computed(() => {
+            const limit = this.characterLimit();
+            if (limit === 'auto') {
+                return this.calculateAutoCharacterLimit();
+            }
+            return limit;
+        }, ...(ngDevMode ? [{ debugName: "effectiveCharacterLimit" }] : []));
+        /**
+         * Effective section limit (calculated if 'auto', otherwise uses input value)
+         */
+        this.effectiveSectionLimit = computed(() => {
+            const limit = this.sectionLimit();
+            if (limit === 'auto') {
+                return this.calculateAutoSectionLimit();
+            }
+            return limit;
+        }, ...(ngDevMode ? [{ debugName: "effectiveSectionLimit" }] : []));
+        /**
+         * All sections with truncated text (for collapsed display)
+         */
+        this.allSections = computed(() => {
+            if (this.isExpanded()) {
+                return this.sections().map((section) => ({ text: section, original: section }));
+            }
+            const charLimit = this.effectiveCharacterLimit();
+            return this.sections().map((section) => ({
+                text: this.truncateText(section, charLimit),
+                original: section,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "allSections" }] : []));
+        /**
+         * All sections with full text (for expanded display)
+         */
+        this.allSectionsFull = computed(() => {
+            return this.sections();
+        }, ...(ngDevMode ? [{ debugName: "allSectionsFull" }] : []));
+        /**
+         * Sections to display (first N sections) when collapsed
+         */
+        this.displayedSections = computed(() => {
+            const limit = this.effectiveSectionLimit();
+            const sections = this.allSections();
+            return sections.slice(0, limit);
+        }, ...(ngDevMode ? [{ debugName: "displayedSections" }] : []));
+        /**
+         * Last section (always shown if there are hidden sections)
+         */
+        this.lastSection = computed(() => {
+            const sections = this.allSections();
+            return sections[sections.length - 1] || { text: '', original: '' };
+        }, ...(ngDevMode ? [{ debugName: "lastSection" }] : []));
+        /**
+         * Check if there are hidden sections
+         */
+        this.hasHiddenSections = computed(() => {
+            const totalSections = this.sections().length;
+            const limit = this.effectiveSectionLimit();
+            // If we have more sections than the limit, we need to show ellipsis + last section
+            // Example: total=2, limit=1 -> show [section0, ellipsis, section1]
+            // Example: total=3, limit=1 -> show [section0, ellipsis, section2]
+            // Example: total=2, limit=2 -> show [section0, section1] (no ellipsis)
+            return totalSections > limit;
+        }, ...(ngDevMode ? [{ debugName: "hasHiddenSections" }] : []));
+        afterNextRender(() => {
+            this.initializeResizeObserver();
+        });
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Handles click on separator icon to expand
+     */
+    handleSeparatorClick(event) {
+        if (!this.hasHiddenSections()) {
+            return;
+        }
+        event.stopPropagation();
+        this.isExpanded.set(true);
+    }
+    /**
+     * Handles click on ellipsis icon to expand
+     */
+    handleEllipsisClick(event) {
+        event.stopPropagation();
+        this.isExpanded.set(true);
+    }
+    /**
+     * Handles click on eye icon to collapse
+     */
+    handleCollapseClick(event) {
+        event.stopPropagation();
+        this.isExpanded.set(false);
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    /**
+     * Initializes ResizeObserver to track container width
+     */
+    initializeResizeObserver() {
+        const containerElement = this.container()?.nativeElement;
+        if (!containerElement) {
+            return;
+        }
+        // Set initial width
+        this.containerWidth.set(containerElement.offsetWidth);
+        // Create ResizeObserver
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                this.containerWidth.set(width);
+            }
+        });
+        // Observe container
+        this.resizeObserver.observe(containerElement);
+    }
+    /**
+     * Calculates automatic character limit based on available space
+     */
+    calculateAutoCharacterLimit() {
+        const width = this.containerWidth();
+        if (width === 0) {
+            return DEFAULT_CHARACTER_LIMIT;
+        }
+        // Estimate: assume average character width
+        const avgCharWidth = (MIN_CHAR_WIDTH + MAX_CHAR_WIDTH) / 2;
+        // Reserve space for separators, ellipsis, and padding
+        const reservedSpace = SEPARATOR_WIDTH * 2 + ELLIPSIS_WIDTH + 32; // Extra padding
+        const availableSpace = width - reservedSpace;
+        // Calculate how many characters can fit
+        const estimatedChars = Math.floor(availableSpace / avgCharWidth);
+        return Math.max(10, Math.min(estimatedChars, 100)); // Clamp between 10 and 100
+    }
+    /**
+     * Calculates automatic section limit based on available space
+     */
+    calculateAutoSectionLimit() {
+        const width = this.containerWidth();
+        const sections = this.sections();
+        if (width === 0 || sections.length === 0) {
+            return DEFAULT_SECTION_LIMIT;
+        }
+        // Calculate average section length
+        const avgSectionLength = sections.reduce((sum, section) => sum + section.length, 0) / sections.length;
+        const charLimit = this.effectiveCharacterLimit();
+        const truncatedLength = Math.min(avgSectionLength, charLimit);
+        // Estimate section width: text + separator
+        const avgCharWidth = (MIN_CHAR_WIDTH + MAX_CHAR_WIDTH) / 2;
+        const sectionWidth = truncatedLength * avgCharWidth + SEPARATOR_WIDTH;
+        // First, check if all sections can fit without ellipsis
+        const totalWidthNeeded = sections.length * sectionWidth;
+        if (totalWidthNeeded <= width - 32) {
+            // All sections fit, return full length
+            return sections.length;
+        }
+        // Reserve space for ellipsis and last section
+        const lastSectionLength = Math.min(sections[sections.length - 1]?.length || 0, charLimit);
+        const lastSectionWidth = lastSectionLength * avgCharWidth;
+        const reservedSpace = ELLIPSIS_WIDTH + SEPARATOR_WIDTH * 2 + lastSectionWidth + 32; // Extra padding
+        const availableSpace = width - reservedSpace;
+        // Calculate how many sections can fit
+        const estimatedSections = Math.floor(availableSpace / sectionWidth);
+        // At least 1, but can return up to sections.length if all fit
+        return Math.max(1, Math.min(estimatedSections, sections.length));
+    }
+    /**
+     * Truncates text to character limit with ellipsis
+     */
+    truncateText(text, limit) {
+        if (!text || text.length <= limit) {
+            return text;
+        }
+        return text.substring(0, limit) + '...';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTruncatedBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPTruncatedBreadcrumbComponent, isStandalone: true, selector: "axp-truncated-breadcrumb", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, characterLimit: { classPropertyName: "characterLimit", publicName: "characterLimit", isSignal: true, isRequired: false, transformFunction: null }, sectionLimit: { classPropertyName: "sectionLimit", publicName: "sectionLimit", isSignal: true, isRequired: false, transformFunction: null }, separatorIcon: { classPropertyName: "separatorIcon", publicName: "separatorIcon", isSignal: true, isRequired: false, transformFunction: null }, ellipsisIcon: { classPropertyName: "ellipsisIcon", publicName: "ellipsisIcon", isSignal: true, isRequired: false, transformFunction: null }, eyeIcon: { classPropertyName: "eyeIcon", publicName: "eyeIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-block" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ax-flex ax-items-center ax-gap-2 ax-flex-wrap" #container>
+      @if (sections().length === 0) {
+        <span class="ax-text-muted">---</span>
+      } @else {
+        @if (isExpanded()) {
+          <!-- Expanded view with eye icon at the end to collapse -->
+          @for (section of allSectionsFull(); track $index; let isLast = $last) {
+            <span class="ax-text-sm">{{ section }}</span>
+            @if (!isLast) {
+              <ax-icon [class]="separatorIcon()" class="ax-text-muted ax-text-xs"></ax-icon>
+            }
+          }
+          <span
+            class="ax-text-sm ax-text-primary ax-cursor-pointer hover:ax-opacity-75 ax-transition-opacity ax-ml-1"
+            (click)="handleCollapseClick($event)"
+            title="Collapse breadcrumb"
+          >
+            <ax-icon [class]="eyeIcon()" class="ax-text-primary"></ax-icon>
+          </span>
+        } @else {
+          <!-- Collapsed view with limits -->
+          @for (section of displayedSections(); track $index; let isLast = $last) {
+            <span class="ax-text-sm">{{ section.text }}</span>
+            @if (!isLast) {
+              <ax-icon
+                [class]="separatorIcon()"
+                [class.ax-cursor-pointer]="hasHiddenSections()"
+                [class.hover:ax-opacity-75]="hasHiddenSections()"
+                class="ax-text-muted ax-text-xs ax-transition-opacity"
+                (click)="handleSeparatorClick($event)"
+                [title]="hasHiddenSections() ? 'Expand to show full path' : ''"
+              ></ax-icon>
+            }
+          }
+
+          @if (hasHiddenSections()) {
+            <ax-icon
+              [class]="separatorIcon()"
+              [class.ax-cursor-pointer]="true"
+              [class.hover:ax-opacity-75]="true"
+              class="ax-text-muted ax-text-xs ax-transition-opacity"
+              (click)="handleSeparatorClick($event)"
+              title="Expand to show full path"
+            ></ax-icon>
+            <span
+              class="ax-text-sm ax-text-primary ax-cursor-pointer hover:ax-opacity-75 ax-transition-opacity"
+              (click)="handleEllipsisClick($event)"
+              title="Expand to show full path"
+            >
+              <ax-icon [class]="ellipsisIcon()" class="ax-text-primary"></ax-icon>
+            </span>
+            <ax-icon
+              [class]="separatorIcon()"
+              [class.ax-cursor-pointer]="true"
+              [class.hover:ax-opacity-75]="true"
+              class="ax-text-muted ax-text-xs ax-transition-opacity"
+              (click)="handleSeparatorClick($event)"
+              title="Expand to show full path"
+            ></ax-icon>
+            <span class="ax-text-sm">{{ lastSection().text }}</span>
+          }
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTruncatedBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-truncated-breadcrumb',
+                    standalone: true,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'ax-block',
+                    },
+                    template: `
+    <div class="ax-flex ax-items-center ax-gap-2 ax-flex-wrap" #container>
+      @if (sections().length === 0) {
+        <span class="ax-text-muted">---</span>
+      } @else {
+        @if (isExpanded()) {
+          <!-- Expanded view with eye icon at the end to collapse -->
+          @for (section of allSectionsFull(); track $index; let isLast = $last) {
+            <span class="ax-text-sm">{{ section }}</span>
+            @if (!isLast) {
+              <ax-icon [class]="separatorIcon()" class="ax-text-muted ax-text-xs"></ax-icon>
+            }
+          }
+          <span
+            class="ax-text-sm ax-text-primary ax-cursor-pointer hover:ax-opacity-75 ax-transition-opacity ax-ml-1"
+            (click)="handleCollapseClick($event)"
+            title="Collapse breadcrumb"
+          >
+            <ax-icon [class]="eyeIcon()" class="ax-text-primary"></ax-icon>
+          </span>
+        } @else {
+          <!-- Collapsed view with limits -->
+          @for (section of displayedSections(); track $index; let isLast = $last) {
+            <span class="ax-text-sm">{{ section.text }}</span>
+            @if (!isLast) {
+              <ax-icon
+                [class]="separatorIcon()"
+                [class.ax-cursor-pointer]="hasHiddenSections()"
+                [class.hover:ax-opacity-75]="hasHiddenSections()"
+                class="ax-text-muted ax-text-xs ax-transition-opacity"
+                (click)="handleSeparatorClick($event)"
+                [title]="hasHiddenSections() ? 'Expand to show full path' : ''"
+              ></ax-icon>
+            }
+          }
+
+          @if (hasHiddenSections()) {
+            <ax-icon
+              [class]="separatorIcon()"
+              [class.ax-cursor-pointer]="true"
+              [class.hover:ax-opacity-75]="true"
+              class="ax-text-muted ax-text-xs ax-transition-opacity"
+              (click)="handleSeparatorClick($event)"
+              title="Expand to show full path"
+            ></ax-icon>
+            <span
+              class="ax-text-sm ax-text-primary ax-cursor-pointer hover:ax-opacity-75 ax-transition-opacity"
+              (click)="handleEllipsisClick($event)"
+              title="Expand to show full path"
+            >
+              <ax-icon [class]="ellipsisIcon()" class="ax-text-primary"></ax-icon>
+            </span>
+            <ax-icon
+              [class]="separatorIcon()"
+              [class.ax-cursor-pointer]="true"
+              [class.hover:ax-opacity-75]="true"
+              class="ax-text-muted ax-text-xs ax-transition-opacity"
+              (click)="handleSeparatorClick($event)"
+              title="Expand to show full path"
+            ></ax-icon>
+            <span class="ax-text-sm">{{ lastSection().text }}</span>
+          }
+        }
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXDecoratorModule],
+                }]
+        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], characterLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterLimit", required: false }] }], sectionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionLimit", required: false }] }], separatorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIcon", required: false }] }], ellipsisIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsisIcon", required: false }] }], eyeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyeIcon", required: false }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
+
 class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Services & Dependencies   ----
         this.entityResolver = inject(AXPEntityResolver);
-        this.formatService = inject(AXFormatService);
         this.popupService = inject(AXPopupService);
         this.translateService = inject(AXTranslationService);
         this.cdr = inject(ChangeDetectorRef);
         //#endregion
-        //#region ----   View Queries   ----
-        this.selectBox = viewChild('selectBox', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
-        this.tagBox = viewChild('tagBoxComponent', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
-        //#endregion
         //#region ----   Computed Properties   ----
         this.entity = computed(() => this.options()['entity'] ?? '', ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
@@ -5695,7 +6354,8 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.expose = computed(() => this.options()['expose'], ...(ngDevMode ? [{ debugName: "expose" }] : []));
         this.allowClear = computed(() => (this.options()['allowClear'] ?? false), ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
-        this.look = computed(() => this.options()['look'] ?? 'lookup', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.characterLimit = computed(() => this.options()['characterLimit'] ?? 'auto', ...(ngDevMode ? [{ debugName: "characterLimit" }] : []));
+        this.sectionLimit = computed(() => this.options()['sectionLimit'] ?? 'auto', ...(ngDevMode ? [{ debugName: "sectionLimit" }] : []));
         this.defaultTextField = computed(() => {
             const textField = this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
             return textField;
@@ -5712,27 +6372,9 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.searchTerm = signal(null, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
         //#endregion
         //#region ----   Private Properties   ----
         this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
-        this.dataSource = computed(() => {
-            const entity = this.entityDef();
-            if (!entity)
-                return null;
-            return new AXDataSource({
-                byKey: (key) => {
-                    const func = entity.queries.byKey.execute;
-                    return func();
-                },
-                load: (e) => {
-                    const func = entity.queries.list?.execute;
-                    return func(e);
-                },
-                pageSize: 10,
-                key: 'id',
-            });
-        }, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         //#endregion
         //#region ----   Effects   ----
         this.#efEntity = effect(async () => {
@@ -5743,7 +6385,13 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
             this.entityDef.set(await this.entityResolver.get(module, entity));
         }, ...(ngDevMode ? [{ debugName: "#efEntity" }] : []));
         this.#efValue = effect(() => {
-            if (this.getValue()) {
+            const value = this.getValue();
+            const entity = this.entityDef();
+            // Wait for entity definition to be loaded before processing value
+            if (!entity) {
+                return;
+            }
+            if (value) {
                 this.findByValue();
             }
             else {
@@ -5775,9 +6423,16 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
     #efSearchPlaceholder;
     //#endregion
     //#region ----   Public Methods   ----
-    handleOnClick(e) {
+    handleAddClick(e) {
         this.showTreeSelector();
     }
+    handleRemoveItemClick(event, item) {
+        event.nativeEvent.stopPropagation();
+        this.removeItem(item);
+    }
+    handleClearClick() {
+        this.clear();
+    }
     async showTreeSelector() {
         this.isOpen.set(true);
         const currentValue = this.getValue();
@@ -5786,21 +6441,61 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
                 .map((v) => String(extractValue(v, this.valueField())))
                 .filter((id) => id && id !== 'all')
             : [];
+        // Get current entity ID from context (if editing an entity)
+        const currentEntityId = this.contextService.getValue('id');
+        const excludedNodeId = currentEntityId ? String(currentEntityId) : undefined;
         try {
             const result = await this.popupService.open(AXPEntityCategoryTreeSelectorComponent, {
                 title: `${this.translateService.translateSync('@general:widgets.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural ?? '')}`,
-                size: 'lg',
+                size: 'md',
                 data: {
                     entityKey: signal(this.entity()),
                     textField: signal(this.textField()),
                     valueField: signal(this.valueField()),
-                    allowMultiple: signal(this.multiple() ?? false),
+                    allowMultiple: signal(this.multiple()),
                     selectedValues: signal(selectedIds),
                     searchPlaceholder: signal(this.searchPlaceholderText()),
+                    excludedNodeId: signal(excludedNodeId),
                 },
             });
             if (result?.data?.selected && Array.isArray(result.data.selected)) {
-                this.setItems(result.data.selected);
+                if (this.multiple()) {
+                    // In multiple mode, merge with existing selection
+                    const existingItems = this.selectedItems();
+                    const newItems = result.data.selected;
+                    // Create a map of existing items by their ID
+                    const existingItemsMap = new Map();
+                    existingItems.forEach((item) => {
+                        const id = String(get(item, this.valueField()) ?? '');
+                        if (id) {
+                            existingItemsMap.set(id, item);
+                        }
+                    });
+                    // Merge items, preferring new items (with paths) over existing ones
+                    const mergedItems = [];
+                    const processedIds = new Set();
+                    // First, add all new items (they have paths)
+                    newItems.forEach((item) => {
+                        const id = String(get(item, this.valueField()) ?? '');
+                        if (id && !processedIds.has(id)) {
+                            mergedItems.push(item);
+                            processedIds.add(id);
+                        }
+                    });
+                    // Then, add existing items that weren't in new items (preserve them)
+                    existingItems.forEach((item) => {
+                        const id = String(get(item, this.valueField()) ?? '');
+                        if (id && !processedIds.has(id)) {
+                            mergedItems.push(item);
+                            processedIds.add(id);
+                        }
+                    });
+                    await this.setItems(mergedItems);
+                }
+                else {
+                    // In single mode, replace selection
+                    await this.setItems(result.data.selected);
+                }
             }
         }
         catch (error) {
@@ -5808,77 +6503,98 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         }
         finally {
             this.isOpen.set(false);
-            this.selectBox()?.focus();
         }
     }
-    selectBoxValueChange(e) {
-        const items = e.component.selectedItems;
-        this.setItems(items);
-    }
-    handleValueChange(e) {
-        if (e.isUserInteraction) {
-            if (isNil(e.value) || (Array.isArray(e.value) && e.value.length === 0)) {
-                this.clear();
-            }
-            else {
-                this.setValue(this.singleOrMultiple(e.value));
-            }
+    async removeItem(item) {
+        if (this.disabled()) {
+            return;
         }
-    }
-    handleSearchInputChange(e) {
-        if (e.isUserInteraction) {
-            this.searchTerm.set(e.value ?? '');
+        const currentItems = this.selectedItems();
+        const itemId = get(item, this.valueField());
+        const filteredItems = currentItems.filter((i) => get(i, this.valueField()) !== itemId);
+        if (filteredItems.length === 0) {
+            this.clear();
         }
-    }
-    handleKeyUp(e) {
-        const keyEvent = e.nativeEvent;
-        if (keyEvent.code == 'ArrowDown') {
-            this.showTreeSelector();
+        else {
+            await this.setItems(filteredItems);
         }
     }
-    handleOnBlur(e) {
-        setTimeout(() => {
-            if (!this.isOpen()) {
-                this.clearInput();
-            }
-        }, 100);
-    }
-    handleClearClick() {
-        this.clear();
-    }
     clear() {
         this.setValue(null);
-        this.clearInput();
         this.selectedItems.set([]);
-    }
-    clearInput() {
-        this.tagBox()?.inputValue.set('');
-        this.searchTerm.set('');
+        this.cdr.markForCheck();
     }
     //#endregion
     //#region ----   Private Methods   ----
     async findByValue() {
         this.isLoading.set(true);
         const rawValue = this.getValue();
+        // If no value, clear and return
+        if (!rawValue) {
+            this.setItems([]);
+            this.isLoading.set(false);
+            return;
+        }
         const values = castArray(rawValue);
         const byKey = this.entityDef()?.queries.byKey?.execute;
-        if (byKey && values.length) {
+        if (!byKey) {
+            this.setItems([]);
+            this.isLoading.set(false);
+            return;
+        }
+        if (values.length === 0) {
+            this.setItems([]);
+            this.isLoading.set(false);
+            return;
+        }
+        try {
             if (this.multiple()) {
-                const items = await Promise.all(values.map((value) => byKey(extractValue(value, this.valueField()))));
-                this.setItems(items);
+                // Filter out null/undefined/empty values
+                const validValues = values.filter((v) => v != null && v !== '' && v !== 'all');
+                if (validValues.length === 0) {
+                    this.setItems([]);
+                    this.isLoading.set(false);
+                    return;
+                }
+                const items = await Promise.all(validValues.map((value) => {
+                    const id = extractValue(value, this.valueField());
+                    if (!id)
+                        return null;
+                    return byKey(id);
+                }));
+                // Filter out null results
+                const validItems = items.filter((item) => item != null);
+                // Calculate paths for items loaded from value
+                const itemsWithPaths = await Promise.all(validItems.map((item) => this.calculateItemPath(item)));
+                this.setItems(itemsWithPaths);
             }
             else {
                 const id = extractValue(values[0], this.valueField());
+                if (!id || id === 'all') {
+                    this.setItems([]);
+                    this.isLoading.set(false);
+                    return;
+                }
                 const item = await byKey(id);
-                this.setItems(item);
+                if (!item) {
+                    this.setItems([]);
+                    this.isLoading.set(false);
+                    return;
+                }
+                // Calculate path for item loaded from value
+                const itemWithPath = await this.calculateItemPath(item);
+                this.setItems(itemWithPath);
             }
         }
-        else {
+        catch (error) {
+            console.error('Error loading category items from value:', error);
             this.setItems([]);
         }
-        this.isLoading.set(false);
+        finally {
+            this.isLoading.set(false);
+        }
     }
-    setItems(items) {
+    async setItems(items) {
         if (!items || items.length == 0) {
             this.selectedItems.set([]);
             this.setValue(null);
@@ -5886,24 +6602,31 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
             return;
         }
         items = castArray(items);
-        this.clearInput();
-        this.selectedItems.set(items);
-        const keys = items.map((item) => get(item, this.valueField()));
-        const text = items.map((item) => get(item, this.displayField()));
+        // Ensure all items have paths
+        const itemsWithPaths = await Promise.all(items.map(async (item) => {
+            // If item already has a path array, return it as is
+            if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+                return item;
+            }
+            // Otherwise, calculate the path
+            return await this.calculateItemPath(item);
+        }));
+        this.selectedItems.set(itemsWithPaths);
+        const keys = itemsWithPaths.map((item) => get(item, this.valueField()));
         // Extract data from valueField and set context by expose path
         if (this.expose()) {
             const exposeValue = castArray(this.expose());
             const itemToExpose = {};
             exposeValue.forEach((i) => {
                 if (typeof i == 'string') {
-                    const values = items.map((item) => set({}, i, get(item, i)));
+                    const values = itemsWithPaths.map((item) => set({}, i, get(item, i)));
                     setSmart(itemToExpose, i, this.singleOrMultiple(values));
                 }
                 else {
                     // Extract data from item by source path and set context by target path
                     const values = this.multiple()
-                        ? items.map((item) => set({}, i.source, get(item, i.source)))
-                        : items.map((item) => get(item, i.source));
+                        ? itemsWithPaths.map((item) => set({}, i.source, get(item, i.source)))
+                        : itemsWithPaths.map((item) => get(item, i.source));
                     setSmart(itemToExpose, i.target, this.singleOrMultiple(values));
                 }
             });
@@ -5914,232 +6637,230 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         else {
             this.setValue(this.singleOrMultiple(keys));
         }
-        // Trigger change detection to update selectbox/tagbox
+        // Trigger change detection
         this.cdr.markForCheck();
     }
     singleOrMultiple(values) {
         return this.multiple() ? values : values[0];
     }
-    getTagLabel(item) {
+    getItemLabel(item) {
         if (!item) {
             return '';
         }
+        // If path is available as array, join it with customizable separator
+        if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+            return this.joinPath(item.path);
+        }
+        // Fall back to display field if no path
         return get(item, this.displayField()) ?? '';
     }
+    /**
+     * Get item path as array for breadcrumb component
+     */
+    getItemPath(item) {
+        if (!item) {
+            return [];
+        }
+        // If path is available as array, return it
+        if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+            return item.path;
+        }
+        // Fall back to display field if no path
+        const displayValue = get(item, this.displayField());
+        return displayValue ? [String(displayValue)] : [];
+    }
+    /**
+     * Join path array with separator.
+     * Override this method to customize the separator (e.g., " > ", " -> ", " / ")
+     */
+    joinPath(path) {
+        return path.join(' > ');
+    }
+    getItemId(item) {
+        if (!item) {
+            return '';
+        }
+        return String(get(item, this.valueField()) ?? '');
+    }
+    /**
+     * Calculate the full path from root to the item.
+     * Returns an array of strings like ["C", "B"] for item B under parent C.
+     */
+    async calculateItemPath(item) {
+        if (!item || !this.entityDef()) {
+            return item;
+        }
+        // If item already has a path array, return it as is
+        if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+            return item;
+        }
+        const parentKey = this.entityDef()?.parentKey;
+        if (!parentKey) {
+            // No parent key means flat structure, return item with just its title as path array
+            const title = get(item, this.displayField()) ?? '';
+            return { ...item, path: title ? [title] : [] };
+        }
+        const valueField = this.valueField();
+        const textField = this.displayField();
+        const byKey = this.entityDef()?.queries.byKey?.execute;
+        if (!byKey) {
+            return item;
+        }
+        const path = [];
+        let currentItem = item;
+        const visitedIds = new Set(); // Prevent infinite loops
+        // Build path by traversing up the parent chain
+        while (currentItem) {
+            const currentId = String(get(currentItem, valueField) ?? '');
+            if (!currentId || visitedIds.has(currentId)) {
+                break; // Prevent infinite loops
+            }
+            visitedIds.add(currentId);
+            const title = String(get(currentItem, textField) ?? '');
+            if (title) {
+                path.unshift(title); // Add to beginning to maintain hierarchy order
+            }
+            // Get parent ID from current item
+            const parentId = get(currentItem, parentKey);
+            if (!parentId || parentId === 'all' || parentId === currentId) {
+                break; // Reached root or invalid parent
+            }
+            try {
+                // Fetch parent item
+                const parentItem = await byKey(parentId);
+                if (!parentItem) {
+                    break; // Parent not found, stop traversal
+                }
+                currentItem = parentItem;
+            }
+            catch (error) {
+                console.error('Error fetching parent item:', error);
+                break;
+            }
+        }
+        // Return item with path array, or just the item title if no path
+        const pathArray = path.length > 0 ? path : get(item, textField) ? [String(get(item, textField))] : [];
+        return { ...item, path: pathArray };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetEditComponent, isStandalone: true, selector: "axp-entity-category-widget-edit", viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }, { propertyName: "tagBox", first: true, predicate: ["tagBoxComponent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    @if (dataSource()) {
-      @if (look() == 'select') {
-        <ax-select-box
-          #selectBox
-          [dataSource]="dataSource()!"
-          [ngModel]="selectedItems()"
-          [textField]="displayField()"
-          [valueField]="valueField()"
-          [disabled]="disabled()"
-          [multiple]="multiple()"
-          (onValueChanged)="selectBoxValueChange($event)"
-        >
-          <ax-search-box
-            [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
-            (onValueChanged)="handleSearchInputChange($event)"
-          >
-            <ax-clear-button></ax-clear-button>
-          </ax-search-box>
-          @for (validation of validationRules(); track $index) {
-            <ax-validation-rule
-              [rule]="validation.rule"
-              [message]="validation.options?.message"
-              [options]="validation.options"
-            ></ax-validation-rule>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetEditComponent, isStandalone: true, selector: "axp-entity-category-widget-edit", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-gap-3">
+      @if (selectedItems().length > 0) {
+        <div class="ax-flex ax-flex-col ax-gap-2">
+          @for (item of selectedItems(); track getItemId(item)) {
+            <div class="ax-flex ax-items-center ax-gap-2 ax-p-2 ax-border ax-primary-lightest ax-rounded-xl">
+              <axp-truncated-breadcrumb
+                [sections]="getItemPath(item)"
+                [characterLimit]="characterLimit()"
+                [sectionLimit]="sectionLimit()"
+                class="ax-flex-1"
+              ></axp-truncated-breadcrumb>
+              <ax-button color="ghost" look="blank" class="ax-xs" (onClick)="handleRemoveItemClick($event, item)">
+                <ax-icon icon="ax-icon ax-icon-close"></ax-icon>
+              </ax-button>
+            </div>
           }
-          @if (allowClear()) {
-            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
-          }
-          <ax-suffix>
-            <ax-button
-              color="ghost"
-              look="blank"
-              [disabled]="isLoading() || disabled()"
-              (onClick)="handleOnClick($event)"
-            >
-              @if (isLoading()) {
-                <ax-loading></ax-loading>
-              } @else {
-                <ax-icon icon="far fa-search"></ax-icon>
-              }
-            </ax-button>
-          </ax-suffix>
-        </ax-select-box>
-      } @else {
-        <ax-tag-box
-          #tagBoxComponent
-          [tagTemplate]="tagTemplate"
-          [ngModel]="selectedItems()"
-          [textField]="displayField()"
-          [valueField]="valueField()"
-          (onValueChanged)="handleValueChange($event)"
-          [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
-          [addOnEnter]="false"
-          [addOnComma]="false"
-          [disabled]="disabled()"
-          (onKeyUp)="handleKeyUp($event)"
-          (onBlur)="handleOnBlur($event)"
+        </div>
+      }
+
+      <div class="ax-flex ax-items-center ax-gap-2">
+        <ax-button
+          [text]="'@general:actions.add.title' | translate | async"
+          color="primary"
+          [disabled]="isLoading() || disabled()"
+          (onClick)="handleAddClick($event)"
         >
-          @for (validation of validationRules(); track $index) {
-            <ax-validation-rule
-              [rule]="validation.rule"
-              [message]="validation.options?.message"
-              [options]="validation.options"
-            ></ax-validation-rule>
-          }
-          @if (selectedItems().length > 1 || allowClear()) {
-            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          @if (isLoading()) {
+            <ax-loading></ax-loading>
+          } @else {
+            <ax-icon icon="far fa-plus"></ax-icon>
           }
+        </ax-button>
 
-          <ax-suffix>
-            <ax-button
-              color="ghost"
-              look="blank"
-              [disabled]="isLoading() || disabled()"
-              (onClick)="handleOnClick($event)"
-            >
-              @if (isLoading()) {
-                <ax-loading></ax-loading>
-              } @else {
-                <ax-icon icon="far fa-search"></ax-icon>
-              }
-            </ax-button>
-          </ax-suffix>
-        </ax-tag-box>
-        <ng-template #tagTemplate let-item let-index="index">
-          <div class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface">
-            <span>{{ getTagLabel(item) }}</span>
-            <button type="button" (click)="tagBoxComponent.removeItem(index)">
-              <ax-icon class="ax-icon ax-icon-close"></ax-icon>
-            </button>
-          </div>
-        </ng-template>
+        @if (allowClear() && selectedItems().length > 0) {
+          <ax-button color="ghost" look="outline" [disabled]="disabled()" (onClick)="handleClearClick()">
+            Clear All
+          </ax-button>
+        }
+      </div>
+
+      @for (validation of validationRules(); track $index) {
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
       }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6$1.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: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.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: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPTruncatedBreadcrumbComponent, selector: "axp-truncated-breadcrumb", inputs: ["sections", "characterLimit", "sectionLimit", "separatorIcon", "ellipsisIcon", "eyeIcon"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-entity-category-widget-edit',
                     template: `
-    @if (dataSource()) {
-      @if (look() == 'select') {
-        <ax-select-box
-          #selectBox
-          [dataSource]="dataSource()!"
-          [ngModel]="selectedItems()"
-          [textField]="displayField()"
-          [valueField]="valueField()"
-          [disabled]="disabled()"
-          [multiple]="multiple()"
-          (onValueChanged)="selectBoxValueChange($event)"
-        >
-          <ax-search-box
-            [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
-            (onValueChanged)="handleSearchInputChange($event)"
-          >
-            <ax-clear-button></ax-clear-button>
-          </ax-search-box>
-          @for (validation of validationRules(); track $index) {
-            <ax-validation-rule
-              [rule]="validation.rule"
-              [message]="validation.options?.message"
-              [options]="validation.options"
-            ></ax-validation-rule>
+    <div class="ax-flex ax-flex-col ax-gap-3">
+      @if (selectedItems().length > 0) {
+        <div class="ax-flex ax-flex-col ax-gap-2">
+          @for (item of selectedItems(); track getItemId(item)) {
+            <div class="ax-flex ax-items-center ax-gap-2 ax-p-2 ax-border ax-primary-lightest ax-rounded-xl">
+              <axp-truncated-breadcrumb
+                [sections]="getItemPath(item)"
+                [characterLimit]="characterLimit()"
+                [sectionLimit]="sectionLimit()"
+                class="ax-flex-1"
+              ></axp-truncated-breadcrumb>
+              <ax-button color="ghost" look="blank" class="ax-xs" (onClick)="handleRemoveItemClick($event, item)">
+                <ax-icon icon="ax-icon ax-icon-close"></ax-icon>
+              </ax-button>
+            </div>
           }
-          @if (allowClear()) {
-            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
-          }
-          <ax-suffix>
-            <ax-button
-              color="ghost"
-              look="blank"
-              [disabled]="isLoading() || disabled()"
-              (onClick)="handleOnClick($event)"
-            >
-              @if (isLoading()) {
-                <ax-loading></ax-loading>
-              } @else {
-                <ax-icon icon="far fa-search"></ax-icon>
-              }
-            </ax-button>
-          </ax-suffix>
-        </ax-select-box>
-      } @else {
-        <ax-tag-box
-          #tagBoxComponent
-          [tagTemplate]="tagTemplate"
-          [ngModel]="selectedItems()"
-          [textField]="displayField()"
-          [valueField]="valueField()"
-          (onValueChanged)="handleValueChange($event)"
-          [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
-          [addOnEnter]="false"
-          [addOnComma]="false"
-          [disabled]="disabled()"
-          (onKeyUp)="handleKeyUp($event)"
-          (onBlur)="handleOnBlur($event)"
+        </div>
+      }
+
+      <div class="ax-flex ax-items-center ax-gap-2">
+        <ax-button
+          [text]="'@general:actions.add.title' | translate | async"
+          color="primary"
+          [disabled]="isLoading() || disabled()"
+          (onClick)="handleAddClick($event)"
         >
-          @for (validation of validationRules(); track $index) {
-            <ax-validation-rule
-              [rule]="validation.rule"
-              [message]="validation.options?.message"
-              [options]="validation.options"
-            ></ax-validation-rule>
-          }
-          @if (selectedItems().length > 1 || allowClear()) {
-            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          @if (isLoading()) {
+            <ax-loading></ax-loading>
+          } @else {
+            <ax-icon icon="far fa-plus"></ax-icon>
           }
+        </ax-button>
 
-          <ax-suffix>
-            <ax-button
-              color="ghost"
-              look="blank"
-              [disabled]="isLoading() || disabled()"
-              (onClick)="handleOnClick($event)"
-            >
-              @if (isLoading()) {
-                <ax-loading></ax-loading>
-              } @else {
-                <ax-icon icon="far fa-search"></ax-icon>
-              }
-            </ax-button>
-          </ax-suffix>
-        </ax-tag-box>
-        <ng-template #tagTemplate let-item let-index="index">
-          <div class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface">
-            <span>{{ getTagLabel(item) }}</span>
-            <button type="button" (click)="tagBoxComponent.removeItem(index)">
-              <ax-icon class="ax-icon ax-icon-close"></ax-icon>
-            </button>
-          </div>
-        </ng-template>
+        @if (allowClear() && selectedItems().length > 0) {
+          <ax-button color="ghost" look="outline" [disabled]="disabled()" (onClick)="handleClearClick()">
+            Clear All
+          </ax-button>
+        }
+      </div>
+
+      @for (validation of validationRules(); track $index) {
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
       }
-    }
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         CommonModule,
-                        FormsModule,
                         AXButtonModule,
                         AXDecoratorModule,
                         AXLoadingModule,
                         AXValidationModule,
                         AXFormModule,
-                        AXTagBoxModule,
                         AXTranslationModule,
-                        AXSelectBoxModule,
-                        AXSearchBoxComponent,
+                        AXPTruncatedBreadcrumbComponent,
                     ],
                 }]
-        }], propDecorators: { selectBox: [{ type: i0.ViewChild, args: ['selectBox', { isSignal: true }] }], tagBox: [{ type: i0.ViewChild, args: ['tagBoxComponent', { isSignal: true }] }] } });
+        }] });
 
 var entityCategoryWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6241,7 +6962,7 @@ class AXPEntityCategoryWidgetViewComponent extends AXPValueWidgetComponent {
         <span class="ax-text-muted">---</span>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetViewComponent, decorators: [{
             type: Component,
@@ -7137,7 +7858,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$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: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityListWidgetViewComponent, decorators: [{
             type: Component,
@@ -7708,7 +8429,7 @@ class AXPLookupWidgetViewComponent extends AXPValueWidgetComponent {
           <span class="ax-text-muted">---</span>
         }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLookupWidgetViewComponent, decorators: [{
             type: Component,
@@ -8424,9 +9145,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         </ng-template>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 //
-                AXButtonModule }, { kind: "component", type: i3.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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6$1.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: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.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: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1$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: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6$1.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: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.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: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
@@ -8799,7 +9520,7 @@ class AXPWidgetSelectorWidgetEditComponent extends AXPValueWidgetComponent {
     <axp-widget-property-viewer [widget]="selectedWidgetNode()!" (onChanged)="handleChangeWidget($event)">
     </axp-widget-property-viewer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$2.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: AXButtonModule }, { kind: "component", type: i3.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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$2.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: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$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: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
             type: Component,
@@ -9318,7 +10039,7 @@ class AXPEntityModule {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$1.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i2$3.AXPWorkflowModule, i3$1.AXPWidgetCoreModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityModule, providers: [
             {
@@ -9494,7 +10215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         ]),
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$1.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$3.AXPAppStartUpService }, { type: i0.Injector }] });
 
 //#endregion
 //#region ----   Get Entity Details Query   ----
@@ -10051,5 +10772,5 @@ function detectEntityChanges(oldObj, newObj) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCategoryTreeService, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPEntityApplyUpdatesAction, AXPEntityCategoryTreeSelectorComponent, AXPEntityCategoryWidget, AXPEntityCategoryWidgetColumnComponent, AXPEntityCategoryWidgetEditComponent, AXPEntityCategoryWidgetViewComponent, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailPopoverComponent, AXPEntityDetailPopoverService, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityDynamicDialogService, AXPEntityEventDispatcherService, AXPEntityListTableService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityListWidget, AXPEntityListWidgetViewComponent, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityReferenceWidget, AXPEntityReferenceWidgetColumnComponent, AXPEntityReferenceWidgetDesignerComponent, AXPEntityReferenceWidgetEditComponent, AXPEntityReferenceWidgetPrintComponent, AXPEntityReferenceWidgetViewComponent, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPEntityUpdateViewSectionViewModel, AXPGetEntityDetailsQuery, AXPLookupFilterWidget, AXPLookupFilterWidgetEditComponent, AXPLookupWidget, AXPLookupWidgetColumnComponent, AXPLookupWidgetEditComponent, AXPLookupWidgetViewComponent, AXPMiddlewareAbortError, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXPWidgetSelectorWidget, AXPWidgetSelectorWidgetEditComponent, AXPWidgetSelectorWidgetViewComponent, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER, AXP_ENTITY_MODIFIER, AXP_ENTITY_STORAGE_BACKEND, AXP_ENTITY_STORAGE_MIDDLEWARE, DEFAULT_COLUMN_WIDTHS, DEFAULT_PROPERTY_ORDER, DEFAULT_SECTION_ORDER, actionExists, columnWidthMiddlewareFactory, columnWidthMiddlewareProvider, createColumnWidthMiddlewareProvider, createLayoutOrderingMiddlewareProvider, createModifierContext, detectEntityChanges, ensureListActions, entityDetailsCreateActions, entityDetailsCrudActions, entityDetailsEditAction, entityDetailsReferenceCondition, entityDetailsReferenceCreateActions, entityDetailsSimpleCondition, entityMasterBulkDeleteAction, entityMasterCreateAction, entityMasterCrudActions, entityMasterDeleteAction, entityMasterRecordActions, entityMasterViewAction, entityOverrideDetailsViewAction, eventDispatchMiddleware, isAXPMiddlewareAbortError, layoutOrderingMiddlewareFactory, layoutOrderingMiddlewareProvider };
+export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCategoryTreeService, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPEntityApplyUpdatesAction, AXPEntityCategoryTreeSelectorComponent, AXPEntityCategoryWidget, AXPEntityCategoryWidgetColumnComponent, AXPEntityCategoryWidgetEditComponent, AXPEntityCategoryWidgetViewComponent, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailPopoverComponent, AXPEntityDetailPopoverService, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityDynamicDialogService, AXPEntityEventDispatcherService, AXPEntityListTableService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityListWidget, AXPEntityListWidgetViewComponent, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityReferenceWidget, AXPEntityReferenceWidgetColumnComponent, AXPEntityReferenceWidgetDesignerComponent, AXPEntityReferenceWidgetEditComponent, AXPEntityReferenceWidgetPrintComponent, AXPEntityReferenceWidgetViewComponent, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPEntityUpdateViewSectionViewModel, AXPGetEntityDetailsQuery, AXPLookupFilterWidget, AXPLookupFilterWidgetEditComponent, AXPLookupWidget, AXPLookupWidgetColumnComponent, AXPLookupWidgetEditComponent, AXPLookupWidgetViewComponent, AXPMiddlewareAbortError, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXPTruncatedBreadcrumbComponent, AXPWidgetSelectorWidget, AXPWidgetSelectorWidgetEditComponent, AXPWidgetSelectorWidgetViewComponent, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER, AXP_ENTITY_MODIFIER, AXP_ENTITY_STORAGE_BACKEND, AXP_ENTITY_STORAGE_MIDDLEWARE, DEFAULT_COLUMN_WIDTHS, DEFAULT_PROPERTY_ORDER, DEFAULT_SECTION_ORDER, actionExists, columnWidthMiddlewareFactory, columnWidthMiddlewareProvider, createColumnWidthMiddlewareProvider, createLayoutOrderingMiddlewareProvider, createModifierContext, detectEntityChanges, ensureListActions, entityDetailsCreateActions, entityDetailsCrudActions, entityDetailsEditAction, entityDetailsReferenceCondition, entityDetailsReferenceCreateActions, entityDetailsSimpleCondition, entityMasterBulkDeleteAction, entityMasterCreateAction, entityMasterCrudActions, entityMasterDeleteAction, entityMasterRecordActions, entityMasterViewAction, entityOverrideDetailsViewAction, eventDispatchMiddleware, isAXPMiddlewareAbortError, layoutOrderingMiddlewareFactory, layoutOrderingMiddlewareProvider };
 //# sourceMappingURL=acorex-platform-layout-entity.mjs.map